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

fix(hero): clean unified mobile design for the 5 ISO boards #33

Merged
skr merged 2 commits from fix/iso-board-mobile-design into main 2026-05-09 18:49:05 +00:00
Conversation 0 Commits 2 Files changed 2 +268 -7
skr commented 2026-05-09 18:48:09 +00:00
Owner
Copy link

Problem

PR #32 hat die Inner-Grid-Alignment-Bugs gefixt — aber dabei overflow-wrap: anywhere auf alle Long-Text-Spalten gesetzt. Auf Mobile <=390px kollabiert dadurch jede Long-Text-Spalte zu einem Buchstabenturm: Lieferantensicherheit wird zu 21 untereinander stehenden Einzelzeichen. Boards 5-10x zu hoch, Daten unleserlich.

Root Cause

CSS Text 3 §6.2: overflow-wrap: anywhere partizipiert in der Min-Content-Berechnung — der Browser betrachtet jede Zeichenposition als gueltigen Umbruch, was die min-content-Breite des Items auf 1 Zeichen reduziert. Kombiniert mit min-width: 0 und minmax(0, 1fr) kollabiert die Spalte komplett. break-word macht das nicht — es bricht nur Woerter, wenn sie sonst die Zeile sprengen wuerden, und partizipiert nicht in Min-Content.

Fix (alle in src/app/globals.css)

  1. overflow-wrap: anywhere -> overflow-wrap: break-word auf den 5 Long-Text-Spalten (.iso-a-theme .name, .iso-b-row .rh, .iso-c-scale .lbl, .iso-d2-row .tl, .iso-e-table .row > :first-child).
  2. hyphens: auto ergaenzt + auf .iso-b-head > span. Browser nutzt DE-Hyphenation (lang=de via next-intl) und bricht z.B. Liefer-anten-sicher-heit. Auf Desktop No-Op.
  3. Neuer @media (max-width: 480px) Block: einheitliche Compaction fuer alle 5 Boards (Padding 14px, fixe Spalten 10-30% schmaler, Schriften 1-3px kleiner, .iso-variant-picker .n versteckt).

Verifikation Playwright

  • 320px (iPhone SE): alle 5 Boards komplett im Container, deutsche Komposita brechen an Hyphenation-Stellen statt Per-Zeichen.
  • 375px (iPhone 13/14): klar lesbar, Header in Variant B umbrechen zweizeilig statt sich zu ueberschreiben.
  • 768px / 1440px: identisch zu vorher (Mobile-@media greift nicht).

Vor/Nach Variant E @ 320px:

  • Vorher: Liefe/ran/tens/iche/r/heit ... — 12+ Zeilen pro Row, je 4-6 Zeichen.
  • Nachher: Liefe-/ran-/tensi-/cher-/heit · Nachweis veraltet — 5 Zeilen an DE-Hyphenation.

Test plan

  • npm run check (drift + format + lint + typecheck + test + build) gruen
  • Visual sweep 320 / 375 / 768 / 1440 ueber alle 5 Boards
  • Nach Deploy: Smoke auf https://neomint.com/ Mobile (echtes Geraet)

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

