fix(hero): Mobile-Overflow im Beispiele-Board chirurgisch clippen #29

Merged

skr merged 1 commit from fix/iso-hero-wrap-mobile-clip into main 2026-05-09 14:46:34 +00:00

Conversation 0 Commits 1 Files changed 1 +10

skr commented 2026-05-09 14:45:28 +00:00

Owner

Copy link

Befund

Auf Mobile-Viewports (375x812 getestet, ebenso 360x640) ragt das aktive Variant-Board des ISO-Artefakt-Bereichs ~125px rechts aus dem .iso-hero-wrap heraus. Visuell entsteht der Eindruck, dass Title und Board-Rand oben rechts aus dem Bild laufen.

Messung an https://neomint.com/de/ (Live, vor Fix):

Element	width	right	Ueberlauf vs wrap.right=306.67
.iso-hero-wrap	286.67	306.67	(Container)
.iso-variant-picker	286.67	306.67	0 (passt)
.d-board.iso-board.is-active	412.36	432.36	+125.70 px
.title (Annex A...)	175	395.70	+89.03 px

document.documentElement.scrollWidth = 327 < viewport 342 -> kein Document-Scroll-Overflow. Das overflow:hidden des .d-hero clippt 20px hinter dem Wrap, deshalb wird der Inhalt visuell beschnitten dargestellt.

Root Cause

.iso-variant-stack ist ein CSS-Grid (grid-template-columns: 1fr). Seine Grid-Items (.iso-variant) haben Default min-width: auto und schrumpfen nicht unter ihre min-content-Breite. Inner-Layouts der 5 Variant-Panels (KPIs iso-a-kpis, Tabellen iso-b-head, Charts iso-c-trend-bars etc.) erzwingen ~410 px min-content. Auf 375-px-Viewport ist .iso-hero-wrap aber nur 286 px breit -> Board ragt 125 px ueber.

Fix (4 Zeilen, 1 Block)

src/app/globals.css direkt vor .iso-artefact-head:

.iso-hero-wrap {
  overflow-x: clip;
}

overflow-x: clip (statt hidden) erzeugt keinen Scroll-Container, keinen BFC, keinen Stacking-Context — wirkt rein als Clip-Boundary. Browserkompat: Chrome 90+, Firefox 81+, Safari 16+.

Warum nicht andere Optionen

Option	Verworfen weil
overflow-x: auto auf .iso-variant-stack	Page-Swipe-Geste auf Mobile interferiert mit Horizontal-Scroll
min-width: 0 auf .iso-variant	Inner-KPIs haben selbst min-width: auto, Overflow verschiebt sich nur
Mobile-Re-Layout der KPIs/Tabellen	Kein chirurgischer Fix sondern Mobile-Redesign
overflow: hidden (statt clip)	Erzeugt BFC, hier kein Mehrwert ggue. clip

Verifikation nach Deploy

const wrap = document.querySelector('.iso-hero-wrap');
const board = document.querySelector('.iso-variant.is-active');
({
  wrapRight: wrap.getBoundingClientRect().right,
  boardRight: board.getBoundingClientRect().right,
  overflowX: getComputedStyle(wrap).overflowX,
});
// erwartet: overflowX === 'clip', visueller Clip am wrap.right

Desktop >=1024px: kein Effekt (Board passt sowieso). Tab-Wechsel 01-05 zeigt jeweils Variant A/B/C/D/E mit gleichem Clip-Verhalten.

