fix(hero): inner-grid alignment on the 5 ISO boards (mobile) #32

Merged

skr merged 3 commits from fix/iso-board-inner-grid-mobile into main 2026-05-09 17:58:02 +00:00

Conversation 0 Commits 3 Files changed 2 +49 -4

skr commented 2026-05-09 17:49:31 +00:00

Owner

Copy link

Problem

PR #30 (commit 57b2ffb) hat den ISO-Board-Stack mobil korrekt auf die Wrap-Breite geklemmt — aber damit fielen die schon laenger driftenden Inner-Grids auf, weil sie in der schmaleren Box weniger Slack haben. Konkret in den 5 Boards:

• Abbildung 5 (Variant E): Header-Spalten "Schweregrad" / "Status" lagen nicht ueber den Daten-Tags darunter.
• Abbildung 4 (Variant D2): rechte Gate-Spalte wurde auf schmalen Viewports beschnitten.
• Abbildung 2 (Variant B): Header-Text linksbuendig waehrend Daten-Cells zentriert.
• Abbildungen 1 + 3 (Variant A, C): rechte Kante (count, score) klebte am Panel-Rand.

Root Cause

Zwei sich ueberlagernde Effekte:

1. KI-008-Auspraegung: .iso-e-table .row nutzte 1fr auto auto 72px. auto-Tracks bemessen sich pro Zeile nach eigenem Inhalt — Sibling-Rows teilen keine Spalten.
2. KI-012-Mechanik im Inner-Grid: mehrere Zeilen-Layouts nutzen 1fr als Text-Track. 1fr resolved zu minmax(auto, 1fr), der Auto-Floor expandiert auf das laengste unbrechbare Wort. Lange deutsche Labels (Geltungsbereich, Risikomethodik, Schwachstellenmgmt.) sprengen die ~92px, die nach den fixen Spalten uebrig sind. Mit overflow: hidden aus PR #30 wird die rechte Spalte beschnitten.

Zusaetzlich hatte der Port die Prototyp-Korrektur fuer .iso-b-head > span { text-align: center } bei einem frueheren Sweep verloren.

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

Board	Aenderung
Variant E	Track 1fr auto auto 72px -> minmax(0, 1fr) 64px 72px 72px; text-align: center; justify-self: center auf Spalten 2-3; min-width: 0; overflow-wrap: anywhere auf Spalte 1
Variant D2	Track 32px 1fr 68px 72px -> 32px minmax(0, 1fr) 68px 72px; min-width: 0; overflow-wrap: anywhere auf .tl + .tl small
Variant B	.iso-b-head > span { text-align: center } wiederhergestellt; :first-child { text-align: left } bleibt linksbuendig
Variant C	.iso-c-scale und .iso-c-scale-head -> 160px minmax(0, 1fr) 46px; min-width: 0; overflow-wrap: anywhere auf .lbl + .lbl small
Variant A	.iso-a-theme .name bekommt min-width: 0; overflow-wrap: anywhere. Track 1fr auto bleibt absichtlich (chat9.md:355-357)

.d-services-index .s-row (Zeile 739, gleiche KI-008-Klasse, aber ausserhalb der Hero-Boards) bewusst nicht mitgefixt — separater Scope.

Verifikation

• npm run check (drift + format + lint + typecheck + test + build) — alles gruen.
• Browser-Smoke-Test (Wrap 411px Default und Stresstest 320px iPhone-SE) ueber alle 5 Boards:

Board	Assert	411px	320px
A	counts im Panel	OK	OK
B	Header-Drift ueber 4 Daten-Cells (px)	0/0/0/0	0/0/0/0
C	scores im Panel	OK	OK
D	gates im Panel, Rechte-Kanten-Spread (px)	0	0
E	Col-2/3-Drift ueber 4 Daten-Rows (px)	<=0.01	<=0.01

Sub-Pixel <= 0.01 ist Browser-Rundung. Desktop (1280+) unveraendert — minmax(0, 1fr) ist auf breiten Panels mit 1fr aequivalent, overflow-wrap: anywhere greift nur wenn Worte brechen muessten.

Test plan

• npm run check:drift clean
• npm run lint + npm run typecheck + npm run test + npm run build gruen
• Smoke-Test 411px-Wrap (Default-Layout): alle 5 Boards alignment-frei
• Stresstest 320px-Wrap (iPhone SE Worst Case): alle 5 Boards alignment-frei
• Desktop-Regression manuell — kein Layout-Shift auf >=1280px
• Nach Deploy: Smoke auf https://neomint.com/ Mobile (390/iPhone, 412/Android Pixel)

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

