cdnV2

commit db0113c7f95383d939a59321d0c15a75ba58f79b
parent 2165b7df88a348a05ff4092a9f0e2e91467b6c49
Author: claude-cdn-bot <claude-bot@users.noreply.github.com>
Date:   Tue, 13 Oct 2026 02:13:14 +0000

fix(ui): keep the header row steady when the mobile menu opens

The header used min-height + flex-wrap, so once the menu wrapped onto a second line the logo row lost its
vertical centring and jumped up ~10px (crowding the browser bar). The logo/tools row now owns the header
height. The open menu is also capped to the viewport and scrolls, so it can't run off short phones.

Diffstat:
M
app/static/app.css
 | 
8
++++----

1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/app/static/app.css b/app/static/app.css
@@ -258,9 +258,8 @@ body.turbo-loading .page { opacity: 0.55; pointer-events: none; transition: opac
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: 0.5rem;
+    gap: 0 0.5rem;
     max-width: calc(var(--page-w) + var(--gutter) * 2);
-    min-height: var(--header-h);
     margin: 0 auto;
     padding: 0 var(--gutter);
 }
@@ -268,6 +267,7 @@ body.turbo-loading .page { opacity: 0.55; pointer-events: none; transition: opac
 .wordmark {
     display: inline-flex;
     align-items: center;
+    min-height: var(--header-h);
     gap: 0.6rem;
     order: 0;
     color: var(--text);
@@ -280,7 +280,7 @@ body.turbo-loading .page { opacity: 0.55; pointer-events: none; transition: opac
 .wordmark img { border-radius: 8px; display: block; }
 .wordmark b { color: var(--highlight); font-weight: 800; margin: 0 0.04em; }
 
-.site-header__tools { display: flex; align-items: center; gap: 0.4rem; order: 2; margin-left: 0.25rem; }
+.site-header__tools { display: flex; align-items: center; gap: 0.4rem; order: 2; margin-left: 0.25rem; min-height: var(--header-h); }
 .site-nav { display: flex; align-items: center; gap: 0.15rem; order: 1; flex: 1; justify-content: flex-end; }
 
 .nav-link {
@@ -871,7 +871,7 @@ body.turbo-loading .page { opacity: 0.55; pointer-events: none; transition: opac
         flex-direction: column; align-items: stretch; justify-content: flex-start;
         gap: 2px; padding: 0.4rem 0 0.9rem;
     }
-    .site-nav.is-open { display: flex; }
+    .site-nav.is-open { display: flex; max-height: calc(100vh - var(--header-h) - env(safe-area-inset-top)); max-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain; }
     .site-nav .nav-link { padding: 0.7rem 0.75rem; font-size: var(--fs-base); }
     .nav-cta { margin: 0.4rem 0 0; justify-content: center; }
     .more__toggle { display: none; }