fix(skin): improvements to menu styles

[sampotts]

Summary

• Remove transition of height and width on menu open/close.
• Fix viewport transition logic to take into account width when calculating height, instead of using max-width: none in the calculations - this was causing issues with longer labels in the i18n work where some labels wrapped to two lines but previous logic assumed a single line (due to the max-width: none).
• Set text alignment to left on menu items.
• Increase the min-width on the settings menu to 12rem (up from 11rem) to give a little more space.
• Fix menu icon classnames in the Tailwind skins.
• Tweak padding on menu items.
• Add a subtle vertical transition and reduce the scale effect.
• Made the minimal menus look different to default menus.

Closes #1723

Don't merge until @mihar-22 gives the ok.

Visuals

Animations slowed to 25%.

Before

CleanShot.2026-06-23.at.10.46.49.mp4

After

CleanShot.2026-06-23.at.10.47.30.mp4

---

Note

Medium Risk
Touches layout measurement and positioning sync for nested settings menus across core, HTML, and React; risk is mainly visual/layout regressions rather than security, with broad but mostly CSS/preset surface area.

Overview
Menu viewport transitions now measure width and height using popover available width (--media-popover-available-width), re-measure when that width changes during submenu navigation, and resync the active submenu when the root is still marked active. HTML and React menu content pass availableWidth into syncMenuViewRoot after positioning (including when anchor positioning is off).

Skin and preset updates align menus and popovers: settings min-width 12rem, left-aligned items, shared menu.icon classes, Quality icon instead of switches, quality label/tier layout tweaks, and no width/height transition on menu open/close (only while navigating). Popovers use a lighter translate + scale exit animation; default/minimal menus diverge more (padding, radius, tooltip/popover colors, anchor-based row highlight where supported). Root skins add thin scrollbars.

^{Reviewed by Cursor Bugbot for commit 524bacb. Bugbot is set up for automated code reviews on this repo. Configure here.}

[netlify]

❌ Deploy Preview for vjs10-site failed. Why did it fail? →

Name	Link
🔨 Latest commit	524bacb
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/6a431add35339c0008a142fb

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
v10-sandbox	Ready	Preview, Comment	Jun 30, 2026 1:25am

[github-actions]

📦 Bundle Size Report

🎨 @videojs/html

Path	Base initial	PR initial	Diff	%	Lazy
/video/minimal-skin	44.12 kB	44.78 kB	+677 B	+1.5%	—	🔺
/video/minimal-skin.tailwind	44.71 kB	45.51 kB	+826 B	+1.8%	—	🔺
/video/skin	44.47 kB	45.08 kB	+631 B	+1.4%	—	🔺
/video/skin.tailwind	45.09 kB	45.81 kB	+738 B	+1.6%	—	🔺
/audio/minimal-skin	36.72 kB	37.39 kB	+691 B	+1.8%	—	🔺
/audio/minimal-skin.tailwind	37.11 kB	37.89 kB	+796 B	+2.1%	—	🔺
/audio/skin	37.94 kB	38.67 kB	+746 B	+1.9%	—	🔺
/audio/skin.tailwind	38.31 kB	39.08 kB	+793 B	+2.0%	—	🔺
/live-video/minimal-skin	43.21 kB	43.93 kB	+731 B	+1.7%	—	🔺
/live-video/minimal-skin.tailwind	43.68 kB	44.47 kB	+801 B	+1.8%	—	🔺
/live-video/skin	43.21 kB	43.85 kB	+659 B	+1.5%	—	🔺
/live-video/skin.tailwind	43.67 kB	44.40 kB	+752 B	+1.7%	—	🔺
/live-audio/minimal-skin	29.71 kB	30.18 kB	+481 B	+1.6%	—	🔺
/live-audio/minimal-skin.tailwind	29.24 kB	29.56 kB	+336 B	+1.1%	—	🔺
/live-audio/skin	31.06 kB	31.53 kB	+477 B	+1.5%	—	🔺
/live-audio/skin.tailwind	30.66 kB	31.02 kB	+368 B	+1.2%	—	🔺
/video (default)	44.48 kB	45.07 kB	+606 B	+1.3%	—	🔺
/video (default + hls)	184.02 kB	184.57 kB	+564 B	+0.3%	—	🔺
/video (minimal)	44.16 kB	44.82 kB	+674 B	+1.5%	—	🔺
/video (minimal + hls)	183.63 kB	184.45 kB	+838 B	+0.4%	—	🔺
/audio (default)	37.93 kB	38.61 kB	+697 B	+1.8%	—	🔺
/audio (minimal)	36.73 kB	37.46 kB	+746 B	+2.0%	—	🔺

Presets (7)

Entry	Initial
/video (default)	45.07 kB
/video (default + hls)	184.57 kB
/video (minimal)	44.82 kB
/video (minimal + hls)	184.45 kB
/audio (default)	38.61 kB
/audio (minimal)	37.46 kB
/background	4.20 kB

Media (10)