## Befund Auf Mobile-Viewports (375x812 getestet, ebenso 360x640) ragt das aktive Variant-Board des ISO-Artefakt-Bereichs ~125px rechts aus dem `.iso-hero-wrap` heraus. Visuell entsteht der Eindruck, dass `Title` und Board-Rand oben rechts aus dem Bild laufen. Messung an `https://neomint.com/de/` (Live, vor Fix): | Element | width | right | Ueberlauf vs wrap.right=306.67 | |---|---|---|---| | `.iso-hero-wrap` | 286.67 | 306.67 | (Container) | | `.iso-variant-picker` | 286.67 | 306.67 | 0 (passt) | | `.d-board.iso-board.is-active` | 412.36 | 432.36 | **+125.70 px** | | `.title` (`Annex A...`) | 175 | 395.70 | +89.03 px | `document.documentElement.scrollWidth = 327` < `viewport 342` -> kein Document-Scroll-Overflow. Das `overflow:hidden` des `.d-hero` clippt 20px hinter dem Wrap, deshalb wird der Inhalt visuell beschnitten dargestellt. ## Root Cause `.iso-variant-stack` ist ein CSS-Grid (`grid-template-columns: 1fr`). Seine Grid-Items (`.iso-variant`) haben Default `min-width: auto` und schrumpfen nicht unter ihre `min-content`-Breite. Inner-Layouts der 5 Variant-Panels (KPIs `iso-a-kpis`, Tabellen `iso-b-head`, Charts `iso-c-trend-bars` etc.) erzwingen ~410 px min-content. Auf 375-px-Viewport ist `.iso-hero-wrap` aber nur 286 px breit -> Board ragt 125 px ueber. ## Fix (4 Zeilen, 1 Block) `src/app/globals.css` direkt vor `.iso-artefact-head`: ```css .iso-hero-wrap { overflow-x: clip; } ``` `overflow-x: clip` (statt `hidden`) erzeugt keinen Scroll-Container, keinen BFC, keinen Stacking-Context — wirkt rein als Clip-Boundary. Browserkompat: Chrome 90+, Firefox 81+, Safari 16+. ## Warum nicht andere Optionen | Option | Verworfen weil | |---|---| | `overflow-x: auto` auf `.iso-variant-stack` | Page-Swipe-Geste auf Mobile interferiert mit Horizontal-Scroll | | `min-width: 0` auf `.iso-variant` | Inner-KPIs haben selbst `min-width: auto`, Overflow verschiebt sich nur | | Mobile-Re-Layout der KPIs/Tabellen | Kein chirurgischer Fix sondern Mobile-Redesign | | `overflow: hidden` (statt `clip`) | Erzeugt BFC, hier kein Mehrwert ggue. `clip` | ## Verifikation nach Deploy ```js const wrap = document.querySelector('.iso-hero-wrap'); const board = document.querySelector('.iso-variant.is-active'); ({ wrapRight: wrap.getBoundingClientRect().right, boardRight: board.getBoundingClientRect().right, overflowX: getComputedStyle(wrap).overflowX, }); // erwartet: overflowX === 'clip', visueller Clip am wrap.right ``` Desktop >=1024px: kein Effekt (Board passt sowieso). Tab-Wechsel 01-05 zeigt jeweils Variant A/B/C/D/E mit gleichem Clip-Verhalten.

skr added 1 commit 2026-05-09 14:45:28 +00:00

fix(hero): Mobile-Overflow im Beispiele-Board chirurgisch clippen ... 8c38b54c5e

Im Mobile-View (<~410px Wrap-Breite) ragt das aktive ISO-Artefakt-Board
~125px rechts aus dem .iso-hero-wrap, weil die inneren KPI-/Tabellen-/
Chart-Layouts der 5 Varianten eine min-content-Breite von ~410px haben
und als Grid-Items des .iso-variant-stack nicht shrinken.

Visuell entsteht der Eindruck, dass der Title und der rechte Board-Rand
oben rechts aus dem Bild laufen, weil .d-hero { overflow: hidden } nur
20px hinter dem .iso-hero-wrap clippt.

Fix: overflow-x: clip auf .iso-hero-wrap. Pinnt die Clip-Kante an den
Wrap-Boundary; Tab-Picker und rechtsbündiger Disclaimer fluchten dann
mit dem Board-Rand. Kein BFC, kein Scroll-Container — Sticky-/Z-Index-
Verhalten bleibt unveraendert.

Desktop ohne Effekt (kein Overflow). Browserkompat: Chrome 90+, Firefox
81+, Safari 16+.

Verifikationsmessung an https://neomint.com/de/ (375x812):
- wrap.right = 306.67, board.right = 432.36, overshoot 125.70px
- nach Fix: visuell geclippt am wrap.right

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

skr merged commit 2e0cbfbd6f into main 2026-05-09 14:46:34 +00:00

skr deleted branch fix/iso-hero-wrap-mobile-clip 2026-05-09 14:46:34 +00:00

skr referenced this pull request from a commit 2026-05-09 14:46:34 +00:00

fix(hero): Mobile-Overflow im Beispiele-Board chirurgisch clippen (#29)

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

fix(hero): klemme ISO-Board-Track auf Container-Box statt nachgelagert clippen

skr referenced this pull request 2026-05-09 16:00:31 +00:00

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

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

No description provided.