fix: volume button empty space (#7466)

When responsive mode is used and the player layout is small or smaller, an empty space appears to the right of the mute button on hover. Fixes #7465
videojs · Nov 10, 2021 · 78cf834 · 78cf834
1 parent fdb87d8
commit 78cf834
Showing 1 changed file with 8 additions and 5 deletions.
diff --git a/src/css/components/_adaptive.scss b/src/css/components/_adaptive.scss
@@ -39,11 +39,14 @@
 
     // Reset the size of the volume panel to the default so we don't see a big
     // empty space to the right of the mute button.
-    .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
-    .vjs-volume-panel.vjs-volume-panel-horizontal:active,
-    .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active {
-      width: auto;
-      width: initial;
+    .vjs-volume-panel.vjs-volume-panel-horizontal {
+      &:hover,
+      &:active,
+      &.vjs-slider-active,
+      &.vjs-hover {
+        width: auto;
+        width: initial;
+      }
     }
   }