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 @@
}
-
Umschlag-Übersicht
+
+ signFLOW Portal
+ Übersicht
+
@* ── 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=""] set on 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));