fix(volume-slider): modify positioning so slider fits popup width

css/_popup_menu.scss

@@ -41,21 +41,37 @@
         }
     }
 
-    &__text,
+    &__text {
-    &__slider {
         display: inline-block;
         vertical-align: middle;
     }
 
-    &__slider {
+    &__contents {
-        width: 50px;
+        display: flex;
+
+        /**
+         * Positioning styles on the slider and its container are used to make
+         * the container fit the popup width, by removing the slider from the
+         * page flow, and then making the slider fit the container.
+         */
+        .popupmenu__slider_container {
+            position: relative;
+            width: 100%;
+
+            .popupmenu__slider {
+                bottom: 50%;
+                position: absolute;
+                top: 50%;
+                width: 100%;
+            }
+        }
     }
 
     &__icon {
         vertical-align: middle;
         position: relative;
         display: inline-block;
-        width: 20px;
+        min-width: 20px;
         height: 100%;
         text-align: center;
 

modules/UI/videolayout/RemoteVideo.js

@@ -375,12 +375,14 @@ RemoteVideo.prototype._generatePopupMenuSliderItem = function (options) {
         <span class='popupmenu__icon'>
             <i class=${options.icon}></i>
         </span>
-        <input class='popupmenu__slider'
+        <div class='popupmenu__slider_container'>
-            type='range'
+            <input class='popupmenu__slider'
-            min='0'
+                type='range'
-            max=${options.maxValue || 100}
+                min='0'
-            value=${options.initialValue || 0}>
+                max=${options.maxValue || 100}
-        </input>
+                value=${options.initialValue || 0}>
+            </input>
+        </div>
     </div>`;
 
     const menuItem = document.createElement('li');