From 61578e28712294ae28976345ca3d3a12c4796e27 Mon Sep 17 00:00:00 2001 From: John Siracusa Date: Fri, 7 Aug 2026 12:00:14 -0400 Subject: [PATCH] fix(site): stop /install code blocks widening the page on phones MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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
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
expanded; all six code blocks scroll internally; packs page (the other CodeBlock consumer) unaffected. Co-Authored-By: Claude Fable 5 Signed-off-by: John Siracusa --- apps/site/src/pages/install.astro | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/apps/site/src/pages/install.astro b/apps/site/src/pages/install.astro index 3e096f4..f154ae8 100644 --- a/apps/site/src/pages/install.astro +++ b/apps/site/src/pages/install.astro @@ -571,6 +571,14 @@ const formatDate = (iso: string) => dateFormatter.format(new Date(`${iso}T00:00: font-size: 0.75rem; font-weight: 700; } + /* The steps grid must never be widened by unbreakable code-block content — + * the block scrolls inside its own box instead (min-width: 0 beats the + * grid item's default min-width: auto, which floors at min-content). */ + .step-copy, + .step-proof, + .result-preview { + min-width: 0; + } .step-copy h3 { margin: 0 0 0.65rem; font-size: 1.45rem; @@ -732,6 +740,12 @@ const formatDate = (iso: string) => dateFormatter.format(new Date(`${iso}T00:00: padding: 2.5rem 0; border-top: 1px solid var(--cc-border); } + /* Same rule as the steps grid: items must not floor the track at the + * min-content of a nested code block (.cli-alternative wraps one). */ + .source-route > *, + .resolver-proof > * { + min-width: 0; + } .route-heading { grid-row: span 3; } .route-heading h3, .resolver-proof h3 { margin: 0.45rem 0 0.65rem; font-size: 1.5rem; letter-spacing: -0.02em; }