diff --git a/app/static/v2/v2.css b/app/static/v2/v2.css index b5872fc..b67127e 100644 --- a/app/static/v2/v2.css +++ b/app/static/v2/v2.css @@ -793,12 +793,11 @@ body.v2 ul.v2-manual ul li::before { /* ── Responsive: Mobile Drawer ──────────────────────────────────── */ @media (max-width: 900px) { /* CSS-Grid-Bug: 1fr-Track schrumpft NICHT unter die min-content seiner - Kinder. Mit minmax(0, 1fr) erlauben wir track auf 0 zu schrumpfen, - was Overflow durch min-content (lange Wörter, Tables, fixe Breiten) - verhindert. Plus body.overflow-x:hidden als Notbremse. */ - body.v2 { - overflow-x: hidden; - } + Kinder. Mit minmax(0, 1fr) erlauben wir track auf 0 zu schrumpfen. + + KEIN body.overflow-x:hidden hier — das bricht position:sticky in + Safari (sticky-Element kommt nicht ueber den scrollenden Container, + Topbar verschwindet hinter Safari-Chrome). minmax(0,1fr) reicht. */ body.v2 .v2-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: @@ -814,22 +813,31 @@ body.v2 ul.v2-manual ul li::before { body.v2 .v2-footer { min-width: 0; max-width: 100%; - overflow-wrap: anywhere; /* lange URLs / unbreakable Wörter umbrechen */ + overflow-wrap: anywhere; } body.v2 .v2-main { padding: 16px 12px; } - /* Topbar darf auf Mobile umbrechen, sonst pusht das Auth-Widget + - Bundesland-Selector + Theme-Toggle die rechte Kante ueber 390 px. */ + /* Mobile Topbar: nicht wrappen (broke sticky in Safari), stattdessen + weniger wichtige Items via display:none aus dem Flow nehmen. Brand, + Auth-Widget und Theme-Toggle bleiben erreichbar. */ body.v2 .v2-topbar { - flex-wrap: wrap; - height: auto; - min-height: 32px; - row-gap: 4px; - padding: 4px 12px; + height: 32px; + padding: 0 12px; + flex-wrap: nowrap; + z-index: 200; } - body.v2 .v2-topbar > * { - max-height: none; + /* Methodik + Quellen + Bundesland-Selector werden auf Mobile aus dem + Topbar verbannt (sind im Sidebar-Drawer + Footer ohnehin nochmal). */ + body.v2 .v2-topbar > a[href="/methodik"], + body.v2 .v2-topbar > a[href="/quellen"], + body.v2 .v2-topbar > #v2-global-bl { + display: none; + } + /* Safe-Area-Inset fuer iOS-Safari: Topbar respektiert die Browser- + Chrome-Hoehe ueber den ersten 0 px der Page. */ + body.v2 .v2-topbar { + padding-top: env(safe-area-inset-top, 0); } .v2-sidebar {