Media pager: on a wide window the words, counts and seek bar keep to a column under the middle. The caption ran the whole width of a 1920px screen and the counts sat in its far corner, hard to see from the picture (Adam's screenshot). From 900px across, the meta's padding and the seek bar's edges hold a 760px column centred on the screen (the gradient behind them still spans it), and the caption is a point larger. A phone keeps the full width. tools/pager-resize-test.js measures both.

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

1 files changed, 13 insertions, 0 deletions

diff --git a/tools/pager-resize-test.js b/tools/pager-resize-test.js
index 7e4cfb7..07fcbba 100644
--- a/tools/pager-resize-test.js
+++ b/tools/pager-resize-test.js
@@ -115,6 +115,19 @@ try {
   await page.keyboard.press('ArrowUp'); await resting('e8.png');
   await page.setViewport({ width: 900, height: 1200 });
   check('a different shape: still on the post', await resting('e8.png'), await curPic() + ' ' + await pos());
+  console.log('\n[a wide window: the words and counts keep to the middle]');
+  await page.setViewport({ width: 1920, height: 600 });
+  await resting('e8.png');
+  await page.keyboard.press('ArrowDown'); await resting('e9.png'); // moved on from the start: a tap shows the details (on the start it closes)
+  await page.mouse.click(960, 300); await sleep(400);
+  const geo = await page.evaluate(() => { const sc = document.querySelector('.mp-scroll'); const s = [...sc.querySelectorAll('.mp-slide')].find((x) => { const r = x.getBoundingClientRect(); return Math.abs(r.top) < 4 && Math.abs(r.left) < 4; }); const r = (q) => { const e = s.querySelector(q); const b = e.getBoundingClientRect(); return [Math.round(b.left), Math.round(b.right)]; }; return { show: document.querySelector('.media-pager').classList.contains('show'), left: r('.mp-left'), counts: r('.mp-counts'), meta: r('.mp-meta') }; });
+  check('the details are up', geo.show);
+  check('the words start near the middle column, not the screen\'s edge', geo.left[0] >= 560 && geo.left[0] <= 600, JSON.stringify(geo));
+  check('the counts sit at the column\'s edge, not the screen\'s corner', geo.counts[1] >= 1320 && geo.counts[1] <= 1360, JSON.stringify(geo));
+  check('the gradient still spans the screen', geo.meta[0] === 0 && geo.meta[1] === 1920, JSON.stringify(geo));
+  await page.setViewport({ width: 390, height: 844 }); await sleep(300);
+  const narrow = await page.evaluate(() => { const sc = document.querySelector('.mp-scroll'); const s = [...sc.querySelectorAll('.mp-slide')].find((x) => { const r = x.getBoundingClientRect(); return Math.abs(r.top) < 4 && Math.abs(r.left) < 4; }); const b = s.querySelector('.mp-left').getBoundingClientRect(); return [Math.round(b.left), Math.round(s.querySelector('.mp-counts').getBoundingClientRect().right)]; });
+  check('a phone keeps the full width', narrow[0] <= 16 && narrow[1] >= 370, JSON.stringify(narrow));
   check('no page errors', errs.length === 0, errs.slice(0, 2).join(' | '));
 } catch (e) { console.error(e); ok = false; } finally { await browser.close(); server.stop(true); }
 console.log(ok ? '\n✅ the pager keeps its post through a resize' : '\n❌ failed');