fix(volume): vertical slider causes viewport overflow in rtl layout

Fixes videojs#7743
amtins · Jun 13, 2023 · 5d4b28c · 5d4b28c
1 parent 2b0df25
commit 5d4b28c
Showing 1 changed file with 8 additions and 7 deletions.
diff --git a/src/css/components/_volume.scss b/src/css/components/_volume.scss
@@ -51,7 +51,11 @@
     position: relative;
 
     &.vjs-volume-vertical {
-      left: -3.5em;
+      height: 8em;
+      width: 3em;
+
+      pointer-events: initial;
+
       @include transition(left 0s);
     }
     $transition-property: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
@@ -75,10 +79,6 @@
 }
 
 .video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
-  height: 8em;
-  width: 3em;
-  left: -3000em;
-
   $transition-property: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s;
   @include transition($transition-property)
 }
@@ -192,10 +192,11 @@
 }
 
 .video-js .vjs-volume-vertical {
-  width: 3em;
-  height: 8em;
+  left: -3.5em;
   bottom: 8em;
 
+  pointer-events: none;
+
   @include background-color-with-alpha($primary-background-color, $primary-background-transparency);
 }