## Problem PR #32 hat die Inner-Grid-Alignment-Bugs gefixt — aber dabei `overflow-wrap: anywhere` auf alle Long-Text-Spalten gesetzt. Auf Mobile <=390px kollabiert dadurch jede Long-Text-Spalte zu einem Buchstabenturm: `Lieferantensicherheit` wird zu 21 untereinander stehenden Einzelzeichen. Boards 5-10x zu hoch, Daten unleserlich. ## Root Cause CSS Text 3 §6.2: `overflow-wrap: anywhere` partizipiert in der Min-Content-Berechnung — der Browser betrachtet jede Zeichenposition als gueltigen Umbruch, was die min-content-Breite des Items auf 1 Zeichen reduziert. Kombiniert mit `min-width: 0` und `minmax(0, 1fr)` kollabiert die Spalte komplett. `break-word` macht das nicht — es bricht nur Woerter, wenn sie sonst die Zeile sprengen wuerden, und partizipiert nicht in Min-Content. ## Fix (alle in src/app/globals.css) 1. `overflow-wrap: anywhere` -> `overflow-wrap: break-word` auf den 5 Long-Text-Spalten (`.iso-a-theme .name`, `.iso-b-row .rh`, `.iso-c-scale .lbl`, `.iso-d2-row .tl`, `.iso-e-table .row > :first-child`). 2. `hyphens: auto` ergaenzt + auf `.iso-b-head > span`. Browser nutzt DE-Hyphenation (`lang=de` via next-intl) und bricht z.B. `Liefer-anten-sicher-heit`. Auf Desktop No-Op. 3. Neuer `@media (max-width: 480px)` Block: einheitliche Compaction fuer alle 5 Boards (Padding 14px, fixe Spalten 10-30% schmaler, Schriften 1-3px kleiner, `.iso-variant-picker .n` versteckt). ## Verifikation Playwright - 320px (iPhone SE): alle 5 Boards komplett im Container, deutsche Komposita brechen an Hyphenation-Stellen statt Per-Zeichen. - 375px (iPhone 13/14): klar lesbar, Header in Variant B umbrechen zweizeilig statt sich zu ueberschreiben. - 768px / 1440px: identisch zu vorher (Mobile-@media greift nicht). Vor/Nach Variant E @ 320px: - Vorher: `Liefe/ran/tens/iche/r/heit ...` — 12+ Zeilen pro Row, je 4-6 Zeichen. - Nachher: `Liefe-/ran-/tensi-/cher-/heit · Nachweis veraltet` — 5 Zeilen an DE-Hyphenation. ## Test plan - [x] `npm run check` (drift + format + lint + typecheck + test + build) gruen - [x] Visual sweep 320 / 375 / 768 / 1440 ueber alle 5 Boards - [ ] Nach Deploy: Smoke auf https://neomint.com/ Mobile (echtes Geraet) Known-issues registry reviewed, 1 new entry added (KI-014).
PR #32 hat alignment-fixes auf den Inner-Grids gelandet, aber die
hinzugefuegte `overflow-wrap: anywhere` Regel war zu aggressiv: bei
schmalen mobile-Viewports (z.B. 375px wrap = 335px content) brach der
Browser jedes einzelne Zeichen auf eine eigene Zeile, weil er fuer die
Min-Content-Berechnung jede Zeichen-Position als gueltigen Umbruch
betrachtet. Resultat: vertikal aufgereihte Buchstabentuerme, Boards 5x
zu hoch, alle Daten unleserlich.

Der Auftrag ist `einheitliches Design` ueber alle 5 Boards in jeder
Aufloesung. Dafuer drei separate Aenderungen.

1) `anywhere` -> `break-word`. `break-word` bricht nur, wenn ein Wort
   sonst die Zeile sprengt - und faellt dabei NICHT auf
   Per-Zeichen-Umbruch zurueck, solange normale Trennstellen existieren.
   Pro-Element angewandt auf .iso-a-theme .name, .iso-b-row .rh,
   .iso-c-scale .lbl, .iso-d2-row .tl, .iso-e-table .row > :first-child.

2) `hyphens: auto`. Auf den gleichen Long-Text-Spalten plus
   .iso-b-head > span. Wenn break-word zwingend brechen muss, nimmt der
   Browser nun die DE-Hyphenation-Bibliothek (lang=de via next-intl) und
   bricht an `Liefer-anten-sicher-heit` Trennstellen, statt mitten im
   Wort. Auf desktop ein No-Op, weil dort gar nicht gebrochen wird.

3) Neuer @media (max-width: 480px) Block, der die fuenf Boards
   einheitlich auf das schmalere Container-Maß skaliert: alle Paddings
   14px, fixe Spalten 10-30% schmaler, Schriften 1-3px kleiner,
   .iso-variant-picker .n versteckt (mehr Platz fuer Label-Text). Eine
   Stelle Quelle der Wahrheit fuer das Mobile-Schema, statt 5x
   Detail-Tweaks zu verteilen.

Verifikation Playwright auf 320 / 375 / 768 / 1440px:
- 320 (iPhone SE worst case): alle 5 Boards komplett im Container,
  deutsche Komposita brechen an Hyphenation-Stellen (z.B.
  `Liefe-/ran-/tensi-/cher-/heit`) statt Per-Zeichen.
- 375 (iPhone 13/14): klar lesbar, Header in Variant B umbrechen
  zweizeilig statt sich gegenseitig zu ueberschreiben.
- 768 (iPad portrait) und 1440 (Desktop): identisch zu vorher.

KI-014 in KNOWN_ISSUES ergaenzt (folgt im naechsten Commit).

Known-issues registry reviewed, will append KI-014 in follow-up.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
docs: KI-014 — overflow-wrap:anywhere kollabiert Spalten zu Zeichen-Stacks
All checks were successful
Build & Deploy / check (pull_request) Successful in 31s
Details
Build & Deploy / deploy (pull_request) Has been skipped
Details
bd0c72049d 
Begleitet den Fix in 687970d. Erklaert, warum `anywhere` nicht der
gleiche Werkzeug ist wie `break-word` (anywhere participiert in
min-content sizing, break-word nicht).

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

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
skr merged commit 630f84e3da into main 2026-05-09 18:49:05 +00:00
skr deleted branch fix/iso-board-mobile-design 2026-05-09 18:49:05 +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!33
No description provided.