From 8ebcaa4dc3418ee136bb3e0bb173f0c4ab4def5c Mon Sep 17 00:00:00 2001 From: Mohamed Ibrahim Date: Sun, 14 Jun 2026 15:42:59 +0100 Subject: [PATCH] fix(site): stop mobile text being trimmed off-screen MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit On narrow viewports (≤414px) real content was clipped on the right edge instead of wrapping. Root cause was an interaction with the site-wide `body { overflow-x: hidden }`, which turns any horizontal overflow into a silent trim rather than a scrollbar: - Landing: the `.capture` panel and `.proto-card` snippet (white-space: nowrap) gave their grid items a large min-content, inflating the mobile single-column `1fr` track's auto-minimum. That stretched the *hero text* and *protocol-card text* columns past the viewport, where they were clipped by `.hero { overflow: hidden }` ("sees" rendered as "see"). - Docs: `table.api td:first-child { white-space: nowrap }` plus long inline `` tokens (file paths, gradle tasks, Swift identifiers with no break opportunities) pushed the API tables and surrounding text off-screen. Fix (all scoped to the existing mobile breakpoints — desktop untouched): - landing: let `.capture`/`.proto-card` shrink below min-content (`min-width: 0`, `minmax(0,1fr)`); break long inline code in the quickstart/agent/noop sections. - docs: allow the first table column to wrap and break long inline code in paragraphs, list items, table cells and callouts. Verified at 360/390/414px (scrollWidth now equals viewport, zero overflow drivers) and confirmed desktop (1280px) renders identically. Co-Authored-By: Claude Opus 4.8 (1M context) --- site/assets/docs.css | 6 ++++++ site/assets/landing.css | 12 ++++++++++-- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/site/assets/docs.css b/site/assets/docs.css index 9e1cfc1..479e848 100644 --- a/site/assets/docs.css +++ b/site/assets/docs.css @@ -142,4 +142,10 @@ table.api td:first-child { white-space: nowrap; } .docs-grid { grid-template-columns: 1fr; gap: 0; } .docs-side { position: static; padding-bottom: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; border-bottom: 1px solid var(--line-soft); } .docs-side .side-group { margin-bottom: 14px; } + /* API tables: let the first column wrap and long tokens break so the + second column isn't pushed off-screen and trimmed by overflow-x: hidden. */ + table.api td:first-child { white-space: normal; } + .docs-main p code, .docs-main li code, .docs-main td code, .callout code { + overflow-wrap: anywhere; + } } diff --git a/site/assets/landing.css b/site/assets/landing.css index 677dffe..fea2032 100644 --- a/site/assets/landing.css +++ b/site/assets/landing.css @@ -273,8 +273,16 @@ @media (max-width: 880px) { .hero { padding: 64px 0 70px; } - .hero-grid { grid-template-columns: 1fr; gap: 44px; } - .capture { transform: none; } + .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; } + /* Let the capture panel shrink below its nowrap min-content instead of + inflating the grid track (which stretched — and clipped — the hero text). */ + .capture { transform: none; min-width: 0; } .proto-grid, .qs-steps { grid-template-columns: 1fr; } .agent-grid { grid-template-columns: 1fr; } + /* Same fix for the protocol cards: the nowrap .proto-snippet was inflating + the card's min-content and pushing card text off-screen. Let the card + shrink so the snippet scrolls inside it (it already has overflow-x: auto). */ + .proto-card { min-width: 0; } + /* Break long inline identifiers/paths so they wrap instead of overflowing. */ + .qs-step code, .agent-points code, .noop-note code { overflow-wrap: anywhere; } }