From a5ca3da8421e33de1ff62f6529e5329b27557138 Mon Sep 17 00:00:00 2001
From: Dotty Dotter <dotty@Mac.wideopen.space>
Date: Thu, 7 May 2026 14:00:57 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20Topbar=20in=20Safari=20=E2=80=94=20overf?=
 =?UTF-8?q?low-x:hidden=20raus,=20flex-wrap=20raus,=20safe-area-inset=20re?=
 =?UTF-8?q?in?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 app/static/v2/v2.css | 40 ++++++++++++++++++++++++----------------
 1 file changed, 24 insertions(+), 16 deletions(-)

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 {