From 78cf834e6fb3c4a1e1630ea2f6e9a1ad7ef04afe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <34163393+amtins@users.noreply.github.com>
Date: Wed, 10 Nov 2021 20:04:08 +0100
Subject: [PATCH] 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
---
 src/css/components/_adaptive.scss | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/css/components/_adaptive.scss b/src/css/components/_adaptive.scss
index 94c33961e9..16ad060829 100644
--- 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;
+      }
     }
   }