nm/website
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(hero): ISO-Board Mobile-Overflow am Track klemmen, statt clippen #31

Merged
skr merged 1 commit from fix/hero-iso-board-mobile-track into main 2026-05-09 16:34:42 +00:00
Conversation 0 Commits 1 Files changed 2 +20 -12
skr commented 2026-05-09 16:00:31 +00:00
Owner
Copy link

Summary

  • Root Cause: .iso-variant-stack { grid-template-columns: 1fr } resolved zu minmax(auto, 1fr); auto-Floor = Min-Content der Boards (~410px wegen fixer Tracks in .iso-b-head: 128px repeat(4, ...), .iso-c-scale: 160px 1fr 46px). Auf 350px Wrap-Breite (iPhone) expandierte der Grid-Track auf 414px — das Board rendert 64px ueber die Wrap-Box.
  • PR #29 / der nicht-haltende Workaround: overflow-x: clip auf .iso-hero-wrap. Clippt in Chromium nachweisbar (Playwright-Hit-Test bei x>370 trifft kein iso-Element), aber iOS Safari ist hier unzuverlaessig — User-Bericht 2026-05-09: Boards laufen weiterhin rechts aus dem Bild, durch die jetzt am Wrap-Rand endenden Picker und Note schlimmer als vorher.
  • Fix: Track via minmax(0, 1fr) an die Container-Box klemmen — kein Ueberlauf, also kein Clip noetig. min-width: 0; overflow: hidden auf den Boards selbst clippt internen Restueberlauf (z. B. iso-b's 128px-Spalte) am Panel-Rand statt am Wrap. overflow-x: clip auf .iso-hero-wrap ist damit obsolet und entfaellt.

Verifikation (Playwright lokal)

Viewport Board.width Board.scrollWidth Board.right Status
390 (iPhone) 350 348 370 flush mit Picker und Note
768 (Tablet) 699 697 733 natuerlich
1440 (Desktop) 411 409 1376 unveraendert

Alle 5 Varianten A-E auf 390: jede right=370, kein Bleed.

Test plan

  • CI durch (check:drift, lint, typecheck, test, build)
  • iPhone Safari: Board-Inhalt flush mit Picker und Disclaimer-Note
  • Tablet 768 / Desktop 1440 Layout unveraendert
  • Alle 5 Varianten A-E auf Mobile durchklicken
  • KI-012 in docs/KNOWN_ISSUES.md sichtbar

Known-issues registry reviewed, 1 new entry added (KI-012).

## Summary - **Root Cause**: `.iso-variant-stack { grid-template-columns: 1fr }` resolved zu `minmax(auto, 1fr)`; auto-Floor = Min-Content der Boards (~410px wegen fixer Tracks in `.iso-b-head: 128px repeat(4, ...)`, `.iso-c-scale: 160px 1fr 46px`). Auf 350px Wrap-Breite (iPhone) expandierte der Grid-Track auf 414px — das Board rendert 64px ueber die Wrap-Box. - **PR #29 / der nicht-haltende Workaround**: `overflow-x: clip` auf `.iso-hero-wrap`. Clippt in Chromium nachweisbar (Playwright-Hit-Test bei x>370 trifft kein iso-Element), aber iOS Safari ist hier unzuverlaessig — User-Bericht 2026-05-09: Boards laufen weiterhin rechts aus dem Bild, durch die jetzt am Wrap-Rand endenden Picker und Note **schlimmer als vorher**. - **Fix**: Track via `minmax(0, 1fr)` an die Container-Box klemmen — kein Ueberlauf, also kein Clip noetig. `min-width: 0; overflow: hidden` auf den Boards selbst clippt internen Restueberlauf (z. B. iso-b's 128px-Spalte) am Panel-Rand statt am Wrap. `overflow-x: clip` auf `.iso-hero-wrap` ist damit obsolet und entfaellt. ## Verifikation (Playwright lokal) | Viewport | Board.width | Board.scrollWidth | Board.right | Status | |---|---|---|---|---| | 390 (iPhone) | 350 | 348 | 370 | flush mit Picker und Note | | 768 (Tablet) | 699 | 697 | 733 | natuerlich | | 1440 (Desktop) | 411 | 409 | 1376 | unveraendert | Alle 5 Varianten A-E auf 390: jede `right=370`, kein Bleed. ## Test plan - [ ] CI durch (`check:drift`, `lint`, `typecheck`, `test`, `build`) - [ ] iPhone Safari: Board-Inhalt flush mit Picker und Disclaimer-Note - [ ] Tablet 768 / Desktop 1440 Layout unveraendert - [ ] Alle 5 Varianten A-E auf Mobile durchklicken - [ ] KI-012 in `docs/KNOWN_ISSUES.md` sichtbar Known-issues registry reviewed, 1 new entry added (KI-012).
fix(hero): klemme ISO-Board-Track auf Container-Box statt nachgelagert clippen
All checks were successful
Build & Deploy / check (pull_request) Successful in 30s
Details
Build & Deploy / deploy (pull_request) Has been skipped
Details
57b2ffba0e 
PR #29 hatte `overflow-x: clip` auf `.iso-hero-wrap` gesetzt. Auf iPhone
liefen die Boards trotzdem rechts aus dem Bild — und durch die jetzt am
Wrap-Rand endenden Picker/Disclaimer-Note wirkte der Versatz visuell
schlimmer als vorher.

Root Cause: `.iso-variant-stack { grid-template-columns: 1fr }` resolved
zu `minmax(auto, 1fr)`; auto-Floor = Min-Content der Boards (~410px durch
fixe Spalten in iso-b-head, iso-c-scale, etc). Auf 350px Wrap-Breite
expandiert der Track auf 414px und das Board rendert 64px über die
Wrap-Box. `overflow-x: clip` clippt in Chromium nachweisbar (Hit-Test
verifiziert), aber iOS Safari ist hier unzuverlässig.

Fix: Track auf `minmax(0, 1fr)` klemmen — der Stack wird nie wider als
sein Container. Boards selbst bekommen `min-width: 0; overflow: hidden`,
damit interne Grids (iso-b's 128px-Label-Spalte) am Panel-Rand sauber
clippen. Damit ist der `overflow-x: clip` Workaround obsolet und entfällt.

Verifikation lokal über Playwright:
- Mobile 390: alle 5 Varianten board.right=370 = wrap.right (no bleed)
- Tablet 768: board=698, fits
- Desktop 1440: board=411, layout unverändert

KI-012 in KNOWN_ISSUES.md ergänzt.

Known-issues registry reviewed, 1 new entry added (KI-012).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
skr merged commit 0e745b83d2 into main 2026-05-09 16:34:42 +00:00
skr deleted branch fix/hero-iso-board-mobile-track 2026-05-09 16:34:42 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
nm/website!31
No description provided.