Merge pull request #5307 from relative-ci/fix-z-index

fix(ui): Update layer z-index for tooltip, hovercard and dialog

Author: vio

packages/ui/src/app/app.module.css

@@ -52,7 +52,7 @@
 
   .header {
     position: fixed;
-    z-index: var(--layer-high);
+    z-index: calc(var(--layer-xhigh) + 2);
     left: 0;
     top: 0;
     right: 0;
@@ -62,6 +62,6 @@
   .tabsContainer {
     position: sticky;
     top: var(--header-height);
-    z-index: calc(var(--layer-high) - 1);
+    z-index: calc(var(--layer-xhigh) + 1);
   }
 }

packages/ui/src/components/metrics-treemap/metrics-treemap.module.css

@@ -297,7 +297,7 @@
 }
 
 .tooltip {
-  z-index: var(--layer-xxhigh);
+  z-index: var(--layer-high);
   padding: var(--space-xsmall) var(--space-small);
   border-radius: var(--radius-medium);
   width: calc(100vw - 2 * var(--space-small));

packages/ui/src/css/variables.css

@@ -188,8 +188,10 @@
   --layer-xlow: 1;
   --layer-low: 10;
   --layer: 100;
+  /** for components with overlays (tooltips, hovercards) */
   --layer-high: 1000;
   --layer-xhigh: 10000;
+  /** for dialogs/modals */
   --layer-xxhigh: 100000;
 
   --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);

packages/ui/src/ui/dialog/dialog.module.css

@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 99999 !important;
+  z-index: var(--layer-xxhigh);
 }
 
 .backdrop::before {
@@ -13,7 +13,6 @@
   width: 100%;
   height: 100%;
   background: var(--color-backdrop);
-  filter:
 }
 
 .dialog {
@@ -27,6 +26,7 @@
   padding: var(--dialog-padding);
   background: var(--color-background);
   box-shadow: 0 0 var(--space-medium) var(--color-shadow);
+  z-index: var(--layer-xxhigh);
 }
 
 .header {

packages/ui/src/ui/hover-card/hover-card.module.css

@@ -17,7 +17,7 @@
 }
 
 .hoverCard {
-  z-index: var(--layer-xxhigh);
+  z-index: var(--layer-high);
   padding: var(--space-small);
   border-radius: var(--radius-medium);
   width: calc(100vw - 2 * var(--space-small));

packages/ui/src/ui/tooltip/tooltip.module.css

@@ -11,7 +11,7 @@
 }
 
 .tooltip {
-  z-index: var(--layer-xxhigh);
+  z-index: var(--layer-high);
   padding: var(--space-xxxsmall) var(--space-xxsmall);
   border-radius: var(--radius-small);
   background: var(--color-text);