Entry	Initial
/media/background-video	1.14 kB
/media/container	1.72 kB
/media/dash-video	214.74 kB
/media/hlsjs-video	141.28 kB
/media/mux-audio	163.72 kB
/media/mux-video	163.70 kB
/media/native-hls-video	9.05 kB
/media/simple-hls-audio-only	17.15 kB
/media/simple-hls-video	18.69 kB
/media/vimeo-video	12.31 kB

Players (5)

Entry	Initial
/video/player	8.07 kB
/audio/player	5.38 kB
/background/player	3.92 kB
/live-video/player	7.64 kB
/live-audio/player	5.39 kB

Skins (30)

Entry	Type	Initial
/video/minimal-skin.css	css	5.71 kB
/video/skin.css	css	5.68 kB
/video/minimal-skin	js	44.78 kB
/video/minimal-skin.tailwind	js	45.51 kB
/video/skin	js	45.08 kB
/video/skin.tailwind	js	45.81 kB
/audio/minimal-skin.css	css	3.85 kB
/audio/skin.css	css	3.76 kB
/audio/minimal-skin	js	37.39 kB
/audio/minimal-skin.tailwind	js	37.89 kB
/audio/skin	js	38.67 kB
/audio/skin.tailwind	js	39.08 kB
/background/skin.css	css	133 B
/background/skin	js	1.14 kB
/live-video/minimal-skin.css	css	5.71 kB
/live-video/skin.css	css	5.68 kB
/live-video/minimal-skin	js	43.93 kB
/live-video/minimal-skin.tailwind	js	44.47 kB
/live-video/skin	js	43.85 kB
/live-video/skin.tailwind	js	44.40 kB
/live-audio/minimal-skin.css	css	3.85 kB
/live-audio/skin.css	css	3.76 kB
/live-audio/minimal-skin	js	30.18 kB
/live-audio/minimal-skin.tailwind	js	29.56 kB
/live-audio/skin	js	31.53 kB
/live-audio/skin.tailwind	js	31.02 kB
/global.css	css	176 B
/shared.css	css	104 B
/tailwind.css	css	228 B
/skin-element	js	1.45 kB

UI Components (38)

Entry	Initial
/ui/airplay-button	2.32 kB
/ui/alert-dialog	2.47 kB
/ui/alert-dialog-close	2.27 kB
/ui/alert-dialog-description	2.25 kB
/ui/alert-dialog-title	2.28 kB
/ui/buffering-indicator	2.32 kB
/ui/captions-button	2.41 kB
/ui/captions-radio-group	2.80 kB
/ui/cast-button	2.38 kB
/ui/compounds	2.92 kB
/ui/controls	2.66 kB
/ui/error-dialog	2.69 kB
/ui/fullscreen-button	2.41 kB
/ui/hotkey	2.39 kB
/ui/menu	2.73 kB
/ui/mute-button	2.34 kB
/ui/pip-button	2.45 kB
/ui/play-button	2.36 kB
/ui/playback-rate-button	2.44 kB
/ui/playback-rate-radio-group	2.84 kB
/ui/popover	2.72 kB
/ui/poster	2.20 kB
/ui/quality-radio-group	2.76 kB
/ui/seek-button	2.34 kB
/ui/seek-indicator	2.43 kB
/ui/seek-indicator-value	498 B
/ui/slider	2.71 kB
/ui/status-announcer	2.37 kB
/ui/status-indicator	2.38 kB
/ui/status-indicator-value	503 B
/ui/thumbnail	2.25 kB
/ui/time	2.67 kB
/ui/time-slider	2.72 kB
/ui/tooltip	2.70 kB
/ui/volume-indicator	2.38 kB
/ui/volume-indicator-fill	516 B
/ui/volume-indicator-value	546 B
/ui/volume-slider	2.71 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react

Path	Base initial	PR initial	Diff	%	Lazy
/video/minimal-skin	36.91 kB	37.39 kB	+489 B	+1.3%	—	🔺
/video/minimal-skin.tailwind	42.75 kB	43.40 kB	+668 B	+1.5%	—	🔺
/video/skin	36.88 kB	37.31 kB	+442 B	+1.2%	—	🔺
/video/skin.tailwind	42.60 kB	43.30 kB	+715 B	+1.6%	—	🔺
/audio/minimal-skin.tailwind	31.86 kB	32.37 kB	+526 B	+1.6%	—	🔺
/audio/skin.tailwind	33.86 kB	34.38 kB	+539 B	+1.6%	—	🔺
/live-video/minimal-skin.tailwind	38.34 kB	38.84 kB	+517 B	+1.3%	—	🔺
/live-video/skin.tailwind	38.37 kB	38.92 kB	+562 B	+1.4%	—	🔺
/video (default)	36.95 kB	37.39 kB	+450 B	+1.2%	—	🔺
/video (minimal)	37.02 kB	37.47 kB	+461 B	+1.2%	—	🔺
/video (minimal + hls)	175.23 kB	175.86 kB	+648 B	+0.4%	—	🔺

Presets (7)

Entry	Initial
/video (default)	37.39 kB
/video (default + hls)	175.57 kB
/video (minimal)	37.47 kB
/video (minimal + hls)	175.86 kB
/audio (default)	30.38 kB
/audio (minimal)	30.39 kB
/background	754 B

