From 344727bed0e4f1261ddd3ad7461963869712a3b4 Mon Sep 17 00:00:00 2001 From: fs Date: Fri, 31 Jul 2026 17:43:52 +0200 Subject: [PATCH] Vorwort-Seite: Rasenbild bis zur Blattkante MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Unter dem einblendenden Rasenbild blieb ein weißer Streifen, responsiv wurde er größer. Gemessen bei 390px Viewport: Seite 559px hoch, Vorwort 515px — 44px Lücke. Ursache lag nicht am Vorwort, sondern an der Seite: .stadionzeitung-viewer__page ist display:flex, und der Flex-Default align-items:stretch streckt die Seite auf die Höhe der Flex-Zeile und übersteuert ihre aspect-ratio. Die Seite war damit gar kein A5 mehr (559/363 statt 210/148) — das betraf ALLE Seiten, sichtbar wurde es nur beim Vorwort, weil dort ein Bild die Blattkante erreichen muss. align-items: center behebt es an der Wurzel: alle Seiten sind wieder exakt A5, Lücke 0px. Zusätzlich bekommt das Vorwort min-height: calc(100% + 2x Padding) als Absicherung — die aspect-ratio trägt weiter, wenn die Seite keine definite Höhe hat (No-JS-Stapel, Druck), die min-height füllt sie, wenn sie eine hat. Gemessen vorher/nachher, Desktop-Viewer per Screenshot gegengeprüft. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7 --- public/assets/css/components.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/public/assets/css/components.css b/public/assets/css/components.css index ddda131..74fefd9 100644 --- a/public/assets/css/components.css +++ b/public/assets/css/components.css @@ -5343,6 +5343,13 @@ a.match-row__link:hover { .stadionzeitung-viewer.is-enhanced .stadionzeitung-viewer__page { display: flex; + /* align-items MUSS gesetzt sein: der Flex-Default `stretch` streckt die Seite auf + die Höhe der Flex-Zeile und übersteuert damit ihre aspect-ratio — bei 390px + Viewport war die Seite 559px statt 515px hoch, also gar kein A5 mehr. Sichtbar + wurde das nur auf der Vorwort-Seite, deren Rasenbild bis zur Blattkante reichen + muss: darunter blieben 44px weiß (31.07.2026). Die anderen Seiten sind oben + ausgerichtet und weiß, dort fällt eine zu hohe Seite nicht auf. */ + align-items: center; flex: 0 0 100%; /* Ohne das schrumpft ein Flex-Item nie unter die Content-Breite seiner Kinder (Default: min-width:auto) — eine breite Tabelle in der @@ -6065,6 +6072,13 @@ body.is-sz-full .back-to-top { nicht, das erzeugt noch keinen Stacking-Context). */ z-index: 0; aspect-ratio: 148 / 210; + /* Gürtel und Hosenträger: die aspect-ratio gibt der Box eine Fläche, wenn die + Seite keine definite Höhe hat (No-JS-Stapel, Druck). Hat sie eine, füllt + min-height die Seite wirklich aus — 100% plus das doppelte Seiten-Padding, + weil der negative Margin unten genau um diesen Betrag über die Kante geht. + Ohne das entstand ein weißer Streifen unter dem Rasenbild, sobald die Seite + aus irgendeinem Grund höher war als ihr A5-Verhältnis. */ + min-height: calc(100% + var(--space-l) * 2); overflow-y: auto; margin: calc(var(--space-l) * -1); /* cqi statt Space-Token: Selbst-Containment wie das Cover — die Seite