From ed9ea0ac5458d8215e1e6c1b9b868978c388ea7e Mon Sep 17 00:00:00 2001
From: TekH <h.tek@digitaldata.works>
Date: Mon, 9 Nov 2026 16:16:08 +0100
Subject: [PATCH] Refactor receiver row layout in CreateEnvelopeWizard

Refactor the structure and class names in `CreateEnvelopeWizardPopup.razor` to improve the layout and alignment of receiver rows:
- Replace `sender-create-wizard__receiver-item` with `sender-create-wizard__receiver-row`.
- Replace `sender-create-wizard__form-grid` with `sender-create-wizard__receiver-fields-stack`.

Update `sender-page.css` to introduce new classes:
- Add `.sender-create-wizard__receiver-row` for flex layout with proper alignment and spacing.
- Add `.sender-create-wizard__receiver-fields-stack` for grid-based field organization.

Adjust styles for responsiveness, including column layouts for smaller contexts. These changes enhance the visual structure and responsiveness of the receiver rows.
---
 .../Sender/CreateEnvelopeWizardPopup.razor    |  8 +++----
 .../wwwroot/css/sender-page.css               | 23 +++++++++++++++++++
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor
index fdc793dd..fe362a9b 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor
@@ -296,8 +296,8 @@
                                                         var rowIndex = i;
                                                         var receiver = _receivers[rowIndex];
 
-                                                        <div class="sender-create-wizard__receiver-item" role="row">
-                                                            <div class="sender-create-wizard__form-grid sender-create-wizard__field--full sender-create-wizard__receiver-item-fields">
+                                                        <div class="sender-create-wizard__receiver-row" role="row">
+                                                            <div class="sender-create-wizard__receiver-fields-stack sender-create-wizard__field--full">
                                                                 <div class="sender-create-wizard__field">
                                                                     <DxTextBox Text="@receiver.FullName"
                                                                                TextChanged="@(value => OnReceiverListNameChanged(rowIndex, value))"
@@ -329,8 +329,8 @@
                                                         </div>
                                                     }
 
-                                                    <div class="sender-create-wizard__receiver-item sender-create-wizard__receiver-item--new" role="row">
-                                                        <div class="sender-create-wizard__form-grid sender-create-wizard__field--full sender-create-wizard__receiver-item-fields">
+                                                    <div class="sender-create-wizard__receiver-row" role="row">
+                                                        <div class="sender-create-wizard__receiver-fields-stack sender-create-wizard__field--full">
                                                             <div class="sender-create-wizard__field">
                                                                 <DxTextBox Text="@_receiverName"
                                                                            TextChanged="OnReceiverNameChanged"
diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
index 097e914e..3e413926 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
@@ -1502,6 +1502,20 @@
     gap: 0.5rem;
 }
 
+.sender-create-wizard__receiver-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.55rem;
+}
+
+.sender-create-wizard__receiver-fields-stack {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.35rem;
+}
+
 .sender-create-wizard__receiver-item {
     display: flex;
     align-items: center;
@@ -1757,6 +1771,15 @@
         align-items: flex-start;
     }
 
+    .sender-create-wizard__receiver-row {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .sender-create-wizard__receiver-fields-stack {
+        grid-template-columns: 1fr;
+    }
+
     .sender-create-wizard__receiver-remove {
         width: 100%;
     }