Dashboard: Revert descending z-index changes (#83466)

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx

@@ -358,15 +358,6 @@ const getStyles = (theme: GrafanaTheme2) => {
       display: 'flex',
       flexDirection: 'column',
 
-      '> *': {
-        zIndex: 0,
-      },
-
-      // matches .react-grid-item styles in _dashboard_grid.scss to ensure any contained tooltips occlude adjacent panels
-      '&:hover, &:active, &:focus': {
-        zIndex: theme.zIndex.activePanel,
-      },
-
       '.show-on-hover': {
         opacity: '0',
         visibility: 'hidden',

packages/grafana-ui/src/themes/_variables.scss.tmpl.ts

@@ -161,7 +161,6 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www
 // -------------------------
 // Used for a bird's eye view of components dependent on the z-axis
 // Try to avoid customizing these :)
-$zindex-active-panel: ${theme.zIndex.activePanel};
 $zindex-dropdown: ${theme.zIndex.dropdown};
 $zindex-navbar-fixed: ${theme.zIndex.navbarFixed};
 $zindex-sidemenu: ${theme.zIndex.sidemenu};

public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx

@@ -91,7 +91,6 @@ export class SplitPaneWrapper extends PureComponent<React.PropsWithChildren<Prop
 
     return (
       <SplitPane
-        className={styles.splitPane}
         split={splitOrientation}
         minSize={minSize}
         maxSize={maxSize}
@@ -115,9 +114,6 @@ export class SplitPaneWrapper extends PureComponent<React.PropsWithChildren<Prop
 
 const getStyles = (theme: GrafanaTheme2, hasSplit: boolean) => {
   return {
-    splitPane: css({
-      overflow: 'visible !important',
-    }),
     resizer: css({
       display: hasSplit ? 'block' : 'none',
     }),

public/app/features/dashboard-scene/scene/DashboardControls.tsx

@@ -74,7 +74,7 @@ function getStyles(theme: GrafanaTheme2) {
       position: 'sticky',
       top: 0,
       background: theme.colors.background.canvas,
-      zIndex: theme.zIndex.activePanel,
+      zIndex: theme.zIndex.navbarFixed,
       padding: theme.spacing(2, 0),
       width: '100%',
       marginLeft: 'auto',

public/app/features/trails/DataTrail.tsx

@@ -245,7 +245,7 @@ function getStyles(theme: GrafanaTheme2) {
       flexWrap: 'wrap',
       position: 'sticky',
       background: theme.isDark ? theme.colors.background.canvas : theme.colors.background.primary,
-      zIndex: theme.zIndex.activePanel + 1,
+      zIndex: theme.zIndex.navbarFixed,
       top: 0,
     }),
   };

public/sass/_variables.generated.scss

@@ -163,7 +163,6 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www
 // -------------------------
 // Used for a bird's eye view of components dependent on the z-axis
 // Try to avoid customizing these :)
-$zindex-active-panel: 999;
 $zindex-dropdown: 1030;
 $zindex-navbar-fixed: 1000;
 $zindex-sidemenu: 1020;

public/sass/components/_dashboard_grid.scss

@@ -13,7 +13,6 @@
   &:hover {
     .react-resizable-handle {
       visibility: visible;
-      z-index: $zindex-active-panel;
     }
   }
 }
@@ -86,22 +85,11 @@
   }
 }
 
-// Hack to prevent panel overlap during drag/hover (due to descending z-index assignment)
-.react-grid-item:not(.context-menu-open, .resizing) {
-  &:hover,
-  &:active,
-  &:focus {
-    z-index: $zindex-active-panel !important;
-  }
-}
-
 // Hack for preventing panel menu overlapping.
-.react-grid-item.context-menu-open,
-.react-grid-item.resizing,
 .react-grid-item.resizing.panel,
 .react-grid-item.panel.dropdown-menu-open,
 .react-grid-item.react-draggable-dragging.panel {
-  z-index: $zindex-dropdown !important;
+  z-index: $zindex-dropdown;
 }
 
 // Disable animation on initial rendering and enable it when component has been mounted.