fix(video-quality-label): adjust z-indexing clashes with filmstrip

With AtlasKit InlineDialog, the filmstrip z-index in vertical
filmstrip mode was adjusted as it had to be set to fixed position
for the dialogs to automagically be position fixed. This left
behind a regression where the filmstrip z-index was the same as
the video quality label, but came later in the dom, so the label
was not clickable. This commit modifies the z-index of the
vertical filmstrip to account for clicking of the video quality
label.

css/_filmstrip.scss

@@ -157,8 +157,10 @@
 
     .remote-videos-container {
         transition: opacity 1s;
+    }
 
-        &.hide-videos {
+    &.hide-videos {
+        .remote-videos-container {
             opacity: 0;
             pointer-events: none;
         }

css/_variables.scss

@@ -107,7 +107,7 @@ $reloadZ: 20;
 $poweredByZ: 100;
 $ringingZ: 300;
 $sideToolbarContainerZ: 300;
-$toolbarZ: 400;
+$toolbarZ: 350;
 $tooltipsZ: 401;
 $dropdownMaskZ: 900;
 $dropdownZ: 901;

css/_vertical_filmstrip_overrides.scss

@@ -15,7 +15,18 @@
          * any parent is also fixed.
          */
         position: fixed;
-        z-index: $tooltipsZ;
+
+        /**
+         * z-index adjusting is needed because the video state indicator has to
+         * display over the filmstrip when no videos are displayed but still be
+         * clickable but its inline dialogs must display over the video state
+         * indicator when videos are displayed.
+         */
+        z-index: calc(#{$tooltipsZ} + 1);
+
+        &.hide-videos {
+            z-index: calc(#{$tooltipsZ} - 1);
+        }
 
         /**
          * Hide videos by making them slight to the right.
@@ -28,6 +39,15 @@
                 bottom: auto;
                 right: -196px;
             }
+
+            /**
+             * Remove horizontal filmstrip padding used to prevent videos from
+             * overlapping the left-side toolbar. An id selector is used to
+             * match id specificity with filmstrip styles.
+             */
+            &#remoteVideos {
+                padding-left: 0;
+            }
         }
 
         #filmstripLocalVideo {

modules/UI/videolayout/Filmstrip.js

@@ -46,7 +46,8 @@ const Filmstrip = {
         }
 
         APP.store.dispatch(setFilmstripRemoteVideosVisibility(shouldShow));
-        this.filmstripRemoteVideos.toggleClass('hide-videos', !shouldShow);
+        $(`.${this.filmstripContainerClassName}`)
+            .toggleClass('hide-videos', !shouldShow);
     },
 
     /**