From 310a7c5e0dca8f1f2f327e5846644ceac4190192 Mon Sep 17 00:00:00 2001
From: odweta <code.62rdl@aleeas.com>
Date: Thu, 10 Sep 2026 18:13:18 +0200
Subject: [PATCH] Widen sign-in card so title reliably fits on two lines

The auth title's two spans could each wrap on wide viewports since the
card was capped at 460px while the heading font scaled up to 3.4rem,
producing three lines instead of two. Widen the card, tune the
heading's clamp, and force each title span to a single line above
420px so it never breaks unpredictably. The form and intro text keep
a comfortable reading width inside the wider card.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
---
 app/src/static/style.css | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/src/static/style.css b/app/src/static/style.css
index 16ac819..d7c4761 100644
--- a/app/src/static/style.css
+++ b/app/src/static/style.css
@@ -33,8 +33,8 @@ body {
 }
 
 .auth-card {
-    width: min(100%, 460px);
-    padding: clamp(1.75rem, 5vw, 3.5rem);
+    width: min(100%, 760px);
+    padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.75rem, 6vw, 4.5rem);
     background: var(--paper);
     border: 1px solid rgba(24, 59, 86, 0.12);
     border-radius: 1rem;
@@ -53,16 +53,24 @@ body {
     margin: 0;
     color: var(--navy);
     font-family: Georgia, serif;
-    font-size: clamp(2rem, 6vw, 3.4rem);
+    font-size: clamp(2rem, 5vw, 3.2rem);
     font-weight: 500;
-    line-height: 1.05;
+    line-height: 1.1;
 }
 
 .auth-card h1 span {
     display: block;
+    white-space: nowrap;
+}
+
+@media (max-width: 420px) {
+    .auth-card h1 span {
+        white-space: normal;
+    }
 }
 
 .auth-intro {
+    max-width: 480px;
     margin: 1.25rem 0 2rem;
     color: var(--muted-ink);
     line-height: 1.6;
@@ -71,6 +79,7 @@ body {
 #auth-form {
     display: grid;
     gap: 1rem;
+    width: min(100%, 420px);
 }
 
 #auth-form .form-group {
-- 
2.54.0