## Problem PR #30 (commit 57b2ffb) hat den ISO-Board-Stack mobil korrekt auf die Wrap-Breite geklemmt — aber damit fielen die schon laenger driftenden Inner-Grids auf, weil sie in der schmaleren Box weniger Slack haben. Konkret in den 5 Boards: - **Abbildung 5 (Variant E):** Header-Spalten "Schweregrad" / "Status" lagen nicht ueber den Daten-Tags darunter. - **Abbildung 4 (Variant D2):** rechte Gate-Spalte wurde auf schmalen Viewports beschnitten. - **Abbildung 2 (Variant B):** Header-Text linksbuendig waehrend Daten-Cells zentriert. - **Abbildungen 1 + 3 (Variant A, C):** rechte Kante (count, score) klebte am Panel-Rand. ## Root Cause Zwei sich ueberlagernde Effekte: 1. **KI-008-Auspraegung:** `.iso-e-table .row` nutzte `1fr auto auto 72px`. `auto`-Tracks bemessen sich pro Zeile nach eigenem Inhalt — Sibling-Rows teilen keine Spalten. 2. **KI-012-Mechanik im Inner-Grid:** mehrere Zeilen-Layouts nutzen `1fr` als Text-Track. `1fr` resolved zu `minmax(auto, 1fr)`, der Auto-Floor expandiert auf das laengste unbrechbare Wort. Lange deutsche Labels (*Geltungsbereich*, *Risikomethodik*, *Schwachstellenmgmt.*) sprengen die ~92px, die nach den fixen Spalten uebrig sind. Mit `overflow: hidden` aus PR #30 wird die rechte Spalte beschnitten. Zusaetzlich hatte der Port die Prototyp-Korrektur fuer `.iso-b-head > span { text-align: center }` bei einem frueheren Sweep verloren. ## Fix (alle in `src/app/globals.css`) | Board | Aenderung | |---|---| | Variant E | Track `1fr auto auto 72px` -> `minmax(0, 1fr) 64px 72px 72px`; `text-align: center; justify-self: center` auf Spalten 2-3; `min-width: 0; overflow-wrap: anywhere` auf Spalte 1 | | Variant D2 | Track `32px 1fr 68px 72px` -> `32px minmax(0, 1fr) 68px 72px`; `min-width: 0; overflow-wrap: anywhere` auf `.tl` + `.tl small` | | Variant B | `.iso-b-head > span { text-align: center }` wiederhergestellt; `:first-child { text-align: left }` bleibt linksbuendig | | Variant C | `.iso-c-scale` und `.iso-c-scale-head` -> `160px minmax(0, 1fr) 46px`; `min-width: 0; overflow-wrap: anywhere` auf `.lbl` + `.lbl small` | | Variant A | `.iso-a-theme .name` bekommt `min-width: 0; overflow-wrap: anywhere`. Track `1fr auto` bleibt absichtlich (chat9.md:355-357) | `.d-services-index .s-row` (Zeile 739, gleiche KI-008-Klasse, aber ausserhalb der Hero-Boards) bewusst nicht mitgefixt — separater Scope. ## Verifikation - `npm run check` (drift + format + lint + typecheck + test + build) — alles gruen. - Browser-Smoke-Test (Wrap 411px Default und Stresstest 320px iPhone-SE) ueber alle 5 Boards: | Board | Assert | 411px | 320px | |---|---|---|---| | A | counts im Panel | OK | OK | | B | Header-Drift ueber 4 Daten-Cells (px) | 0/0/0/0 | 0/0/0/0 | | C | scores im Panel | OK | OK | | D | gates im Panel, Rechte-Kanten-Spread (px) | 0 | 0 | | E | Col-2/3-Drift ueber 4 Daten-Rows (px) | <=0.01 | <=0.01 | Sub-Pixel <= 0.01 ist Browser-Rundung. Desktop (1280+) unveraendert — `minmax(0, 1fr)` ist auf breiten Panels mit `1fr` aequivalent, `overflow-wrap: anywhere` greift nur wenn Worte brechen muessten. ## Test plan - [x] `npm run check:drift` clean - [x] `npm run lint` + `npm run typecheck` + `npm run test` + `npm run build` gruen - [x] Smoke-Test 411px-Wrap (Default-Layout): alle 5 Boards alignment-frei - [x] Stresstest 320px-Wrap (iPhone SE Worst Case): alle 5 Boards alignment-frei - [x] Desktop-Regression manuell — kein Layout-Shift auf >=1280px - [ ] Nach Deploy: Smoke auf https://neomint.com/ Mobile (390/iPhone, 412/Android Pixel) Known-issues registry reviewed, 1 new entry added (KI-013).

skr added 2 commits 2026-05-09 17:49:31 +00:00

