fix(popups): covered by labels.

css/_labels.scss

@@ -4,7 +4,7 @@
     top: 30px;
     right: 30px;
     transition: right 0.5s;
-    z-index: $filmstripVideosZ + 1;
+    z-index: $labelsZ;
 
     .circular-label {
         align-items: center;

css/_popover.scss

@@ -47,4 +47,5 @@
     border-radius: 3px;
     margin: -16px -24px;
     padding: 16px 24px;
+    z-index: $popoverZ;
 }

css/_transcription-subtitles.scss

@@ -12,7 +12,7 @@
     1px 0px 1px rgba(0,0,0,0.3),
     0px 0px 1px rgba(0,0,0,0.3);
     transform: translateX(-50%);
-    z-index: $filmstripVideosZ + 1;
+    z-index: $subtitlesZ;
 
     span {
         background: black;

css/_variables.scss

@@ -114,7 +114,10 @@ $zindex1: 1;
 $zindex2: 2;
 $zindex3: 3;
 $toolbarBackgroundZ: 4;
-$filmstripVideosZ: 5;
+$labelsZ: 5;
+$filmstripVideosZ: 6;
+$subtitlesZ: 7;
+$popoverZ: 8;
 $zindex10: 10;
 $reloadZ: 20;
 $poweredByZ: 100;
@@ -126,7 +129,6 @@ $tooltipsZ: 401;
 $dropdownMaskZ: 900;
 $dropdownZ: 901;
 $centeredVideoLabelZ: 1010;
-$popoverZ: 1015;
 $overlayZ: 1016;
 
 

css/_videolayout_default.scss

@@ -480,14 +480,6 @@
     z-index: $reloadZ; /*The reload button should appear on top of the header!*/
 }
 
-.audiolevel {
-    display: inline-block;
-    position: absolute;
-    z-index: $zindex0;
-    border-radius:1px;
-    pointer-events: none;
-}
-
 #dominantSpeaker {
     visibility: hidden;
     width: 300px;

css/filmstrip/_horizontal_filmstrip.scss

@@ -6,7 +6,6 @@
 }
 
 .horizontal-filmstrip .filmstrip {
-    position: absolute;
     bottom: 0;
     right: 0;
     padding: 10px 5px;

css/filmstrip/_tile_view.scss

@@ -42,10 +42,9 @@
         height: 100%;
         justify-content: center;
         left: 0;
-        position: fixed;
+        position: absolute;
         top: 0;
         width: 100%;
-        z-index: $filmstripVideosZ;
 
         @media (min-width: 581px) {
             &.shift-right {

css/filmstrip/_tile_view_overrides.scss

@@ -22,11 +22,6 @@
         display: none;
     }
 
-    #remoteConnectionMessage,
-    .watermark {
-        z-index: $filmstripVideosZ + 1;
-    }
-
     /**
      * The follow styling uses !important to override inline styles set with
      * javascript.

css/modals/invite/_invite_more.scss

@@ -7,10 +7,6 @@
         text-align: center;
         z-index: $zindex2;
         background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-
-        &.elevated {
-            z-index: $filmstripVideosZ + 1;
-        }
     }
 
     &-header {
@@ -98,11 +94,11 @@
                     border-radius: 4px;
                     cursor: pointer;
                 }
-    
+
                 &:hover > div:hover {
                     background-color: rgba(255, 255, 255, 0.2);
                 }
-    
+
                 & > :not(:last-child) {
                     margin-right: 16px;
                 }

css/modals/video-quality/_video-quality.scss

@@ -111,7 +111,3 @@
         display: none;
     }
 }
-
-#videoResolutionLabel {
-    z-index: $zindex3 + 1;
-}

react/features/conference/components/web/InviteMore.js

@@ -8,17 +8,11 @@ import { getParticipantCount } from '../../../base/participants';
 import { connect } from '../../../base/redux';
 import { beginAddPeople } from '../../../invite';
 import { isButtonEnabled, isToolboxVisible } from '../../../toolbox/functions.web';
-import { shouldDisplayTileView } from '../../../video-layout/functions';
 
 declare var interfaceConfig: Object;
 
 type Props = {
 
-    /**
-     * Whether tile view is enabled.
-     */
-    _tileViewEnabled: Boolean,
-
     /**
      * Whether to show the option to invite more people
      * instead of the subject.
@@ -44,14 +38,13 @@ type Props = {
  * @returns {React$Element<any>}
  */
 function InviteMore({
-    _tileViewEnabled,
     _visible,
     onClick,
     t
 }: Props) {
     return (
         _visible
-            ? <div className = { `invite-more-container${_tileViewEnabled ? ' elevated' : ''}` }>
+            ? <div className = 'invite-more-container'>
                 <div className = 'invite-more-header'>
                     {t('addPeople.inviteMoreHeader')}
                 </div>
@@ -81,7 +74,6 @@ function mapStateToProps(state) {
     const hide = interfaceConfig.HIDE_INVITE_MORE_HEADER;
 
     return {
-        _tileViewEnabled: shouldDisplayTileView(state),
         _visible: isToolboxVisible(state) && isButtonEnabled('invite') && isAlone && !hide
     };
 }