The "Tall only" / "Wide only" / "All shapes" toggle shows only in the video pager, not over the Videos grid.

Over the grid it sat on its own line below the view chips, looking misplaced (Adam, 2026-10-17: "The tall only chip looks a bit misplaced here. Let's only show it in media mode"). The grid still follows the same setting, so a change in the pager shows up in the grid too.

tools/pager-ready-gate-test.js: the grid shows four clips with no toggle over it; the pager's toggle checks are unchanged and pass.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_013ZDf1cyCQLkfjftYhymZAg

3 files changed, 4 insertions, 11 deletions

diff --git a/src/features/messages.js b/src/features/messages.js
index 3789f93..017629f 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -12190,12 +12190,13 @@ export function messagesFeature(ctx) {
   // true/false, or null while the clip's shape isn't known
   const clipFits = (url) => { if (clipsAll()) return true; const sh = clipShape(url); return sh === null ? null : sh === 'square' || sh === (screenTall() ? 'tall' : 'wide'); };
   const clipsLabel = () => t(clipsAll() ? 'clipsAll' : screenTall() ? 'clipsTall' : 'clipsWide');
-  // the toggle: in the pager's top bar and over the Videos grid
+  // the toggle: in the pager's top bar only (over the grid it sat oddly
+  // apart from the chips); the grid follows the same setting
   function clipsToggle(cls, after) {
     return h('button', { class: cls, type: 'button', title: t('clipsToggleTitle'), onClick: (e) => {
       e.stopPropagation();
       setClipsAll(!clipsAll());
-      for (const b of document.querySelectorAll('.mp-fit, .media-fit-btn')) b.textContent = clipsLabel();
+      for (const b of document.querySelectorAll('.mp-fit')) b.textContent = clipsLabel();
       if (after) after();
       if (mediaMode === 'videos') scheduleRepaint();
     } }, clipsLabel());
@@ -12438,7 +12439,6 @@ export function messagesFeature(ctx) {
       if (missing.length) warmTileThumbs(missing).then(() => queueTileThumbs(missing.filter((u) => !tileThumbs.has(u))));
     }
     return h('div', { class: 'media-grid', 'data-key': 'media-grid:' + mediaMode },
-      mediaMode === 'videos' ? h('div', { class: 'media-fit', 'data-key': 'media-fit' }, clipsToggle('media-fit-btn')) : null,
       ...items.map((it) => {
         const k = mediaKey(it);
         // a video tile shows a still at once: kept, given, or the server's
diff --git a/src/style.css b/src/style.css
index f7d4774..4365b95 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1585,8 +1585,6 @@ body::after {
    screen; its clip's poster still loads there. */
 .mp-group.mp-wait, .mp-group.mp-off { position: fixed; top: -400vh; left: 0; height: 0; visibility: hidden; pointer-events: none; }
 /* over the Videos grid: which shapes */
-.media-fit { grid-column: 1 / -1; display: flex; justify-content: flex-end; padding: 2px 8px 0; }
-.media-fit-btn { height: 28px; padding: 0 12px; font-size: 12px; font-weight: 600; border-radius: 999px; border: 0; color: var(--text, inherit); background: var(--chip-bg, rgba(127, 127, 127, .15)); }
 /* A mouse's way through the pager: arrows, where there is a pointer to
    hover with (a phone swipes). Faint until the pointer is over the pager;
    the sideways pair only when the post has a picture that way. */
diff --git a/tools/pager-ready-gate-test.js b/tools/pager-ready-gate-test.js
index ab2bcaf..d6df826 100644
--- a/tools/pager-ready-gate-test.js
+++ b/tools/pager-ready-gate-test.js
@@ -100,12 +100,7 @@ try {
   console.log('\n[the Videos grid: the clips the screen\'s way round]');
   await click('videos');
   check('the grid shows the tall clips and the square one, not the wide one', await waitFor(() => { const t = [...document.querySelectorAll('.media-tile.video')].map((x) => x.getAttribute('data-key')); return t.length === 4 && !t.some((k) => /wide/.test(k)); }, null, 8000), String(await page.evaluate(() => document.querySelectorAll('.media-tile.video').length)));
-  check('…with a toggle over it saying so', (await page.evaluate(() => document.querySelector('.media-fit-btn')?.textContent)) === 'Tall only', await page.evaluate(() => document.querySelector('.media-fit-btn')?.textContent));
-  await page.evaluate(() => document.querySelector('.media-fit-btn').click());
-  check('tapped: all five, the wide one too', await waitFor(() => document.querySelectorAll('.media-tile.video').length === 5, null, 4000));
-  check('…and the toggle says all shapes', (await page.evaluate(() => document.querySelector('.media-fit-btn')?.textContent)) === 'All shapes');
-  await page.evaluate(() => document.querySelector('.media-fit-btn').click());
-  check('tapped again: back to the four', await waitFor(() => document.querySelectorAll('.media-tile.video').length === 4, null, 4000));
+  check('…with no toggle over it (that lives in the pager)', await page.evaluate(() => !document.querySelector('.media-fit-btn, .media-grid .mp-fit')));
 
   console.log('\n[the carousel: a post joins once its clip is ready to play]');
   await page.evaluate(() => [...document.querySelectorAll('.media-tile.video')].find((x) => /tall1/.test(x.getAttribute('data-key'))).click());