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, 10 insertions, 0 deletions

diff --git a/src/style.css b/src/style.css
index c581535..2c61072 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1652,6 +1652,16 @@ 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(var(--mp-seek-lift) + 36px); }
+/* A wide window: the caption ran the whole width of the screen and the
+   counts sat in the far corner (Adam, 1920px across). The words, the
+   counts and the seek bar keep to a column under the middle of the screen;
+   the gradient behind them still spans it. */
+@media (min-width: 900px) {
+  .media-pager { --mp-col: 760px; }
+  .mp-meta { padding-left: max(14px, calc(50% - var(--mp-col) / 2)); padding-right: max(14px, calc(50% - var(--mp-col) / 2)); }
+  .mp-seek { left: max(16px, calc(50% - var(--mp-col) / 2)); right: max(16px, calc(50% - var(--mp-col) / 2)); }
+  .mp-caption { font-size: 15px; }
+}
 
 /* a clip that waits for a tap: what it costs, over its (blank or still) box */
 .vid-heavy {