diff --git a/CLAUDE.md b/CLAUDE.md index 56417c4..75bc162 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -638,7 +638,14 @@ bedrucktes Blatt ~140mm) proportional exakt gleich aus — mit rem-Maßen lief d Kontext über die feste A5-Fläche (reproduzierbar: abgeschnittene Vorwort-Signatur, beschnittene Tabellen-Legende). Bewusste Ausnahme von der Token-Disziplin (siehe oben): ein bedrucktes A5-Blatt ist kein responsives Website-Element und braucht eine eigene Skala. `letter-spacing` -bleibt trotzdem über `--ls-*` (dimensionslose `em`-Vielfache, kein Konflikt). **Falle beim +bleibt trotzdem über `--ls-*` (dimensionslose `em`-Vielfache, kein Konflikt). **Falle beim Bauen (31.07.2026):** ein zusätzlicher Kommentar wurde versehentlich HINTER das +schließende `*/` des bestehenden gesetzt. Damit stand roher Text vor der Regel, der CSS-Parser +verwarf den kompletten Regelblock — und die A5-Höhe im Swipe-Viewer war wirkungslos, ohne dass +irgendetwas einen Fehler meldete. Die Seiten fielen dadurch auf Inhaltshöhe zurück und waren 350 +bis 559px hoch statt einheitlich 515. **`php -l` prüft CSS nicht**; wer hier etwas ändert, zählt +`/*` gegen `*/` und misst eine Seitenhöhe nach. + +**Falle beim Containment:** `width: auto` + `max-height` kollabiert eine inline-size-contained Box auf ihr Padding (Inhalt zählt nicht mehr) — im Swipe-Modus bekommen `.stadionzeitung-page` **und `.stadionzeitung-cover`** deshalb eine definite Breite (`min(calc(72vh * 148 / 210), 100%)`), diff --git a/public/assets/css/components.css b/public/assets/css/components.css index fbca90b..852d031 100644 --- a/public/assets/css/components.css +++ b/public/assets/css/components.css @@ -5635,7 +5635,8 @@ a.match-row__link:hover { inline-size-Containment (s. o.) lässt eine auto-Breite sonst auf das bloße Padding kollabieren (der Inhalt zählt beim Containment per Definition nicht mit — reproduzierbar 48px schmale Seiten). min() hält - die Seite auf schmalen Viewports in der Track-Breite. */ + die Seite auf schmalen Viewports in der Track-Breite. + Das COVER steht bewusst im selben Selektor, obwohl es sonst eine eigene Klasse hat: es ist genauso ein inline-size-Container und war genauso betroffen. Es hatte hier `width: auto` und blieb am iPhone unsichtbar, während Chrome am Desktop es @@ -5647,12 +5648,26 @@ a.match-row__link:hover { Cover ist `overflow: hidden`, sein Spielerfoto darf randabfallend beschnitten werden). */ .stadionzeitung-viewer.is-enhanced .stadionzeitung-page, -.stadionzeitung-viewer.is-enhanced .stadionzeitung-cover { +.stadionzeitung-viewer.is-enhanced .stadionzeitung-cover, +.stadionzeitung-viewer.is-enhanced .stadionzeitung-page__img { width: min(calc(72vh * 148 / 210), 100%); max-width: none; aspect-ratio: 148 / 210; } +/* Die Bild-Seiten (Anzeigen) leiteten ihre Höhe vorher aus dem EIGENEN + Bildverhältnis ab (width:auto + max-height + object-fit: contain). Die meisten + Motive sind 1440x2043 und damit praktisch A5, drei aber 1440x2037 — die waren + dadurch 513px statt 515px hoch und fielen beim Wischen als Sprung auf + (31.07.2026). Jetzt gilt für sie dieselbe A5-Fläche wie für alle anderen, und + `cover` fängt die 0,4% Verhältnis-Abweichung ab, indem es minimal beschneidet + statt zu verzerren — genau wie die Druckfassung es ohnehin macht. */ +.stadionzeitung-viewer.is-enhanced .stadionzeitung-page__img { + height: auto; + max-height: none; + object-fit: cover; +} + .stadionzeitung-viewer.is-enhanced .stadionzeitung-page { overflow-y: auto; }