odweta/fakturovac
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Widen sign-in card so title reliably fits on two lines

Browse Source 
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>
This commit is contained in:
odweta
2026-09-10 18:13:18 +02:00
co-authored by Copilot App
parent 60be8331c1
commit 310a7c5e0d
1 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/static/style.css
+13 -4
View File
@@ -33,8 +33,8 @@ body {
} }
.auth-card { .auth-card {
width: min(100%, 460px); width: min(100%, 760px);
padding: clamp(1.75rem, 5vw, 3.5rem); padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.75rem, 6vw, 4.5rem);
background: var(--paper); background: var(--paper);
border: 1px solid rgba(24, 59, 86, 0.12); border: 1px solid rgba(24, 59, 86, 0.12);
border-radius: 1rem; border-radius: 1rem;
@@ -53,16 +53,24 @@ body {
margin: 0; margin: 0;
color: var(--navy); color: var(--navy);
font-family: Georgia, serif; font-family: Georgia, serif;
font-size: clamp(2rem, 6vw, 3.4rem); font-size: clamp(2rem, 5vw, 3.2rem);
font-weight: 500; font-weight: 500;
line-height: 1.05; line-height: 1.1;
} }
.auth-card h1 span { .auth-card h1 span {
display: block; display: block;
white-space: nowrap;
}
@media (max-width: 420px) {
.auth-card h1 span {
white-space: normal;
}
} }
.auth-intro { .auth-intro {
max-width: 480px;
margin: 1.25rem 0 2rem; margin: 1.25rem 0 2rem;
color: var(--muted-ink); color: var(--muted-ink);
line-height: 1.6; line-height: 1.6;
@@ -71,6 +79,7 @@ body {
#auth-form { #auth-form {
display: grid; display: grid;
gap: 1rem; gap: 1rem;
width: min(100%, 420px);
} }
#auth-form .form-group { #auth-form .form-group {