Media (9)

Entry	Initial
/media/background-video	575 B
/media/dash-video	213.24 kB
/media/hlsjs-video	139.79 kB
/media/mux-audio	162.25 kB
/media/mux-video	162.33 kB
/media/native-hls-video	7.39 kB
/media/simple-hls-audio-only	15.56 kB
/media/simple-hls-video	17.15 kB
/media/vimeo-video	10.58 kB

Skins (27)

Entry	Type	Initial
/tailwind.css	css	228 B
/video/minimal-skin.css	css	5.62 kB
/video/skin.css	css	5.57 kB
/video/minimal-skin	js	37.39 kB
/video/minimal-skin.tailwind	js	43.40 kB
/video/skin	js	37.31 kB
/video/skin.tailwind	js	43.30 kB
/audio/minimal-skin.css	css	3.72 kB
/audio/skin.css	css	3.62 kB
/audio/minimal-skin	js	30.30 kB
/audio/minimal-skin.tailwind	js	32.37 kB
/audio/skin	js	30.24 kB
/audio/skin.tailwind	js	34.38 kB
/background/skin.css	css	90 B
/background/skin	js	272 B
/live-video/minimal-skin.css	css	5.62 kB
/live-video/skin.css	css	5.57 kB
/live-video/minimal-skin	js	32.93 kB
/live-video/minimal-skin.tailwind	js	38.84 kB
/live-video/skin	js	32.91 kB
/live-video/skin.tailwind	js	38.92 kB
/live-audio/minimal-skin.css	css	3.72 kB
/live-audio/skin.css	css	3.62 kB
/live-audio/minimal-skin	js	21.74 kB
/live-audio/minimal-skin.tailwind	js	24.79 kB
/live-audio/skin	js	21.78 kB
/live-audio/skin.tailwind	js	24.91 kB

UI Components (32)

Entry	Initial
/ui/airplay-button	2.16 kB
/ui/alert-dialog	2.13 kB
/ui/buffering-indicator	2.06 kB
/ui/captions-button	2.08 kB
/ui/captions-radio-group	2.06 kB
/ui/cast-button	2.16 kB
/ui/controls	1.97 kB
/ui/error-dialog	2.15 kB
/ui/fullscreen-button	2.13 kB
/ui/gesture	2.17 kB
/ui/hotkey	2.19 kB
/ui/live-button	2.04 kB
/ui/menu	2.29 kB
/ui/mute-button	2.16 kB
/ui/pip-button	2.15 kB
/ui/play-button	2.09 kB
/ui/playback-rate	1.97 kB
/ui/playback-rate-button	2.12 kB
/ui/popover	2.51 kB
/ui/poster	2.00 kB
/ui/quality	1.94 kB
/ui/seek-button	2.14 kB
/ui/seek-indicator	2.04 kB
/ui/slider	2.16 kB
/ui/status-announcer	2.00 kB
/ui/status-indicator	2.02 kB
/ui/thumbnail	1.97 kB
/ui/time	1.99 kB
/ui/time-slider	2.25 kB
/ui/tooltip	2.51 kB
/ui/volume-indicator	1.98 kB
/ui/volume-slider	2.22 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes

Entries (14)

Entry	Initial
.	9.08 kB
/dom	17.27 kB
/dom/media/custom-media-element	2.09 kB
/dom/media/dash	209.07 kB
/dom/media/google-cast	4.04 kB
/dom/media/hls-js	135.68 kB
/dom/media/media-host	1.25 kB
/dom/media/media-played-ranges	576 B
/dom/media/mux	151.26 kB
/dom/media/native-hls	3.05 kB
/dom/media/simple-hls	16.47 kB
/dom/media/simple-hls-audio-only	14.92 kB
/dom/media/vimeo	9.86 kB
/media/predicate	573 B

🏷️ @videojs/element — no changes

Entries (2)

Entry	Initial
.	996 B
/context	943 B

📦 @videojs/store — no changes

Entries (3)

Entry	Initial
.	1.39 kB
/html	696 B
/react	360 B

🔧 @videojs/utils — no changes

Entries (10)

Entry	Initial
/array	104 B
/dom	2.26 kB
/events	319 B
/function	327 B
/object	275 B
/predicate	265 B
/string	231 B
/style	190 B
/time	478 B
/number	158 B

📦 @videojs/spf — no changes

Entries (4)

Entry	Initial
.	4.45 kB
/dom	6.33 kB
/hls	15.37 kB
/background-video	12.85 kB

---

ℹ️ How to interpret

JS sizes are initial static graph totals (minified + brotli). Lazy dynamic chunks are shown separately when present.

Icon	Meaning
✅	No change
🔺	Increased ≤ 10%
🔴	Increased > 10%
🔽	Decreased
🆕	New (no baseline)

Run pnpm size locally to check current initial sizes.

[luwes]

haha okay you covered it here. I'll let @mihar-22 sign off

[cursor]

Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 26bc1f4. Configure here.}