From c8a9adc4237c75c514f5995715f34a14f669f442 Mon Sep 17 00:00:00 2001 From: Russell Ballestrini Date: Sun, 31 May 2026 13:52:32 -0400 Subject: [PATCH] web: every page works on mobile without horizontal overflow - index.html, kernel.html: were missing the viewport meta entirely; mobile fell back to the default 980px layout and the content was scaled down. Add the standard 'width=device-width,initial-scale=1' and centre the body with margin:0 auto so the 640px max-width is centered instead of left-aligned on wide displays. - host-your-own.html, how-it-works.html, zebra-audio.html, chat.html: add a 600px breakpoint that tightens body padding to 1rem, shrinks the h1 from 3rem to 2.2rem, and lets long URLs / pubkey hashes wrap via overflow-wrap:anywhere on body prose. .code / .diagram already use overflow-x:auto so internal scrolling stays bounded to the box, never pushes the page wider than the viewport. - chat.html: cap the QR share box's canvas (was a fixed 320px square) with max-width:100% on phones, so 320px-wide handsets don't overflow. - zebra-audio.html: the mute button had a fixed 6rem width to keep the 'mute'/'unmute' label from shifting the row; on narrow phones that width forced wrapping. Drop it back to auto on small viewports. All pages stamp+verify; the integrity footer hashes in the source match the served files after `make stamp`. --- web/chat.html | 9 ++++++--- web/host-your-own.html | 12 ++++++++++-- web/how-it-works.html | 11 +++++++++-- web/index.html | 6 ++++++ web/kernel.html | 6 ++++++ web/zebra-audio.html | 11 +++++++++-- 6 files changed, 46 insertions(+), 9 deletions(-) diff --git a/web/chat.html b/web/chat.html index 3932a7a..6993f60 100644 --- a/web/chat.html +++ b/web/chat.html @@ -160,7 +160,10 @@ .share-box .copy-row button { font-size: 0.75rem; padding: 0.25rem 0.7rem; } @media (max-width: 600px) { .share-box { grid-template-columns: 1fr; } - .share-box .qr-canvas { justify-self: center; } + /* cap the QR canvas so it never pushes the page wider than the + * viewport on narrow phones (320px and up) */ + .share-box .qr-canvas { justify-self: center; max-width: 100%; } + h1 { font-size: 2.2rem; } } @@ -1650,8 +1653,8 @@ logLine('sys', 'chat content lives in encrypted SRTP audio. no IP packets carry diff --git a/web/host-your-own.html b/web/host-your-own.html index f932ada..930b337 100644 --- a/web/host-your-own.html +++ b/web/host-your-own.html @@ -60,6 +60,14 @@ padding: 0.5rem 1.2rem; text-decoration: none; font-size: 0.9rem; } .cta:hover { background: #333; } + @media (max-width: 600px) { + body { padding: 1rem; line-height: 1.55; } + h1 { font-size: 2.2rem; } + h2 { font-size: 1.1rem; margin: 1.8rem 0 0.7rem; } + .lead { font-size: 0.95rem; } + /* long URLs / hashes wrap instead of pushing the page wider */ + p, li { overflow-wrap: anywhere; } + } @@ -384,8 +392,8 @@ turn.example.com { diff --git a/web/how-it-works.html b/web/how-it-works.html index 9830fa9..dea2205 100644 --- a/web/how-it-works.html +++ b/web/how-it-works.html @@ -54,6 +54,13 @@ } hr { border: none; border-top: 1px solid #ddd; margin: 2.5rem 0; } .foot { font-size: 0.75rem; color: #777; margin-top: 2rem; } + @media (max-width: 600px) { + body { padding: 1rem; line-height: 1.55; } + h1 { font-size: 2.2rem; } + h2 { font-size: 1.1rem; margin: 1.8rem 0 0.7rem; } + .lead { font-size: 0.95rem; } + p, li { overflow-wrap: anywhere; } + } @@ -268,8 +275,8 @@ diff --git a/web/index.html b/web/index.html index 2b49070..d9ad424 100644 --- a/web/index.html +++ b/web/index.html @@ -2,6 +2,7 @@ + zebra report @@ -653,8 +660,8 @@ else wirePuppet();