Make stacking contexts explicit (#14854)

.vscode/extensions.json

@@ -13,6 +13,7 @@
     "dbaeumer.vscode-eslint",
     "foxundermoon.shell-format",
     "timonwong.shellcheck",
+    "felixfbecker.css-stacking-contexts",
   ],
   "unwantedRecommendations": ["ms-vscode.vscode-typescript-tslint-plugin", "eg2.tslint"],
 }

client/branded/src/components/panel/Panel.scss

@@ -1,5 +1,12 @@
 @import '../../../../shared/src/components/Resizable';
 
+.resizable-panel {
+    isolation: isolate;
+    min-height: 6rem;
+    max-height: calc(100% - 3rem);
+    width: 100%;
+}
+
 .panel {
     flex: 1 1 50%;
     min-height: 0;
@@ -13,12 +20,6 @@
     border-top: 1px solid var(--border-color);
     width: 100%;
 
-    &--resizable {
-        min-height: 6rem;
-        max-height: calc(100% - 3rem);
-        width: 100%;
-    }
-
     &__empty {
         flex: 1;
         display: flex;

client/branded/src/components/panel/Panel.tsx

@@ -68,7 +68,7 @@ interface PanelItem extends Tab<string> {
  *
  * Other components can contribute panel items to the panel.
  */
-export class Panel extends React.PureComponent<Props, State> {
+class Panel extends React.PureComponent<Props, State> {
     public state: State = {}
 
     private subscriptions = new Subscription()
@@ -168,7 +168,7 @@ function byPriority(a: { priority: number }, b: { priority: number }): number {
 /** A wrapper around Panel that makes it resizable. */
 export const ResizablePanel: React.FunctionComponent<Props> = props => (
     <Resizable
-        className="panel--resizable"
+        className="resizable-panel"
         handlePosition="top"
         defaultSize={350}
         storageKey="panel-size"

client/browser/src/shared.scss

@@ -43,6 +43,7 @@ $body-bg-color-light: #ffffff;
 }
 
 .command-list-popover {
+    isolation: isolate;
     z-index: 1100; // high enough to prevent most things from obscuring it
     border: 1px solid var(--dropdown-border-color);
     border-radius: 3px;

client/browser/src/shared/code-hosts/shared/HoverOverlay.scss

@@ -1,6 +1,6 @@
-@import '../../global-styles/variables.scss';
 @import '../../../../../shared/src/hover/HoverOverlay.scss';
 
 .hover-overlay {
-    z-index: $default-z-index;
+    isolation: isolate;
+    z-index: 2000;
 }

client/browser/src/shared/global-styles/variables.scss

@@ -1 +0,0 @@
-$default-z-index: 2000;

client/web/src/components/ConnectionPopover.scss

@@ -2,6 +2,7 @@ $popover-item-padding-h: 0.75rem;
 $popover-item-padding-v: 0.325rem;
 
 .connection-popover {
+    isolation: isolate;
     display: flex;
     flex-direction: column;
 

client/web/src/enterprise/productSubscription/ProductCertificate.scss

@@ -15,13 +15,12 @@
     }
 
     &__logo {
+        flex: 0;
         height: 5rem;
         z-index: 9;
     }
-    .btn {
-        z-index: 9;
-    }
     .card-footer {
+        flex: 0;
         z-index: 0;
     }
 }

client/web/src/repo/RepoRevisionContainer.scss

@@ -38,6 +38,7 @@
     }
 
     &__content {
+        isolation: isolate;
         flex: 1 1 auto;
 
         display: flex;

client/web/src/repo/RepoRevisionSidebar.scss

@@ -1,6 +1,7 @@
 @import './RepoRevisionSidebarSymbols';
 
 .repo-revision-sidebar {
+    isolation: isolate;
     flex: 1 1 auto;
     min-height: 0;
 
@@ -21,7 +22,6 @@
         width: 1.25rem;
         height: 1.25rem;
         margin-right: -1.25rem;
-        z-index: 1;
 
         .icon {
             width: 1.125rem;

client/web/src/repo/RevisionsPopover.scss

@@ -1,6 +1,7 @@
 @import '../components/ConnectionPopover';
 
 .revisions-popover {
+    isolation: isolate;
     width: 35rem;
 
     &-git-commit-node {

client/web/src/repo/actions/InstallBrowserExtensionPopover.scss

@@ -1,4 +1,5 @@
 .install-browser-extension-popover {
+    isolation: isolate;
     width: 31rem;
     max-width: 100vw;
     top: -4px !important;

client/web/src/site-admin/SiteAdminSidebar.scss

@@ -1,3 +1,4 @@
 .site-admin-sidebar {
+    isolation: isolate;
     width: 10rem;
 }

client/web/src/tree/Tree.scss

@@ -1,4 +1,5 @@
 .tree {
+    isolation: isolate;
     flex: 1 1 auto;
     width: 100%;
     overflow: auto;

client/web/src/user/settings/UserSettingsSidebar.scss

@@ -1,3 +1,4 @@
 .user-settings-sidebar {
+    isolation: isolate;
     width: 12rem;
 }