From 3302be93480f91d83b46c031a8e35721b35d2514 Mon Sep 17 00:00:00 2001
From: TekH <h.tek@digitaldata.works>
Date: Tue, 16 Jun 2026 16:47:11 +0200
Subject: [PATCH] Refactor grid columns and improve UI styling

Removed fixed column widths in `EnvelopeSenderPage.razor` for dynamic sizing. Added `CellDisplayTemplate` to `Title`, `Status`, and `EnvelopeReceivers` columns for custom data rendering. Fixed gradient typo in progress bar CSS.

Added a new CSS rule to hide empty DevExpress grid cells and updated `sender-page.css` to include this rule while preserving existing styles.
---
 .../Pages/EnvelopeSenderPage.razor             | 18 +++++++++---------
 .../wwwroot/css/sender-page.css                |  5 +++++
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeSenderPage.razor b/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeSenderPage.razor
index bbe36e27..2ed8afcd 100644
--- a/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeSenderPage.razor
+++ b/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeSenderPage.razor
@@ -129,13 +129,13 @@
                                 SelectedDataItemChanged="@OnSelectedEnvelopeChanged"
                                 CustomizeElement="OnCustomizeElement">
                             <Columns>
-                                <DxGridDataColumn FieldName="Id" Caption="ID" Width="80px" />
-                                <DxGridDataColumn FieldName="Title" Caption="Titel" Width="300px">
+                                <DxGridDataColumn FieldName="Id" Caption="ID" />
+                                <DxGridDataColumn FieldName="Title" Caption="Titel">
                                     <CellDisplayTemplate Context="cellContext">
                                         <strong>@((cellContext.DataItem as EnvelopeDto)?.Title)</strong>
                                     </CellDisplayTemplate>
                                 </DxGridDataColumn>
-                                <DxGridDataColumn FieldName="Status" Caption="Status" Width="180px">
+                                <DxGridDataColumn FieldName="Status" Caption="Status">
                                     <CellDisplayTemplate Context="cellContext">
                                         @{
                                             var envelope = cellContext.DataItem as EnvelopeDto;
@@ -149,7 +149,7 @@
                                         }
                                     </CellDisplayTemplate>
                                 </DxGridDataColumn>
-                                <DxGridDataColumn FieldName="EnvelopeReceivers" Caption="Empfänger" Width="250px">
+                                <DxGridDataColumn FieldName="EnvelopeReceivers" Caption="Empfänger">
                                     <CellDisplayTemplate Context="cellContext">
                                         @{
                                             var envelope = cellContext.DataItem as EnvelopeDto;
@@ -221,13 +221,13 @@
                                 SelectedDataItemChanged="@OnSelectedEnvelopeChanged"
                                 CustomizeElement="OnCustomizeElement">
                             <Columns>
-                                <DxGridDataColumn FieldName="Id" Caption="ID" Width="80px" />
-                                <DxGridDataColumn FieldName="Title" Caption="Titel" Width="300px">
+                                <DxGridDataColumn FieldName="Id" Caption="ID" />
+                                <DxGridDataColumn FieldName="Title" Caption="Titel">
                                     <CellDisplayTemplate Context="cellContext">
                                         <strong>@((cellContext.DataItem as EnvelopeDto)?.Title)</strong>
                                     </CellDisplayTemplate>
                                 </DxGridDataColumn>
-                                <DxGridDataColumn FieldName="Status" Caption="Status" Width="180px">
+                                <DxGridDataColumn FieldName="Status" Caption="Status">
                                     <CellDisplayTemplate Context="cellContext">
                                         @{
                                             var envelope = cellContext.DataItem as EnvelopeDto;
@@ -241,7 +241,7 @@
                                         }
                                     </CellDisplayTemplate>
                                 </DxGridDataColumn>
-                                <DxGridDataColumn FieldName="EnvelopeReceivers" Caption="Empfänger" Width="250px">
+                                <DxGridDataColumn FieldName="EnvelopeReceivers" Caption="Empfänger">
                                     <CellDisplayTemplate Context="cellContext">
                                         @{
                                             var envelope = cellContext.DataItem as EnvelopeDto;
@@ -255,7 +255,7 @@
                                                     </span>
                                                     @if (total > 0) {
                                                         <div style="flex: 1; min-width: 60px; max-width: 120px; height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden;">
-                                                            <div style="height: 100%; background: linear-gradient(90px, #81c784 0%, #66bb6a 100%); width: @((signed * 100.0 / total).ToString("F0"))%;"></div>
+                                                            <div style="height: 100%; background: linear-gradient(90deg, #81c784 0%, #66bb6a 100%); width: @((signed * 100.0 / total).ToString("F0"))%;"></div>
                                                         </div>
                                                     }
                                                 </div>
diff --git a/EnvelopeGenerator.ReceiverUI/wwwroot/css/sender-page.css b/EnvelopeGenerator.ReceiverUI/wwwroot/css/sender-page.css
index cff932bd..9195af48 100644
--- a/EnvelopeGenerator.ReceiverUI/wwwroot/css/sender-page.css
+++ b/EnvelopeGenerator.ReceiverUI/wwwroot/css/sender-page.css
@@ -174,6 +174,11 @@
     padding: 1.5rem 2rem 2rem;
 }
 
+/* Hide DevExpress empty cells */
+.dxbl-grid-empty-cell {
+    display: none !important;
+}
+
 .status-badge {
     display: inline-flex;
     align-items: center;