Media pager: the seek bar sits clear of the phone's gesture strip. Adam's screenshot: the bar ran along the very bottom edge of the screen, under Android's own gesture handle — a drag there is the system's (home, recents), and it was placed by env(safe-area-inset-bottom), which is 0 here (the page doesn't ask for viewport-fit=cover, and the gesture strip is never reported as a safe area anyway). It now sits 32px up from the bottom (plus any safe-area inset) and 16px in from each side, where an edge drag is the back gesture; the post's details stand above it, and its line has rounded ends. feed-video-pager-test checks the bar's place (32px up, 16px in) and that the author, caption and counts clear it; SHOT=path saves a picture of the pager with the details up.

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

1 files changed, 6 insertions, 0 deletions

diff --git a/tools/feed-video-pager-test.js b/tools/feed-video-pager-test.js
index 6d34cf1..ab5aa2a 100644
--- a/tools/feed-video-pager-test.js
+++ b/tools/feed-video-pager-test.js
@@ -115,6 +115,11 @@ try {
 
   console.log('\n[the seek bar]');
   check('the seek bar is up once the clip knows its length', await waitFor((cur) => !!eval(cur)()?.querySelector('.mp-seek.ready'), '(' + CUR + ')', 4000));
+  // clear of the phone's gesture strip along the bottom, and of the side edges (back gesture)
+  const geo = await page.evaluate((cur) => { const r = eval(cur)().querySelector('.mp-seek').getBoundingClientRect(); return { bottom: Math.round(innerHeight - r.bottom), left: Math.round(r.left), right: Math.round(innerWidth - r.right) }; }, '(' + CUR + ')');
+  check('the seek bar sits clear of the bottom edge', geo.bottom >= 32, JSON.stringify(geo));
+  check('…and in from the sides', geo.left >= 16 && geo.right >= 16, JSON.stringify(geo));
+  if (process.env.SHOT) { await page.evaluate(() => document.querySelector('.media-pager').classList.add('show')); await sleep(300); await page.screenshot({ path: process.env.SHOT }); await page.evaluate(() => document.querySelector('.media-pager').classList.remove('show')); }
   const bar = await page.evaluate((cur) => { const r = eval(cur)().querySelector('.mp-seek').getBoundingClientRect(); return { x: r.x, y: r.y + r.height - 4, w: r.width }; }, '(' + CUR + ')');
   await page.mouse.move(bar.x + bar.w * 0.1, bar.y);
   await page.mouse.down();
@@ -135,6 +140,7 @@ try {
   check('a tap pauses', v && v.paused, JSON.stringify(v));
   check('…and shows the details', s.show);
   check('…with the author and the words', await page.evaluate((cur) => { const x = eval(cur)(); return /Clip Poster/.test(x.textContent) && /a wide one/.test(x.textContent); }, '(' + CUR + ')'));
+  check('…clear of the seek bar', await page.evaluate((cur) => { const x = eval(cur)(); const bar = x.querySelector('.mp-seek-track').getBoundingClientRect(); return [...x.querySelectorAll('.mp-left > *, .mp-counts > *')].every((n) => n.getBoundingClientRect().bottom <= bar.top - 4); }, '(' + CUR + ')'));
   check('…still in the pager', s.open && s.fs);
   await tapPager();
   v = await curVideo(); s = await pagerState();