From e2dcd5184a8f0a60e46d85e9b8366c99457b936b Mon Sep 17 00:00:00 2001
From: Leon Sorokin <leeoniya@gmail.com>
Date: Thu, 5 Oct 2023 22:46:15 -0500
Subject: [PATCH] Dashboard: Overflow and z-index adjustments (#75597)

---
 packages/grafana-data/src/themes/zIndex.ts               | 1 +
 .../src/components/PanelChrome/PanelChrome.tsx           | 9 +++++++++
 packages/grafana-ui/src/themes/_variables.scss.tmpl.ts   | 1 +
 .../components/SplitPaneWrapper/SplitPaneWrapper.tsx     | 4 ++++
 public/sass/_variables.generated.scss                    | 1 +
 public/sass/components/_dashboard_grid.scss              | 4 ++--
 6 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-data/src/themes/zIndex.ts b/packages/grafana-data/src/themes/zIndex.ts
index 241c1c29cec..1423bbaf664 100644
--- a/packages/grafana-data/src/themes/zIndex.ts
+++ b/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,
diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
index 6250bdd210d..474ace6c3ef 100644
--- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
+++ b/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',
diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
index 75a8ad0d4af..5651553f125 100644
--- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+++ b/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};
diff --git a/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx b/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx
index 4389de57187..a282feb0f3b 100644
--- a/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx
+++ b/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`
diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss
index 1a2e11a0651..290ebadaedd 100644
--- a/public/sass/_variables.generated.scss
+++ b/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;
diff --git a/public/sass/components/_dashboard_grid.scss b/public/sass/components/_dashboard_grid.scss
index 8058944e5f5..a0f40c3b105 100644
--- a/public/sass/components/_dashboard_grid.scss
+++ b/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: 999 !important;
+    z-index: $zindex-active-panel !important;
   }
 }