From 848039627c07859848b352f58f08c2b1ae55fea5 Mon Sep 17 00:00:00 2001
From: Dotty Dotter <dotty@Mac.wideopen.space>
Date: Thu, 7 May 2026 11:59:22 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20Mobile=20Overflow=20=E2=80=94=20minmax(0?=
 =?UTF-8?q?,1fr)=20+=20overflow-x:hidden?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CSS-Grid 1fr-Track schrumpft per Spec NICHT unter min-content der Kinder.
Bei 390-px-Viewport bleibt der Track deshalb auf ~968px stehen (max-
content der weitesten Inhalte). Standard-Fix: minmax(0,1fr) hebt das
auf, body.overflow-x:hidden als Notbremse, overflow-wrap:anywhere
fuer lange unbreakable Strings.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/static/v2/v2.css | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/app/static/v2/v2.css b/app/static/v2/v2.css
index d11f394..73e3438 100644
--- a/app/static/v2/v2.css
+++ b/app/static/v2/v2.css
@@ -792,12 +792,15 @@ body.v2 ul.v2-manual ul li::before {
 
 /* ── Responsive: Mobile Drawer ──────────────────────────────────── */
 @media (max-width: 900px) {
-  /* Wichtig: Shell zwingen, 100 % Viewport zu nehmen — sonst wächst der
-     1fr-Track auf die natürliche Content-Breite (z.B. .v3-page max-width
-     880 px), weil im CSS-Grid 1fr ohne Constraint = max-content. Folge
-     auf 390 px Phone-Viewport: horizontaler Overflow von 200-580 px. */
+  /* 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;
+  }
   body.v2 .v2-shell {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
     grid-template-areas:
       "topbar"
       "main"
@@ -806,14 +809,15 @@ body.v2 ul.v2-manual ul li::before {
     max-width: 100vw;
     min-width: 0;
   }
-  body.v2 .v2-main {
-    min-width: 0;
-    max-width: 100%;
-    padding: 16px 12px;
-  }
+  body.v2 .v2-main,
   body.v2 .v2-topbar,
   body.v2 .v2-footer {
+    min-width: 0;
     max-width: 100%;
+    overflow-wrap: anywhere;  /* lange URLs / unbreakable Wörter umbrechen */
+  }
+  body.v2 .v2-main {
+    padding: 16px 12px;
   }
 
   .v2-sidebar {