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, 9 insertions, 5 deletions

diff --git a/src/style.css b/src/style.css
index 9b7d6a0..448f702 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1529,14 +1529,18 @@ body::after {
 .media-pager.quiet .mp-top .mp-sound { pointer-events: auto; }
 .media-pager.quiet.show .mp-top .mp-x { opacity: 1; pointer-events: auto; }
 /* a clip's seek bar: a thin line along the bottom, thicker with the details
-   up or under a finger; the strip above it is the finger's (no swipe there) */
+   up or under a finger; the strip above it is the finger's (no swipe there).
+   Lifted clear of the phone's own gesture strip along the bottom edge (which
+   a page isn't told about: no safe-area inset for it) and in from the side
+   edges, where a drag would be the system's back gesture. */
+.media-pager { --mp-seek-lift: calc(env(safe-area-inset-bottom, 0px) + 32px); }
 .mp-seek {
-  position: absolute; left: 0; right: 0; bottom: env(safe-area-inset-bottom, 0px); z-index: 3; height: 28px;
+  position: absolute; left: 16px; right: 16px; bottom: var(--mp-seek-lift); z-index: 3; height: 28px;
   display: flex; align-items: flex-end; touch-action: none; cursor: pointer; visibility: hidden;
 }
 .mp-seek.ready { visibility: visible; }
-.mp-seek-track { position: relative; width: 100%; height: 3px; background: rgba(255, 255, 255, .28); transition: height .15s; }
-.mp-seek-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; }
+.mp-seek-track { position: relative; width: 100%; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .28); transition: height .15s; }
+.mp-seek-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: #fff; }
 .mp-seek-fill::after {
   content: ''; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
   border-radius: 50%; background: #fff; opacity: 0; transition: opacity .15s;
@@ -1550,7 +1554,7 @@ body::after {
 }
 .mp-seek.drag .mp-seek-time { opacity: 1; }
 /* the details sit clear of the seek bar */
-.media-pager.videos .mp-meta { padding-bottom: calc(max(16px, env(safe-area-inset-bottom)) + 22px); }
+.media-pager.videos .mp-meta { padding-bottom: calc(var(--mp-seek-lift) + 36px); }
 
 /* a clip that waits for a tap: what it costs, over its (blank or still) box */
 .vid-heavy {