From d8d8f99965be656bfda18bcd96eeb82a9d182f76 Mon Sep 17 00:00:00 2001 From: Dotty Dotter Date: Thu, 7 May 2026 11:55:03 +0200 Subject: [PATCH] =?UTF-8?q?fix:=20Mobile-Overflow=20=E2=80=94=20v2-shell?= =?UTF-8?q?=20auf=20100vw=20zwingen,=20sonst=20wuchs=201fr-Grid=20auf=20Co?= =?UTF-8?q?ntent-Breite?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bug auf 390-px-Phone-Viewport: html/body waren korrekt 390 px, aber .v2-main rendert mit 968 px Breite, alle Inhalte überlaufen horizontal um 200-580 px. Ursache: .v2-shell hatte im mobile-Media-Query nur grid-template-columns: 1fr — ohne explizite width:100% nimmt Grid die max-content-Breite des 1fr-Tracks an, was bei .v3-page max-width:880 auf 880+padding wächst. Folge: Sidebar ausgeblendet, aber Layout trotzdem auf Desktop-Breite. Fix in @media (max-width: 900px): - body.v2 .v2-shell { width: 100%; max-width: 100vw; min-width: 0; } - body.v2 .v2-main { max-width: 100%; min-width: 0; padding: 16px 12px; } - body.v2 .v2-topbar/.v2-footer { max-width: 100%; } body-Selector mit body.v2-Prefix für Spezifität gegen die Default- Regel ohne body.v2. Co-Authored-By: Claude Opus 4.7 (1M context) --- app/static/v2/v2.css | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/app/static/v2/v2.css b/app/static/v2/v2.css index 6e5ae07..d11f394 100644 --- a/app/static/v2/v2.css +++ b/app/static/v2/v2.css @@ -792,12 +792,28 @@ body.v2 ul.v2-manual ul li::before { /* ── Responsive: Mobile Drawer ──────────────────────────────────── */ @media (max-width: 900px) { - .v2-shell { + /* 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. */ + body.v2 .v2-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "main" "footer"; + width: 100%; + max-width: 100vw; + min-width: 0; + } + body.v2 .v2-main { + min-width: 0; + max-width: 100%; + padding: 16px 12px; + } + body.v2 .v2-topbar, + body.v2 .v2-footer { + max-width: 100%; } .v2-sidebar {