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};