tobias/gwoe-antragspruefer
1
0
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: Topbar in Safari — overflow-x:hidden raus, flex-wrap raus, safe-area-inset rein

Browse Source 
User-Bericht: 'Die obere Menueleiste verschwindet hinter den Tabs in
Safari. Und ich kann nicht mehr auf Anmelden klicken.'

Drei zusammenhaengende Probleme im Mobile-Media-Query:

1. body.v2 { overflow-x: hidden } war als Notbremse fuer Layout-Overflow
   gedacht, aber Safari (WebKit) interpretiert das so, dass position:
   sticky-Kinder nicht ueber den scrollenden Container kommen — die
   Topbar haftet nicht mehr richtig und kann hinter Safaris eigener
   Tab-Bar verschwinden. Raus damit.
   minmax(0, 1fr) auf v2-shell reicht als Overflow-Schutz.

2. flex-wrap: wrap auf der Topbar liess die Auth-/Theme-/Bundesland-
   Items in eine zweite Zeile umbrechen. Sticky-Elements mit
   variabler Hoehe haben in Safari Render-Bugs (clipping, click-
   absorption). Stattdessen jetzt: weniger wichtige Items
   (Methodik/Quellen-Links + Bundesland-Selector) auf Mobile via
   display:none ausgeblendet. Brand, Auth-Control und Theme-Toggle
   bleiben — passen problemlos in eine 32-px-Zeile.

3. padding-top: env(safe-area-inset-top, 0) fuer iOS-Safari, damit
   die Topbar Saafais Chrome-Overlap respektiert (Notch, URL-Bar,
   Tab-Bar im 'Compact'-Mode).

Plus z-index: 200 auf der Topbar — schaerfer als alle Page-Elemente,
sodass Anmelden-Button garantiert klickbar bleibt selbst wenn
darunterliegende Elemente in Edge-Cases ueberlappen.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dotty Dotter 2026-05-07 14:00:57 +02:00
parent 5fb326e8bc
commit a5ca3da842
1 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
app/static/v2/v2.css
View File

@ -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 {