Dashboard: Overflow and z-index adjustments (#75597)

packages/grafana-data/src/themes/zIndex.ts

@@ -1,6 +1,7 @@
 // We need to centralize the zIndex definitions as they work
 // like global values in the browser.
 export const zIndex = {
+  activePanel: 999,
   navbarFixed: 1000,
   sidemenu: 1020,
   dropdown: 1030,

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

@@ -358,6 +358,15 @@ 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,6 +161,7 @@ $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

@@ -89,6 +89,7 @@ export class SplitPaneWrapper extends PureComponent<React.PropsWithChildren<Prop
 
     return (
       <SplitPane
+        className={styles.splitPane}
         split={splitOrientation}
         minSize={minSize}
         maxSize={maxSize}
@@ -144,6 +145,9 @@ const getStyles = (theme: GrafanaTheme2, hasSplit: boolean) => {
   `;
 
   return {
+    splitPane: css({
+      overflow: 'visible !important',
+    }),
     resizerV: cx(
       resizer,
       css`

public/sass/_variables.generated.scss

@@ -163,6 +163,7 @@ $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,6 +13,7 @@
   &:hover {
     .react-resizable-handle {
       visibility: visible;
+      z-index: $zindex-active-panel;
     }
   }
 }
@@ -90,8 +91,7 @@
   &:hover,
   &:active,
   &:focus {
-    // above other panels, but below lowest pre-defined index in zIndex.ts
+    z-index: $zindex-active-panel !important;
-    z-index: 999 !important;
   }
 }