From 771b84fafe260f2956760d813a05a7f06de74794 Mon Sep 17 00:00:00 2001 From: danieldanieli Date: Wed, 29 Jul 2026 10:51:37 +0300 Subject: [PATCH] fix(ui): show full playback rate values in the rates menu 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) --- src/assets/styles/main.scss | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss index 2d80d745..300f381a 100644 --- a/src/assets/styles/main.scss +++ b/src/assets/styles/main.scss @@ -384,9 +384,22 @@ $icon-font-path: '../icon-font' !default; } } - .vjs-playback-rate-value { - font-size: 1.3em; - line-height: 2.3em; + .vjs-playback-rate { + // Fit three-digit rates (e.g. 1.75) at the value's 1.3em font-size. + width: 3em; + + .vjs-playback-rate-value { + font-size: 1.3em; + line-height: 2.3em; + } + + // video.js caps this menu at 4em, which truncates rates like 1.75 once the + // item padding and the selected-item gutter are subtracted. The content is + // absolutely positioned, so it - not the menu - has to grow. + .vjs-menu .vjs-menu-content { + width: max-content; + min-width: 100%; + } } .vjs-subs-caps-button {