Fix horizontal scrolling on blog posts - #113
Merged
Merged
Conversation
Blog posts scrolled horizontally, most visibly on mobile. Sweeping all 25 pages at 320/375/768/1280px turned up four independent causes: - Code blocks: <pre> already had `overflow-x: auto` from the prose plugin, but the layout wrapper and <article> are flex items, which default to `min-width: auto` — i.e. refuse to shrink below their content's intrinsic width. The wide <pre> therefore widened the page instead of scrolling itself. `min-w-0` on both is what makes the existing overflow rule work. - Tables: no scroll container, so a wide table (e.g. the congestion control table in replacing-webrtc) pushed the page out. Now `display: block` + `overflow-x: auto`. Kept at `width: 100%` rather than the more common `width: max-content` so tables stay full-width on desktop as before. - Long inline tokens: unbreakable strings like the inline code `relay.cloudflare.mediaoverquic.com` overflowed their paragraph. Added `break-words`. - A hardcoded YouTube embed in first-cdn.mdx used `width="560"` with no responsive cap — the single largest overflow at 217px. Swapped the fixed width/height attributes for `max-width: 100%` plus `aspect-ratio: 16 / 9`. The table and iframe rules are scoped to `.markdown` so future posts are covered. `.markdown table` is deliberately (0,1,1) specificity so it beats the prose plugin's `.prose :where(table)` (0,1,0) regardless of layer order. Verified in-browser: zero overflow across all 25 pages x 4 viewport widths; table columns stay aligned under `display: block` and remain 832px wide on desktop; the YouTube embed still renders 560x315 on desktop and 311x175 on mobile with 16:9 preserved. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Sorry @kixelated, you have reached your weekly rate limit of 500000 diff characters.
Please try again later or upgrade to continue using Sourcery
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
WalkthroughUpdated the global layout to add 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches✨ Simplify code
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
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.
Blog posts scrolled horizontally, most visibly on mobile.
Code blocks were the suspected cause, and they were part of it — but sweeping all 25 pages at 320/375/768/1280px turned up four independent causes.
What changed
Code blocks —
<pre>already hadoverflow-x: autofrom the prose plugin, so the interesting question was why it wasn't working. The layout wrapper and<article>are flex items, which default tomin-width: auto: refuse to shrink below the content's intrinsic width. The wide<pre>therefore widened the whole page instead of scrolling itself. Addingmin-w-0to both inglobal.astrois what actually makes the existing overflow rule take effect.Tables — no scroll container, so a wide table (the congestion-control table in
replacing-webrtc) pushed the page out. Nowdisplay: block+overflow-x: auto.Long inline tokens — unbreakable strings like the inline code
relay.cloudflare.mediaoverquic.comoverflowed their paragraph. Addedbreak-words.A hardcoded YouTube embed —
first-cdn.mdxused<iframe width="560">with no responsive cap. This was the single largest overflow (217px) and was invisible to the code-block theory. Replaced the fixedwidth/heightattributes withmax-width: 100%plusaspect-ratio: 16 / 9.Notes for review
width: 100%, notwidth: max-content. My first attempt used the common GitHub-stylemax-content, which scrolls correctly but shrank desktop tables from 864px to 429px.width: 100%scrolls on mobile and preserves the existing full-width desktop appearance..markdown tableis deliberately(0,1,1)specificity so it beats the prose plugin's.prose :where(table)(0,1,0)regardless of how the layers end up ordered..markdown, so future posts are covered automatically.Verification
Measured in-browser rather than eyeballed:
scrollWidth - clientWidth) across all 25 pages × 4 viewport widths, ignoring elements legitimately clipped by a scroll ancestor.display: blockand tables remain 832px wide; the YouTube embed still renders 560×315 on desktop and 311×175 on mobile, 16:9 preserved at both.bunx biome checkandbun run buildpass. (Biome reports one pre-existing config-migration info, unrelated to this change.)bunx astro checkwas skipped — it wanted to install@astrojs/check, and I didn't want to add a dependency uninvited.(written by Opus 5)