fix(site): stop /install code blocks widening the page on phones - #103
Merged
Conversation
At a 375px viewport the install page overflowed ~1100px horizontally (identical on production, pre-existing). CodeBlock already scrolls internally, but the grids holding it floored their tracks at min-content: grid items default to min-width auto, so an unbreakable shiki line widened .step-copy/.result-preview (activation steps) and .cli-alternative — a plain <details> grid item that passes its nested code block's min-content through — widened the second .source-route to 482px. Zero the min-width on the activation-step and source-route/resolver-proof grid items so wide commands scroll inside their own boxes, per the site's wide-content rule. Verified scrollWidth === clientWidth at 375px and 320px with every <details> expanded; all six code blocks scroll internally; packs page (the other CodeBlock consumer) unaffected. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Signed-off-by: John Siracusa <siracusa5@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The /install page overflows ~1100px horizontally at a 375px viewport — confirmed identical on production, so it predates the typography PR (#102). The shared CodeBlock component already scrolls internally; the bug is the classic grid min-content trap: grid items default to
min-width: auto, so unbreakable shiki lines widened the track instead of scrolling inside their box.Changes
min-width: 0to the activation-steps grid items (.step-copy,.step-proof,.result-preview) and to the.source-route/.resolver-proofgrid items. The second source route was the subtle one:.cli-alternativeis a plain<details>grid item that passes its nested code block's min-content through, flooring the stacked 1fr track at 482px even though the code block itself is a scroll container.Test Plan
document.documentElement.scrollWidth === clientWidthon /install at 375px and 320px, with every<details>expandedcd apps/site && npm run buildexits 0 (incl. install-page postbuild verifier)Notes
🤖 Generated with Claude Code