Skip to content

fix(ui): show full playback rate values in the rates menu - #1074

Merged
danieldanieli merged 1 commit into
masterfrom
fix/playback-rate-menu-truncation
Jul 29, 2026
Merged

fix(ui): show full playback rate values in the rates menu#1074
danieldanieli merged 1 commit into
masterfrom
fix/playback-rate-menu-truncation

Conversation

@danieldanieli

Copy link
Copy Markdown
Contributor

video.js caps the playback rate menu at a fixed 4em. Once the menu item padding and the selected-item checkmark gutter are subtracted, rates like 1.75x no longer fit and get ellipsized to "1...".

The menu content is absolutely positioned, so it - not the menu box - is the element that has to grow: size it to max-content, with min-width 100% so short rate lists keep the original popup width. Also widen the control itself to 3em, since the 1.75x label measures 36.1px against the stock 2.5em (36px) button and crowds the neighbouring control.

video.js caps the playback rate menu at a fixed 4em. Once the menu item
padding and the selected-item checkmark gutter are subtracted, rates like
1.75x no longer fit and get ellipsized to "1...".

The menu content is absolutely positioned, so it - not the menu box - is
the element that has to grow: size it to max-content, with min-width 100%
so short rate lists keep the original popup width. Also widen the control
itself to 3em, since the 1.75x label measures 36.1px against the stock
2.5em (36px) button and crowds the neighbouring control.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@danieldanieli
danieldanieli requested a review from a team as a code owner July 29, 2026 07:57
@netlify

netlify Bot commented Jul 29, 2026

Copy link
Copy Markdown

Deploy Preview for cld-video-player ready!

Name Link
🔨 Latest commit 771b84f
🔍 Latest deploy log https://app.netlify.com/projects/cld-video-player/deploys/6a69b2694dca33000866c0bd
😎 Deploy Preview https://deploy-preview-1074--cld-video-player.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Jul 29, 2026

Copy link
Copy Markdown

Deploy Preview for cld-vp-esm-pages ready!

Name Link
🔨 Latest commit 771b84f
🔍 Latest deploy log https://app.netlify.com/projects/cld-vp-esm-pages/deploys/6a69b2693d59860008c998bf
😎 Deploy Preview https://deploy-preview-1074--cld-vp-esm-pages.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@tsi tsi left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔥

@danieldanieli
danieldanieli merged commit 521ab11 into master Jul 29, 2026
10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants