[adamXbot]

At phone widths the home page was 445px wide, so it scrolled sideways and the browser zoomed out to fit. This makes every page exactly the viewport width from 320px up, and leaves desktop layout untouched.

Before and after

document.documentElement.scrollWidth on main (before) and this branch (after):

Page	320px	375px	390px
index.html	445 → 320	445 → 375	445 → 390
privacy.html	423 → 320	423 → 375	423 → 390
about.html	329 → 320	375	390
legal.html, 404.html	already fine	already fine	already fine

In the mobile emulator, innerWidth at 375px went from 445 (zoomed out) to 375.

Causes and fixes

• Nav (index.html). Brand, beta chip, theme toggle and Download added up to 445px. Below 560px the nav beta chip is hidden (the hero still shows the beta chip with its version) and Download becomes a 44px icon button, keeping its aria-label. Below 760px the nav gets back the 24px side gutter, which nav.topnav .row { padding: 12px 0 } was wiping out and leaving the brand flush with the screen edge.
• Hero app-window mock. The grid's implicit auto column grew to the tab bar's width (about 700px). The track is now minmax(0, 1fr). Below 760px the tabs wrap onto their own row under the logo. On phones, finding tags, SDK source classes and byte counts move onto a second line. Long identifiers, hostnames and paths wrap; the window was already clipping them, so they were cut off.
• "Why" mock. NSPrivacyAccessedAPICategory… identifiers widened the two-column grid track to 370px. The grid children get min-width: 0 and the identifiers wrap.
• Install terminals. On phones they wrap like a real terminal instead of hiding the end of the command behind a sideways scroll. With slightly smaller type and card padding, the brew command fits on one line from 360px up.
• privacy.html. Inline code hostnames and paths wrap on phones. Below 360px the endpoint table tightens its cells and hyphenates prose, but never inside code.
• about.html. A bare GitHub URL in the prose wraps at 320px.

How it was checked

• An overflow sweep at 15 widths (320–900px) on all 5 pages, and on index.html in each of the 5 hero tabs. Nothing passes the viewport, and nothing is cut off by an overflow ancestor.
• A desktop box diff: every element's position and size, captured before and after at 820, 1024, 1280 and 1440px, on all pages and every hero tab. 14,596 boxes, no differences. The diff ignores only the new span.btn-label wrapper inside the nav Download button.
• Screenshots at 375 and 390px in light and dark: header, all five hero tabs, the "why" mock, install and footer.

Not changed here (possible follow-ups)

• On index.html between 761 and 1228px, the nav still sits flush with the screen edges (0px gutter), and on wide desktop it runs 24px wider than the page content. The other pages already align it. Restoring the gutter at every width is one line, but it would move the desktop nav, so I left it out.
• With Add the privacycommand command-line tool to the site #11's extra "Command line" nav link, index.html overflows by up to 37px at 761–797px, because the links only collapse at 760px. Raising that breakpoint to about 840px in Add the privacycommand command-line tool to the site #11 would fix it.

🤖 Generated with Claude Code

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	website-privacycommand	51c2afb	Commit Preview URL Branch Preview URL	Oct 09 2026, 01:52 AM