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

fix: Mobile Overflow — minmax(0,1fr) + overflow-x:hidden

Browse Source 
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>
This commit is contained in:
Dotty Dotter 2026-05-07 11:59:22 +02:00
parent d8d8f99965
commit 848039627c
1 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -792,12 +792,15 @@ body.v2 ul.v2-manual ul li::before {
/* ── Responsive: Mobile Drawer ──────────────────────────────────── */ /* ── Responsive: Mobile Drawer ──────────────────────────────────── */
@media (max-width: 900px) { @media (max-width: 900px) {
/* Wichtig: Shell zwingen, 100 % Viewport zu nehmen — sonst wächst der /* CSS-Grid-Bug: 1fr-Track schrumpft NICHT unter die min-content seiner
1fr-Track auf die natürliche Content-Breite (z.B. .v3-page max-width Kinder. Mit minmax(0, 1fr) erlauben wir track auf 0 zu schrumpfen,
880 px), weil im CSS-Grid 1fr ohne Constraint = max-content. Folge was Overflow durch min-content (lange Wörter, Tables, fixe Breiten)
auf 390 px Phone-Viewport: horizontaler Overflow von 200-580 px. */ verhindert. Plus body.overflow-x:hidden als Notbremse. */
body.v2 {
overflow-x: hidden;
}
body.v2 .v2-shell { body.v2 .v2-shell {
grid-template-columns: 1fr; grid-template-columns: minmax(0, 1fr);
grid-template-areas: grid-template-areas:
"topbar" "topbar"
"main" "main"
@ -806,14 +809,15 @@ body.v2 ul.v2-manual ul li::before {
max-width: 100vw; max-width: 100vw;
min-width: 0; min-width: 0;
} }
body.v2 .v2-main { body.v2 .v2-main,
min-width: 0;
max-width: 100%;
padding: 16px 12px;
}
body.v2 .v2-topbar, body.v2 .v2-topbar,
body.v2 .v2-footer { body.v2 .v2-footer {
min-width: 0;
max-width: 100%; max-width: 100%;
overflow-wrap: anywhere; /* lange URLs / unbreakable Wörter umbrechen */
}
body.v2 .v2-main {
padding: 16px 12px;
} }
.v2-sidebar { .v2-sidebar {