fix(blog): prevent pre code blocks from causing horizontal page overflow#326
Open
bartveneman wants to merge 7 commits into
Open
fix(blog): prevent pre code blocks from causing horizontal page overflow#326bartveneman wants to merge 7 commits into
bartveneman wants to merge 7 commits into
Conversation
With box-sizing: border-box, max-width: 100% capped the pre's border-box to the Container's *content* width while negative margins simultaneously shifted the pre 1rem left. This created an asymmetric bleed-out where the left side aligned with the container's outer edge but the right side fell 2rem short — causing browsers to miscalculate the scroll-container boundary and let wide white-space: pre content escape to the page level. Remove max-width: 100% so the block auto-width + negative margins naturally size the pre to the full container width (content + padding) at every breakpoint. Also add a 66rem+ rule to match the Container's larger padding (var(--space-8) = 2rem) at that breakpoint, and drop word-break: break-all which has no effect when white-space: pre is also set. https://claude.ai/code/session_0175L5MPE3R8HZeNKAQvsZ4u
✅ Deploy Preview for projectwallace ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
…e content The .content grid used an implicit auto column, which resolves grid items' minimum size to min-content. A pre block with white-space: pre and long code lines makes the Container's min-content ~48rem, so at narrow viewports (< 48rem) the grid item overflowed the track, causing page-level horizontal scroll. Changing to grid-template-columns: minmax(0, 1fr) caps the track minimum at 0, letting the available viewport width (not item min-content) determine the track size. The Container now correctly sizes to the viewport at small widths and to its 48rem max-width at larger widths, while the pre's overflow-x: auto handles wide code content internally. https://claude.ai/code/session_0175L5MPE3R8HZeNKAQvsZ4u
grid-template-columns: minmax(0, 1fr) sets the column minimum to 0 but grid items still have min-width: auto, which resolves to the item's min-content size (the longest code line in a <pre>). This makes the Container overflow the column and scroll the page. Explicitly setting min-width: 0 on the Container grid items breaks that propagation. https://claude.ai/code/session_0175L5MPE3R8HZeNKAQvsZ4u
Grid and flex items have min-width: auto by default, which resolves to the item's min-content size. When a Container holds a <pre> with white-space: pre, its min-content equals the longest code line — potentially much wider than the viewport — causing the container to overflow its grid column and scroll the page. min-width: 0 is safe in all non-grid/flex contexts (block elements ignore it) and prevents this propagation in any layout that uses Container as a grid or flex item. https://claude.ai/code/session_0175L5MPE3R8HZeNKAQvsZ4u
- Container: add width: 100% so grid/flex sizing is unambiguous. width: auto with margin-inline: auto in a grid context can let the browser size the item to max-content rather than the column width, defeating min-width: 0. - Panel: add min-width: 0 so it can shrink below its content size when used as a grid item (e.g. in CodeQuality layout). - CodeQuality .layout: add grid-template-columns: minmax(0, 1fr) so the single grid column is bounded by available space. - CodeQualityDetails: add max-width: 100% to inline <pre> elements so they cannot expand the page beyond the viewport. - Blog page .content: add overflow-x: clip as a catch-all so no child can cause page-level horizontal scroll regardless of how grid/flex sizing resolves. https://claude.ai/code/session_0175L5MPE3R8HZeNKAQvsZ4u
Fix root cause via grid-template-columns instead of symptom-suppressing overflow clipping. https://claude.ai/code/session_0175L5MPE3R8HZeNKAQvsZ4u
Fix the root cause of horizontal overflow: display:grid without explicit column tracks creates implicit auto columns sized to min-content, causing grid items with wide content (pre, code, tables) to expand beyond the viewport. Added grid-template-columns: minmax(0, 1fr) to 44 files across the codebase wherever display:grid was used without column tracks. The 1fr column shrinks to 0 instead of the default min-content, preventing content from forcing the grid wider than its container. https://claude.ai/code/session_0175L5MPE3R8HZeNKAQvsZ4u
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
2 participants
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
Blog post pages with
<pre>code blocks (e.g./blog/using-grid-lanes) had massive horizontal overflow — the page itself scrolled sideways instead of the code block scrolling within a contained area.Root cause
Three compounding issues in
Markdown.svelte:1.
max-width: 100%fought with the negative-margin bleed-out techniqueWith
box-sizing: border-box(set globally by the reset),max-width: 100%caps the pre's border-box to the Container's content width (e.g. 46rem at the 48rem max-width container). Butmargin-left/-right: -1remsimultaneously shifts the pre 1rem to the left.Result: the pre's left edge aligns with the container's outer-left edge (correct bleed), but the right edge falls 2 rem short of the outer-right edge — not the intended symmetry. Browsers miscalculate the scroll-container boundary in this configuration and allow
white-space: precontent to escape to the page level.Without
max-width: 100%, the block'swidth: autocalculation naturally producescontainer-content-width + |margins| = full container width, which is the correct and intended size.2. The 66rem+ breakpoint was missing
The Container's
padding-inlinegrows fromvar(--space-4)(1rem) at 44rem tovar(--space-8)(2rem) at 66rem, but the pre's negative margins stayed at-1remfor all wide viewports. At 66rem+ the margins only compensated half the padding, breaking the bleed-out effect.3.
word-break: break-allwas a no-opword-break: break-allprovides soft-wrap opportunities at character boundaries, butwhite-space: presuppresses all soft wrapping entirely. The two properties are mutually exclusive —word-breakhad zero effect and was just noise.Fix
max-width: 100%so the natural block auto-width + negative margins size the pre correctly at every breakpointcalc(-1 * var(--space-4))(= -1rem) at 44rem+ to match Container's paddingmin-width: 66remrule withcalc(-1 * var(--space-8))(= -2rem) to match Container's larger paddingword-break: break-alloverflow-x: autowas already correct and remains in place — once the pre is sized correctly, wide code lines scroll within the pre and the page no longer overflows.Generated by Claude Code