From 51c2afbe67e2d0a29c52606992ebc06255281468 Mon Sep 17 00:00:00 2001 From: adamXbot <111877622+adamXbot@users.noreply.github.com> Date: Fri, 9 Oct 2026 12:51:59 +1100 Subject: [PATCH] Stop the site scrolling sideways on phones At 375px the home page was 445px wide. The nav row (brand, beta chip, theme toggle, Download) didn't fit, and the hero's app-window mock let its tab bar and findings widen the grid track. The "why" mock's long identifiers widened its column too. - Nav: below 560px, hide the nav beta chip (the hero shows it) and shrink Download to its icon; below 760px, put back the side gutter the row's padding was wiping out. - Hero mock: constrain the grid track, wrap the tabs onto their own row below 760px, and on phones move tags, SDK source classes and byte counts onto a second line. Long identifiers, hosts and paths wrap. - Install terminals wrap on phones instead of scrolling sideways. - privacy.html: hostnames and paths in code wrap on phones, and the endpoint table tightens below 360px. about.html: bare URLs wrap. Desktop layout is unchanged: every element box matches the original at 820, 1024, 1280 and 1440px. Co-Authored-By: Claude Opus 5.5 --- about.html | 2 +- index.html | 53 +++++++++++++++++++++++++++++++++++++++++++++++----- privacy.html | 8 ++++++++ 3 files changed, 57 insertions(+), 6 deletions(-) diff --git a/about.html b/about.html index b8f4f9b..0d43119 100644 --- a/about.html +++ b/about.html @@ -201,7 +201,7 @@ font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; margin: 40px 0 14px; color: var(--ink); } - article.prose p { margin: 0 0 16px; color: var(--slate); } + article.prose p { margin: 0 0 16px; color: var(--slate); overflow-wrap: break-word; } /* bare URLs wrap at 320px */ article.prose strong { color: var(--ink); font-weight: 600; } article.prose hr { margin: 40px 0; border: 0; border-top: 1px solid var(--line); } diff --git a/index.html b/index.html index df83ae9..1460de5 100644 --- a/index.html +++ b/index.html @@ -537,6 +537,9 @@ @media (max-width: 760px) { nav.topnav ul.links { display: none; } + /* The row's own padding wipes out the container gutter, which left the + brand and Download button flush against the screen edges. */ + nav.topnav .row { padding-left: 24px; padding-right: 24px; } } /* ── Sections ── */ @@ -600,7 +603,7 @@ .mock-titlebar .dot.g { background: #28c840; } .mock-titlebar .title { margin-left: 10px; font-size: 0.82rem; color: var(--mock-text-3); flex: 1; text-align: center; padding-right: 60px; } - .mock-canvas { display: grid; grid-template-rows: auto 1fr; min-height: 420px; } + .mock-canvas { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 420px; } .mock-nav { display: flex; align-items: center; gap: 14px; padding: 10px 16px; @@ -762,7 +765,7 @@ /* Findings list — used in hero + dashboard scroll */ .findings { display: grid; gap: 10px; } .finding { - display: grid; grid-template-columns: 32px 1fr auto; gap: 14px; align-items: center; + display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; background: var(--mock-surface); border: 1px solid var(--mock-border); @@ -787,6 +790,35 @@ text-transform: uppercase; letter-spacing: 0.04em; } + /* Long identifiers, hosts and paths in the mocks wrap rather than being cut off. */ + .finding .detail, .static-row .det, .telemetry-row .src, + .net-row .host, .stream .path, .mock-code { overflow-wrap: anywhere; } + + /* Below 760px the mock's tab bar no longer fits beside the logo and file + name, so the tabs wrap onto their own row. */ + @media (max-width: 760px) { + .mock-nav { flex-wrap: wrap; row-gap: 8px; } + .mock-nav .tabs { order: 1; flex-basis: 100%; flex-wrap: wrap; } + .mock-nav .right { margin-left: auto; } + } + /* Phones: the mock is about 300px wide. Tags, source classes and byte + counts drop onto a second line under the name they belong to. */ + @media (max-width: 560px) { + .mock-titlebar .title { padding-right: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + .mock-body { padding: 14px; } + .finding { grid-template-columns: 28px minmax(0, 1fr); gap: 6px 12px; } + .finding .tag { grid-column: 2; justify-self: start; } + .telemetry-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; } + .telemetry-row .src { grid-column: 1 / -1; } + .net-toolbar { flex-wrap: wrap; gap: 8px; } + .kill-switch { white-space: nowrap; } + .net-row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 2px; } + .net-row > :nth-child(2) { grid-column: 2 / -1; } + .net-row > .bytes { grid-row: 2; } + .net-row > .bytes:nth-child(3) { grid-column: 2; text-align: left; } + .net-row > .bytes:nth-child(4) { grid-column: 3; } + } + /* ── Stat strip ── */ .stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; @@ -808,6 +840,7 @@ .two-col { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; } + .two-col > * { min-width: 0; } /* don't let a long unbroken word widen the column */ @media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: 36px; } } /* Small feature cards (6-up grid) */ @@ -929,6 +962,16 @@ .btn { min-height: 44px; } .theme-toggle { width: 44px; height: 44px; } nav.topnav ul.links a { padding: 10px 0; } + /* Fit the nav in 375px: drop the beta chip (the hero shows it) and + shrink Download to its icon. The link keeps its aria-label. */ + .beta-chip-nav { display: none; } + .nav-download { width: 44px; padding: 0; justify-content: center; } + .nav-download .btn-label { display: none; } + /* Wrap long commands like a real terminal does, rather than hiding + the end of them behind a sideways scroll. The smaller type and card + padding keep the brew command on one line down to 360px. */ + .install-card { padding: 22px; } + .terminal { font-size: 0.8rem; overflow-wrap: anywhere; } } @@ -965,8 +1008,8 @@ - - Download + + Download @@ -1273,7 +1316,7 @@

Permissions tell you what an app can do. Not w Privacy Manifest cross-check
-
+
DECLARED in PrivacyInfo.xcprivacy
NSPrivacyAccessedAPICategoryUserDefaults · CA92.1
NSPrivacyAccessedAPICategoryFileTimestamp · DDA9.1
diff --git a/privacy.html b/privacy.html index 6da4e17..3ab9a26 100644 --- a/privacy.html +++ b/privacy.html @@ -118,6 +118,14 @@ th { color: var(--ink); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; } td { color: var(--slate); } td code { font-size: 0.85em; } + /* Phones: long hostnames and paths wrap. Phone-only so the desktop + table keeps its column widths. Below 360px the three-column table + also needs tighter cells and hyphenated prose (never inside code). */ + @media (max-width: 560px) { code { overflow-wrap: anywhere; } } + @media (max-width: 359px) { + th, td { padding: 10px 6px; hyphens: auto; -webkit-hyphens: auto; } + td code { hyphens: manual; -webkit-hyphens: manual; } + } .last-updated { color: var(--muted); font-size: 0.9rem; margin-bottom: 32px; } /* Beta chip (smaller variant for nav) */ .beta-chip {