From 496328262025bd5f28510d9c737eb5b5e32814ca Mon Sep 17 00:00:00 2001 From: vjrj Date: Wed, 22 Jul 2026 00:01:20 +0200 Subject: [PATCH] fix(site): only wrap header nav on small screens if it overflows The forced width:100% on .site-nav below 560px was written back when the language switcher spelled out every language name and needed the room. Now that it's a compact pill, the header fits on one line down to ~360px; let flex-wrap handle the actual overflow case instead of always forcing a second row. --- site/assets/css/main.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/site/assets/css/main.css b/site/assets/css/main.css index 9cb1bc9..55e230f 100644 --- a/site/assets/css/main.css +++ b/site/assets/css/main.css @@ -121,11 +121,15 @@ a { color: var(--green); } .lang-menu a.lang:hover { background: var(--container); } .lang-menu span.current { color: var(--muted); font-weight: 600; } -/* Narrow phones: brand on its own row, nav wraps beneath it, left-aligned. */ +/* Narrow phones: shrink a bit, but only wrap the nav below the brand if it + actually stops fitting — the language menu is a compact pill now, not + three spelled-out language names, so it fits alongside "About Legal" down + to fairly small widths. flex-wrap on .site-header handles the overflow + case on its own; no need to force it. */ @media (max-width: 560px) { .site-header { gap: .5rem; } .brand { font-size: 1.15rem; } - .site-nav { width: 100%; gap: .4rem 1rem; font-size: .95rem; } + .site-nav { gap: .4rem 1rem; font-size: .95rem; } } main { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }