From f34b7c56a4ebf0cca4372b79d4bd7e26b6f2fc03 Mon Sep 17 00:00:00 2001 From: Luke Curley Date: Thu, 30 Jul 2026 10:57:06 -0700 Subject: [PATCH] Fix horizontal scrolling on blog posts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Blog posts scrolled horizontally, most visibly on mobile. Sweeping all 25 pages at 320/375/768/1280px turned up four independent causes: - Code blocks: 
 already had `overflow-x: auto` from the prose plugin,
  but the layout wrapper and 
 are flex items, which default to
  `min-width: auto` — i.e. refuse to shrink below their content's intrinsic
  width. The wide 
 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 
---
 src/layouts/global.astro     |  4 ++--
 src/layouts/global.css       | 19 +++++++++++++++++++
 src/pages/blog/first-cdn.mdx |  2 +-
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/layouts/global.astro b/src/layouts/global.astro
index d0a47f5..105550d 100644
--- a/src/layouts/global.astro
+++ b/src/layouts/global.astro
@@ -66,7 +66,7 @@ const proUrl = import.meta.env.MODE === "staging" ? "https://moq.wtf" : "https:/
 		
 	
 	
-		

+		

 			
-			

+			

 				{
 					frontmatter?.date && (
 						

diff --git a/src/layouts/global.css b/src/layouts/global.css
index 00ac416..b84d558 100644
--- a/src/layouts/global.css
+++ b/src/layouts/global.css
@@ -25,6 +25,25 @@ pre code.hljs {
 		@apply prose-img:rounded-lg;
 		@apply prose-figure:object-center prose-figure:text-center prose-img:m-auto;
 		@apply prose-a:font-bold prose-a:text-green-500 prose-a:underline prose-a:decoration-green-500 prose-a:decoration-2 prose-a:underline-offset-4;
+
+		/* Long URLs and inline `code` shouldn't push the page wider than the viewport. */
+		@apply break-words;
+	}
+
+	/* Wide tables scroll on their own instead of widening the page. `display: block`
+	   turns the table into the scroll container; the rows still lay out as a table
+	   inside it. Specificity is .markdown table (0,1,1) so it beats the prose
+	   plugin's .prose :where(table) (0,1,0) regardless of layer ordering. */
+	.markdown table {
+		display: block;
+		width: 100%;
+		max-width: 100%;
+		overflow-x: auto;
+	}
+
+	/* Embeds (YouTube, etc) that declare a fixed pixel width. */
+	.markdown iframe {
+		max-width: 100%;
 	}
 
 	.tagline {
diff --git a/src/pages/blog/first-cdn.mdx b/src/pages/blog/first-cdn.mdx
index 1954f64..e4dc9d4 100644
--- a/src/pages/blog/first-cdn.mdx
+++ b/src/pages/blog/first-cdn.mdx
@@ -138,7 +138,7 @@ Okay they didn't say that, but this is **exactly** the mentality that MoQ needs
 **Just do it**.
 
 

-	
+	
 	
Holy shit I'm Shia LaBeouf.