mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 14:16:28 +03:00
Paul BakausandClaude Opus 4.6
b54c46cac7
The .mobile-commands-layout was rendering at ~2400px wide on mobile,
blowing out the entire .language-section to 2457px and causing the
section-lead text, the periodic table area, and everything else to
overflow the viewport horizontally.
Root cause: grid and flex items default to min-width: auto, which
lets them expand to fit any intrinsically wide descendant. The mobile
commands layout contains a .split-container (the demo split-compare
component) whose intrinsic content is ~2400px wide. That width
propagated up the parent chain — through .mobile-commands-layout
→ .commands-gallery → .commands-subsection → .language-content grid
track — and stretched the entire section.
Fix: cascade min-width: 0 through every descendant of the section so
the constraint stops the propagation at every layer.
.language-section,
.language-section * {
min-width: 0;
}
Verified at 390×844 (mobile): bodyScroll matches viewport, zero
overflowing elements, the line-length detector finding on
.mobile-cmd-desc is gone. Verified at 1280×800 (desktop): periodic
table and magazine layout still render at full content width with
no regression.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>