fix: rendition-menu visual improvements (#1131)

Pintorado · web-flow · commit 59a2aaaae614 · 2025-05-28T16:58:00.000-05:00
Closes #1122
diff --git a/packages/mux-player/src/themes/classic/classic.html b/packages/mux-player/src/themes/classic/classic.html
@@ -34,6 +34,10 @@
       position: absolute; /* ensure they don't take up space in DOM on load */
     }
 
+    media-rendition-menu {
+      min-width: 140px;
+    }
+
     :host([audio]) {
       --media-preview-time-border-radius: 3px;
       --media-preview-time-text-shadow: none;
diff --git a/packages/mux-player/src/themes/gerwig/gerwig.html b/packages/mux-player/src/themes/gerwig/gerwig.html
@@ -167,6 +167,10 @@
       --media-menu-item-hover-outline: var(--_accent-color) solid 1px;
     }
 
+    media-rendition-menu {
+      min-width: 140px;
+    }
+
     /* The icon is a circle so make it 16px high instead of 14px for more balance. */
     media-audio-track-menu-button {
       --media-control-padding: 5px;
@@ -960,7 +964,7 @@
           }
 
           [aria-checked='false'] .indicator {
-            display: none;
+            opacity: 0;
           }
         </style>
         <svg viewBox="0 0 14 18" class="indicator">

Original file line number	Diff line number	Diff line change
`@@ -167,6 +167,10 @@`
`167`	`167`	`--media-menu-item-hover-outline: var(--_accent-color) solid 1px;`
`168`	`168`	`}`
`169`	`169`
	`170`	`+ media-rendition-menu {`
	`171`	`+ min-width: 140px;`
	`172`	`+ }`
	`173`	`+`
`170`	`174`	`/* The icon is a circle so make it 16px high instead of 14px for more balance. */`
`171`	`175`	`media-audio-track-menu-button {`
`172`	`176`	`--media-control-padding: 5px;`
`@@ -960,7 +964,7 @@`
`960`	`964`	`}`
`961`	`965`
`962`	`966`	`[aria-checked='false'] .indicator {`
`963`		`- display: none;`
	`967`	`+ opacity: 0;`
`964`	`968`	`}`
`965`	`969`	`</style>`
`966`	`970`	`<svg viewBox="0 0 14 18" class="indicator">`