From 09257d776652d20a9acea50b9fd4da36b9813ed7 Mon Sep 17 00:00:00 2001
From: TekH <h.tek@digitaldata.works>
Date: Fri, 25 Sep 2026 00:30:03 +0200
Subject: [PATCH] Refactor sender title and improve responsiveness

Refactored the sender title in `EnvelopeSenderPage.razor` to use a structured layout with accessibility improvements. Introduced `.sender-title-main` and `.sender-title-sub` classes for better styling and responsiveness. Updated `.sender-page.css` to enhance layout flexibility, reduce gaps, and improve scaling for logos and titles.

Added media queries for better responsiveness on smaller screens, including adjustments to `.sender-title-section` and logo dimensions. Introduced theme-specific overrides for "purple" and "blazing-dark" themes to ensure consistent styling.

Minor adjustments were made to padding, margins, and font sizes to improve overall layout and visual hierarchy.
---
 .../Components/Pages/EnvelopeSenderPage.razor |   5 +-
 .../wwwroot/css/sender-page.css               | 104 ++++++++++++++++--
 2 files changed, 99 insertions(+), 10 deletions(-)

diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/Components/Pages/EnvelopeSenderPage.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/Components/Pages/EnvelopeSenderPage.razor
index 133917ab..3446aa48 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/Components/Pages/EnvelopeSenderPage.razor
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/Components/Pages/EnvelopeSenderPage.razor
@@ -43,7 +43,10 @@
                         </svg>
                     }
                 </div>
-                <div class="sender-title">Umschlag-Übersicht</div>
+                <div class="sender-title" aria-label="signFLOW Portal - Übersicht">
+                    <span class="sender-title-main">signFLOW Portal</span>
+                    <span class="sender-title-sub">Übersicht</span>
+                </div>
             </div>
 
             @* ── Kunden-Logo (Mitte) ───────────────────────────────────────── *@
diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
index 15eec5d7..bb3d5084 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
@@ -22,14 +22,29 @@
     align-items: center;
     justify-content: space-between;
     gap: 1.5rem;
+    overflow: hidden;
 }
 
 .sender-title-section {
     display: flex;
     align-items: center;
-    gap: 1rem;
+    gap: 0.75rem;
     flex-shrink: 0;     /* don't shrink — logo area in the middle gets the space */
     min-width: 0;
+    position: relative;
+    z-index: 2;
+}
+
+.sender-logo {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+}
+
+.sender-logo .signflow-app-logo {
+    height: clamp(20px, 1.6vw, 24px) !important;
+    width: auto;
 }
 
 /* ── Customer logo area (middle of action bar) ──────────────────────────── */
@@ -42,8 +57,8 @@
 }
 
 .sender-customer-logo-area .signflow-company-logo {
-    height: clamp(14px, 2vw, var(--sf-company-logo-height, 22px));
-    max-width: min(30vw, 240px);
+    height: clamp(13px, 1.45vw, 18px);
+    max-width: min(24vw, 190px);
     width: auto;
     object-fit: contain;
 }
@@ -72,10 +87,29 @@
 }
 
 .sender-title {
-    font-size: 1.25rem;
-    font-weight: 700;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 0.08rem;
+    line-height: 1.12;
     color: #1e293b;
-    letter-spacing: -0.025em;
+    min-width: 0;
+}
+
+.sender-title-main {
+    font-size: clamp(1rem, 1.25vw, 1.12rem);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    white-space: normal;
+}
+
+.sender-title-sub {
+    color: #475569;
+    font-size: clamp(0.72rem, 0.95vw, 0.78rem);
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    white-space: normal;
 }
 
 .sender-toolbar {
@@ -357,14 +391,22 @@
         order: 2;
         flex: 1 1 100%;
         justify-content: flex-start;
-        padding-left: 2.8rem;
-        margin-top: -0.2rem;
+        padding-left: 2.4rem;
+        margin-top: 0;
     }
 
     .sender-toolbar {
         order: 3;
         width: 100%;
     }
+
+    .sender-title-main {
+        font-size: 1.02rem;
+    }
+
+    .sender-title-sub {
+        font-size: 0.72rem;
+    }
 }
 
 @media (max-width: 768px) {
@@ -374,6 +416,21 @@
 
     .sender-action-bar__inner {
         flex-wrap: wrap;
+        gap: 0.9rem;
+    }
+
+    .sender-title-section {
+        flex: 1 1 auto;
+        min-width: 220px;
+    }
+
+    .sender-logo .signflow-app-logo {
+        height: 20px !important;
+    }
+
+    .sender-customer-logo-area .signflow-company-logo {
+        height: 13px;
+        max-width: 150px;
     }
 
     .sender-customer-logo-area {
@@ -396,7 +453,16 @@
     }
 
     .sender-title {
-        font-size: 1.125rem;
+        margin-top: 0;
+        gap: 0;
+    }
+
+    .sender-title-main {
+        font-size: 0.94rem;
+    }
+
+    .sender-title-sub {
+        font-size: 0.68rem;
     }
 
     .sender-content {
@@ -418,6 +484,18 @@
     }
 }
 
+@media (max-width: 560px) {
+    .sender-title-section {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.4rem;
+    }
+
+    .sender-title {
+        padding-left: 0.1rem;
+    }
+}
+
 /* ── Theme overrides ─────────────────────────────────────────────────────── */
 /* Selector: [data-sf-theme="<name>"] set on <html> by signflow-theme.js     */
 
@@ -477,6 +555,10 @@
     border-bottom-color: #9333ea;
 }
 
+[data-sf-theme="purple"] .sender-title-sub {
+    color: #6b21a8;
+}
+
 /* ── Blazing Dark theme ────────────────────────────────────────────────────
    Dark navy background, frosted glass surfaces turn semi-dark               */
 [data-sf-theme="blazing-dark"] .sender-dashboard-layout {
@@ -493,6 +575,10 @@
     color: rgba(255, 255, 255, 0.92);
 }
 
+[data-sf-theme="blazing-dark"] .sender-title-sub {
+    color: rgba(224, 231, 255, 0.82);
+}
+
 [data-sf-theme="blazing-dark"] .sender-logo svg {
     color: #818cf8;
     filter: drop-shadow(0 2px 4px rgba(129, 140, 248, 0.3));