From f4aae8c787e8d9d59a55c5f76de62c77ac6f87cb Mon Sep 17 00:00:00 2001
From: TekH <h.tek@digitaldata.works>
Date: Fri, 25 Sep 2026 00:14:08 +0200
Subject: [PATCH] Improve logo rendering and page responsiveness
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Updated `EnvelopeSenderPage.razor` to enhance customer logo rendering with dynamic height and class styling. Refined the "Nur ausgewählte" checkbox label for better styling.

Modified `sender-page.css` to improve layout and responsiveness:
- Added styles for `.sender-customer-logo-area` and `.signflow-company-logo` for proper scaling and alignment.
- Removed `.sender-export-label` styles and introduced `.sender-export-selected-text` for improved checkbox label design.
- Adjusted media queries for better layout on screens up to 1320px and 768px.

Enhanced overall responsiveness and accessibility of the sender page.
---
 .../Components/Pages/EnvelopeSenderPage.razor |  8 +--
 .../wwwroot/css/sender-page.css               | 51 +++++++++++++++----
 2 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/Components/Pages/EnvelopeSenderPage.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/Components/Pages/EnvelopeSenderPage.razor
index be568019..6593c753 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/Components/Pages/EnvelopeSenderPage.razor
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/Components/Pages/EnvelopeSenderPage.razor
@@ -51,7 +51,7 @@
                 @if (_companyLogo is not null && !string.IsNullOrEmpty(_companyLogo.Src))
                 {
                     <img src="@_companyLogo.Src"
-                         style="height: @_companyLogo.Height"
+                         style="--sf-company-logo-height: @_companyLogo.Height"
                          class="@_companyLogo.GetClass("Show")"
                          alt="Kunden-Logo" />
                 }
@@ -105,7 +105,6 @@
                 </button>
 
                 <div class="sender-export-group" title="Export der aktuellen Tabellenansicht">
-                    <label class="sender-export-label" for="sender-export-format">Format</label>
                     <select id="sender-export-format" class="sender-export-format" @bind="_selectedExportFormat" aria-label="Exportformat auswählen">
                         <option value="xlsx">XLSX</option>
                         <option value="csv">CSV</option>
@@ -114,7 +113,10 @@
 
                     <label class="sender-export-selected">
                         <input type="checkbox" @bind="_exportSelectedRowsOnly" />
-                        <span>Nur ausgewählte</span>
+                        <span class="sender-export-selected-text">
+                            <span>Nur</span>
+                            <span>ausgewählte</span>
+                        </span>
                     </label>
 
                     <button class="sender-btn sender-btn--export"
diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
index c1abfe8c..936cefe0 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
@@ -29,6 +29,7 @@
     align-items: center;
     gap: 1rem;
     flex-shrink: 0;     /* don't shrink — logo area in the middle gets the space */
+    min-width: 0;
 }
 
 /* ── Customer logo area (middle of action bar) ──────────────────────────── */
@@ -40,6 +41,13 @@
     min-width: 0;                       /* allow flex child to shrink below content size */
 }
 
+.sender-customer-logo-area .signflow-company-logo {
+    height: clamp(14px, 2vw, var(--sf-company-logo-height, 22px));
+    max-width: min(30vw, 240px);
+    width: auto;
+    object-fit: contain;
+}
+
 /* Placeholder shown when no customer logo is configured */
 .sf-customer-logo-placeholder {
     display: flex;
@@ -150,14 +158,6 @@
     background: rgba(126, 34, 206, 0.04);
 }
 
-.sender-export-label {
-    font-size: 0.72rem;
-    font-weight: 700;
-    color: #4b5563;
-    letter-spacing: 0.01em;
-    white-space: nowrap;
-}
-
 .sender-export-format {
     height: 32px;
     min-width: 84px;
@@ -185,6 +185,13 @@
     white-space: nowrap;
 }
 
+.sender-export-selected-text {
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+    line-height: 1.05;
+}
+
 .sender-export-selected input[type="checkbox"] {
     margin: 0;
 }
@@ -353,7 +360,27 @@
     color: #c62828;
 }
 
-@@media (max-width: 768px) {
+@media (max-width: 1320px) {
+    .sender-action-bar__inner {
+        flex-wrap: wrap;
+        row-gap: 0.75rem;
+    }
+
+    .sender-customer-logo-area {
+        order: 2;
+        flex: 1 1 100%;
+        justify-content: flex-start;
+        padding-left: 2.8rem;
+        margin-top: -0.2rem;
+    }
+
+    .sender-toolbar {
+        order: 3;
+        width: 100%;
+    }
+}
+
+@media (max-width: 768px) {
     .sender-action-bar {
         padding: 1rem 1.25rem;
     }
@@ -362,6 +389,12 @@
         flex-wrap: wrap;
     }
 
+    .sender-customer-logo-area {
+        padding-left: 0;
+        justify-content: center;
+        margin-top: 0;
+    }
+
     .sender-toolbar {
         width: 100%;
         justify-content: flex-start;