The view strip scrolls sideways; the page can never be wider than the screen.

Five chips (Notes, Conversations, Images, Videos, Articles — Conversations joined them today) no longer fit a phone, and the strip was a flex row that neither wrapped nor scrolled: the page was 42px wider than a 390px screen, which on an iPhone is a page you can pinch out of and pan, a blank strip down the right (Adam, 2026-10-16: "I can kinda zoom out and pan around a bit on my phone"). The strip now scrolls sideways like the feed chips above it, and the root element clips sideways overflow outright so no stray wide row can do this again (on the root, not body: a body that clips becomes the scroll container a sticky rail measures against).

feed-media-views-test: the strip scrolls sideways and the page is no wider than the window.

Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01J1Kon8bxJoHRpJdSzshCkp

2 files changed, 18 insertions, 1 deletions

diff --git a/src/style.css b/src/style.css
index fdfb42b..30448ed 100644
--- a/src/style.css
+++ b/src/style.css
@@ -92,6 +92,12 @@ html {
      one last time" after a switch. Stable gutter = no reflow when content
      grows. */
   scrollbar-gutter: stable;
+  /* Nothing ever scrolls the page sideways. Anything wider than the screen
+     (a strip of chips, a stray wide row) would otherwise let an iPhone
+     pinch the page out and pan to it. (On the root element, not body: a
+     body that clips becomes the scroll container a sticky rail measures
+     against, and the rail would stop sticking.) */
+  overflow-x: hidden;
 }
 
 html, body {
@@ -1461,7 +1467,13 @@ body::after {
 .social-count.on { color: var(--ink); border-bottom-color: var(--accent); }
 
 /* ---- feed media views: All / Images / Videos, the grid, the pager ---- */
-.media-modes { gap: 6px; }
+/* The view strip scrolls sideways like the feed chips above it: five
+   chips no longer fit a phone (Conversations joined them), and a flex row
+   that neither wraps nor scrolls made the page 42px wider than the screen
+   — on an iPhone that is a page you can pinch out of and pan, a blank
+   strip down the right (Adam, 2026-10-16). */
+.media-modes { gap: 6px; flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px; padding: 2px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
+.media-modes::-webkit-scrollbar { display: none; }
 .media-modes .feed-chip { padding: 4px 12px; font-size: 13px; }
 .article-list { gap: 10px; }
 .article-list > .quote-card { margin-top: 0; }
diff --git a/tools/feed-media-views-test.js b/tools/feed-media-views-test.js
index 14a9803..fe62413 100644
--- a/tools/feed-media-views-test.js
+++ b/tools/feed-media-views-test.js
@@ -128,6 +128,11 @@ try {
   console.log('\n[the switch]');
   check('Notes / Conversations / Images / Videos / Articles sit under the chips, Notes on', await page.evaluate(() =>
     [...document.querySelectorAll('.media-mode')].map((b) => b.textContent + (b.classList.contains('on') ? '*' : '')).join(',') === 'Notes*,Conversations,Images,Videos,Articles'));
+  // five chips are wider than a phone: the strip scrolls sideways, the page does not get wider
+  check('…the strip scrolls sideways rather than widening the page', await page.evaluate(() => {
+    const s = document.querySelector('.media-modes');
+    return s.scrollWidth > s.clientWidth && getComputedStyle(s).overflowX === 'auto' && document.documentElement.scrollWidth <= innerWidth;
+  }), await page.evaluate(() => 'page ' + document.documentElement.scrollWidth + ' of ' + innerWidth));
 
   console.log('\n[Images: a grid]');
   await mode('images');