skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-11 21:57:14 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix mobile horizontal overflow on the Language section

Browse Source 
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>
This commit is contained in:
Paul Bakaus
2026-04-07 01:21:06 -07:00
co-authored by Claude Opus 4.6
parent 0d59981499
commit b54c46cac7
2 changed files with 45 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/main.css
+28 -5
View File
@@ -1249,6 +1249,16 @@ code {
gap: var(--spacing-lg);
}
/* Grid and flex items default to min-width: auto, which lets them expand to
fit their intrinsic content. The mobile commands layout has a split-compare
demo wide enough to blow out the entire section on mobile (~2400px wide).
Cascade min-width: 0 through every layer of the language section so the
intrinsic width can't propagate up the parent chain. */
.language-section,
.language-section * {
min-width: 0;
}
.language-content .section-lead {
margin-bottom: 0;
}
@@ -1646,6 +1656,16 @@ code {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
/* Without min-width: 0, the flex container expands to fit any intrinsically
wide descendant (the split-compare demo blows it out to ~2400px otherwise).
The same constraint cascades to direct children via the next rule. */
min-width: 0;
width: 100%;
}
.mobile-commands-layout > * {
min-width: 0;
max-width: 100%;
}
.commands-container {
@@ -2643,18 +2663,21 @@ code {
.detection-cmd {
flex-shrink: 0;
font-family: var(--font-mono);
font-family: var(--font-body);
font-size: 0.8125rem;
color: var(--color-charcoal);
font-weight: 600;
color: var(--color-ink);
background: oklch(96% 0.005 350);
padding: 6px 14px;
border-radius: 6px;
white-space: nowrap;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}
.detection-cmd::before {
content: '\279C ';
color: var(--color-accent);
a.detection-cmd:hover {
background: var(--color-accent);
color: white;
}
/* Antidote footer */
public/css/styles.css
+17 -5
View File
@@ -3598,6 +3598,9 @@ code {
display: grid;
gap: var(--spacing-lg);
}
.language-section, .language-section * {
min-width: 0;
}
.language-content .section-lead {
margin-bottom: 0;
}
@@ -3924,6 +3927,12 @@ code {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
min-width: 0;
width: 100%;
}
.mobile-commands-layout > * {
min-width: 0;
max-width: 100%;
}
.commands-container {
display: none;
@@ -4738,17 +4747,20 @@ code {
}
.detection-cmd {
flex-shrink: 0;
font-family: var(--font-mono);
font-family: var(--font-body);
font-size: 0.8125rem;
color: var(--color-charcoal);
font-weight: 600;
color: var(--color-ink);
background: oklch(96% 0.005 350);
padding: 6px 14px;
border-radius: 6px;
white-space: nowrap;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}
.detection-cmd::before {
content: '\279C ';
color: var(--color-accent);
a.detection-cmd:hover {
background: var(--color-accent);
color: white;
}
.antidote-footer {
text-align: center;