Repository navigation
fix(media): give a narrow player's seek bar a row of its own - #276
Conversation
On a phone the seek bar shared one row with the two times and the buttons, so at a 327 px player with touch buttons and an hour-long video it got 45 px. Below 24rem it now sits on its own row above the buttons, with the times together after the play button; below 16rem the times drop as before. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
Latest result Pull request merged. Final answersSession Pull request merged. Session Waiting for GitHub merge request a93182f4-32ce-4575-9fe2-76a83f6f5b69. Session Fixed Pullfrog P1 third-row wrapping, reproduced at 288px with the supported monospace font. Touch-video timestamps now hide below 18rem; documentation and boundary coverage updated. Media Playwright: 8 passed; package vp test: 14 passed; focused typed lint, formatting and git diff --check passed. Pushed 17c5868 and resolved the thread; awaiting CI. Session Fixed Pullfrog P1 third-row wrapping, reproduced at 288px with the supported monospace font. Touch-video timestamps now hide below 18rem; documentation and boundary coverage updated. Media Playwright: 8 passed; package vp test: 14 passed; focused typed lint, formatting and git diff --check passed. Pushed 17c5868 and resolved the thread; awaiting CI. Session Fixed Pullfrog P1 third-row wrapping, reproduced at 288px with the supported monospace font. Touch-video timestamps now hide below 18rem; documentation and boundary coverage updated. Media Playwright: 8 passed; package vp test: 14 passed; focused typed lint, formatting and git diff --check passed. Pushed 17c5868 and resolved the thread; awaiting CI. Session Fixed Pullfrog P1 third-row wrapping, reproduced at 288px with the supported monospace font. Touch-video timestamps now hide below 18rem; documentation and boundary coverage updated. Media Playwright: 8 passed; package vp test: 14 passed; focused typed lint, formatting and git diff --check passed. Pushed 17c5868 and resolved the thread; awaiting CI. Session Fixed Pullfrog P1 third-row wrapping, reproduced at 288px with the supported monospace font. Touch-video timestamps now hide below 18rem; documentation and boundary coverage updated. Media Playwright: 8 passed; package vp test: 14 passed; focused typed lint, formatting and git diff --check passed. Pushed 17c5868 and resolved the thread; awaiting CI. Session Fixed Pullfrog P1 third-row wrapping, reproduced at 288px with the supported monospace font. Touch-video timestamps now hide below 18rem; documentation and boundary coverage updated. Media Playwright: 8 passed; package vp test: 14 passed; focused typed lint, formatting and git diff --check passed. Pushed 17c5868 and resolved the thread; awaiting CI. Fixed Pullfrog P1 third-row wrapping, reproduced at 288px with the supported monospace font. Touch-video timestamps now hide below 18rem; documentation and boundary coverage updated. Media Playwright: 8 passed; package vp test: 14 passed; focused typed lint, formatting and git diff --check passed. Pushed 17c5868 and resolved the thread; awaiting CI. |
The accent, #f5f5f5 on a white bar, left the unplayed track nearly invisible, which shows more now that a narrow player's seek bar runs the bar's width. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
![pullfrog[bot]](https://avatars.githubusercontent.com/in/1768019?s=60&v=4){kind=small}
There was a problem hiding this comment.
Important
The new 16rem time cutoff can still produce a third control row on narrow touch video players with hour-long timestamps.
Reviewed changes in c6fe3ca: the responsive media control layout, its documentation, and the new browser geometry test.
- Responsive control bar — Below
24rem, the seek input moves to a full-width first row and the two times are grouped after Play; below16rem, the times are hidden. - Coverage — The Playwright test compares an
18remaudio player’s two-row layout with the existing32remsingle-row layout. - Documentation — The Theme section now describes both responsive breakpoints.
gpt-5.6-sol ｜ 𝕏
comark-annotate
comark-badge
comark-cards
comark-carousel
comark-cast
comark-charts
comark-chat
comark-chips
comark-cjk
comark-code
comark-code-notes
comark-colors
comark-comments
comark-critic
comark-deflist
comark-details
comark-diagrams
comark-diff
comark-embed
comark-fields
comark-figure
comark-file-tree
comark-footnotes
comark-github
comark-icon
comark-include
comark-keys
comark-links
comark-linter
comark-magic-move
comark-mark
comark-mathml
comark-media
comark-metrics
comark-outline
comark-properties
comark-qr
comark-quiz
comark-reading-time
comark-sources
comark-steps
comark-table
comark-tabs
comark-tests
comark-ui
comark-xref
comark-zoom
commit: |
There was a problem hiding this comment.
ℹ️ No new issues in the incremental change. The prior must-address responsive-layout finding remains open because this commit only changes the seek track's unplayed color and documentation.
Reviewed changes since the prior Pullfrog review: the seek track now uses a faded foreground color instead of the accent token.
- Seek track color — Changed the unplayed range segment to a 25% foreground mix so it remains visible when the accent barely contrasts with the control bar.
- Theme documentation — Updated the shared-token table to attribute the unplayed range segment to
--comark-foregroundrather than--comark-accent.
gpt-5.6-sol ｜ 𝕏
…me fix for Markdown videos The video viewer's track was --border on the bar, barely visible. It's now the foreground at 25%, as in comark-media. comark-ui moves to onmax/comark-ui#276's preview, where a narrow Markdown video or audio player gets its seek bar on a row of its own and the same faded track. That build includes the zoomed screenshot Copy in the zoom header (onmax/comark-ui#274), so the comark-annotate@0.7.2 patch that backported it goes. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes since the prior Pullfrog review: the narrow touch-video layout now accounts for long timestamps and has browser geometry coverage at the responsive boundary.
- Touch-video cutoff — Hid video timestamps below
18remon coarse pointers so the larger Play, Mute, and Full screen buttons remain on one controls row. - Boundary coverage — Added a coarse-pointer video test with hour-form timestamps across
240pxto375px, checking timestamp visibility, seek width, button alignment, and overflow. - Theme guidance — Documented the touch-specific cutoff alongside the existing
24remseek-row and16remgeneral time cutoffs.
gpt-5.6-sol ｜ 𝕏
On a phone the seek bar shared one row with the two times and the buttons. At a 327 px player (a 375 px phone), with the 40 px touch buttons and a video over an hour long, it got 45 px, about two thumbs wide. Between 18rem and about 26rem it was narrower than below 18rem, where the times dropped.
Below 24rem the seek bar now gets a row of its own above the buttons, and the times sit together after the play button as
12:34 / 1:02:03. Below 16rem the times drop, so a video's full screen button never wraps to a third row. At 24rem and wider nothing changes; just above it, one row still leaves the seek bar 138 px or more.The rest of the seek bar was
--comark-accent, #f5f5f5 on a white bar, about 1.1:1, which shows more now that a narrow player's bar runs its full width. It's now the foreground at 25% (about 1.8:1 in light, 2:1 in dark), and the docs' token table says so.Before and after, at 327 px and in the gallery: https://drop.vitehub.dev/d/spb9ykhhfa86/comark-media-narrow-seek-row. The gallery's frames are about 448 px wide, so its media row is the same as on main.
Measured in Chromium as a Pixel 7 and as desktop Chrome, video and audio, from 240 px to 900 px; no bar overflows. A new e2e test checks that an 18rem audio player puts the seek bar above the play button at more than 90% of the bar's width, and a 32rem one keeps one row; it fails on main.
pnpm readypasses.Same problem as vite-hub/drop#91 in Drop's media-chrome viewer, fixed here for comark-media's own bar.
🤖 Generated with Claude Code