fix(hero): klemme ISO-Board-Track auf Container-Box statt nachgelagert clippen ... 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>

fix(hero): inner-grid alignment on the 5 ISO boards (mobile) ... 6112df232f

Nach PR #30 (commit 57b2ffb) waren die Panels endlich auf die Wrap-
Breite geklemmt — aber damit fielen die schon laenger driftenden
Inner-Grids auf, weil sie weniger Slack hatten.

Zwei Effekte traten dabei kombiniert zutage:

1. KI-008-Auspraegung: `.iso-e-table .row` nutzte `1fr auto auto 72px`.
   `auto` bemisst Tracks pro Zeile nach eigenem Inhalt; Header-Spalten
   "Schweregrad"/"Status" lagen darum nicht ueber den Daten-Tags. Das
   ist Abbildung 5 (Variant E).

2. KI-012-Mechanik eine Ebene tiefer: mehrere Zeilen-Layouts nutzen
   `1fr` als Text-Track. `1fr` resolved zu `minmax(auto, 1fr)` und
   floort am laengsten unbrechbaren Wort des Items. Wo lange deutsche
   Labels stehen (Geltungsbereich, Risikomethodik, Schwachstellenmgmt.),
   expandiert der Track ueber die Panel-Box hinaus und wird durch das
   `overflow: hidden` aus PR #30 rechts beschnitten. Sichtbar v.a. in
   Abbildung 4 (Variant D2 — Gate-Spalte verschwindet).

Zusaetzlich hatte der Port die Prototyp-Korrektur fuer
`.iso-b-head > span { text-align: center }` bei einem frueheren Sweep
verloren, was Abbildung 2 (Variant B) Header links der zentrierten
Daten-Cells stehen liess.

Fixes (alle in src/app/globals.css):

- Variant E: `.iso-e-table .row` -> `minmax(0, 1fr) 64px 72px 72px`,
  plus `text-align: center; justify-self: center` auf Spalten 2-3 und
  `min-width: 0; overflow-wrap: anywhere` auf Spalte 1. Das matcht den
  Prototyp (Website.html:1034, 1047-1048).
- Variant D2: `.iso-d2-row` -> `32px minmax(0, 1fr) 68px 72px`, plus
  `min-width: 0; overflow-wrap: anywhere` auf `.tl` + `.tl small`.
- Variant B: `.iso-b-head > span` bekommt `text-align: center`,
  Override `:first-child { text-align: left }` (Prototyp:838-839).
- Variant C: `.iso-c-scale` und `.iso-c-scale-head` bekommen
  `minmax(0, 1fr)`, plus `min-width: 0; overflow-wrap: anywhere` auf
  `.lbl` + `.lbl small`.
- Variant A: `.iso-a-theme .name` bekommt `min-width: 0;
  overflow-wrap: anywhere`. Track `1fr auto` bleibt absichtlich
  (chat9.md:355-357).

Verifikation Playwright (Wrap 320px, Worst-Case iPhone-SE):
- A: alle counts vollstaendig im Panel
- B: Header-Drift ueber allen 4 Daten-Cells = 0px
- C: alle scores im Panel
- D: alle gates im Panel, rechte-Kanten-Spread = 0px
- E: col2/col3-Drift <= 0.01px (Sub-Pixel-Rundung), letzte Spalte im Panel

Desktop (1280+) unveraendert: `minmax(0, 1fr)` ist auf breiten Panels
mit `1fr` aequivalent, `overflow-wrap: anywhere` greift nur, wenn
Woerter brechen muessten.

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

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

skr changed title from fix(hero): ISO-Board-Track auf Container-Box klemmen statt clippen to fix(hero): inner-grid alignment on the 5 ISO boards (mobile) 2026-05-09 17:50:51 +00:00

skr added 1 commit 2026-05-09 17:53:09 +00:00

Merge remote-tracking branch 'origin/main' into fix/iso-board-inner-grid-mobile ... ce933cacce

# Conflicts:
#	docs/KNOWN_ISSUES.md

skr merged commit 26e15f2574 into main 2026-05-09 17:58:02 +00:00

skr deleted branch fix/iso-board-inner-grid-mobile 2026-05-09 17:58:02 +00:00

skr referenced this pull request from a commit 2026-05-09 17:58:04 +00:00

Merge pull request 'fix(hero): inner-grid alignment on the 5 ISO boards (mobile)' (#32) from fix/iso-board-inner-grid-mobile into main

skr referenced this pull request from a commit 2026-05-09 18:40:44 +00:00

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

skr referenced this pull request 2026-05-09 18:48:09 +00:00

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

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

Subscribe

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!32

No description provided.