fix(site): stop horizontal overflow on mobile#105
Merged
Conversation
Grid items default to min-width:auto, so they refuse to shrink below their content's min-content width. The hero columns and the Install step cards each hold a CopyCommand whose command string is whitespace-nowrap; even though the button clips and its inner code scrolls, the grid item grew to the command's ~440px intrinsic width — overflowing the viewport (body scrollWidth 498 at 390px) and clipping the hero on the right. Add min-w-0 to those grid items so they shrink and let the inner code scroll instead. Verified no overflow at 320/390/414px. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
Problem
The marketing site scrolled horizontally on mobile — at a 390px viewport the page
scrollWidthwas 498px (108px of overflow), and the hero content was laid out wider than the screen and clipped on the right.Root cause
Grid items default to
min-width: auto, so they won't shrink below their content's min-content width. The hero columns and the Install step cards (<li>) each contain aCopyCommandwhose command string iswhitespace-nowrap. Even though the button clips (overflow-hidden) and the inner<code>scrolls (overflow-x-auto min-w-0), the grid item grew to the command's ~440px intrinsic width — overflowing the viewport (Install section → page scroll) and clipping the hero on the right.The decorative hero blurs are not the cause — the hero
<section>isoverflow-hiddenand clips them (rectR=390).Fix
Add
min-w-0to the three grid items (both hero columns + the Install<li>) so they can shrink to the container and let the inner code scroll instead of forcing width.Verification
scrollWidth === clientWidth, zero unclipped overflow elements.biome check,tsc --noEmit,next buildall pass.🤖 Generated with Claude Code