fix: Mobile-Overflow — v2-shell auf 100vw zwingen, sonst wuchs 1fr-Grid auf Content-Breite
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) <noreply@anthropic.com>
This commit is contained in:
parent
535c2f15e4
commit
d8d8f99965
@ -792,12 +792,28 @@ body.v2 ul.v2-manual ul li::before {
|
|||||||
|
|
||||||
/* ── Responsive: Mobile Drawer ──────────────────────────────────── */
|
/* ── Responsive: Mobile Drawer ──────────────────────────────────── */
|
||||||
@media (max-width: 900px) {
|
@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-columns: 1fr;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
"topbar"
|
"topbar"
|
||||||
"main"
|
"main"
|
||||||
"footer";
|
"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 {
|
.v2-sidebar {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user