Dashboard: Set descending z-index of panels in a dashboard (v2) (#75328)

Co-authored-by: Adela Almasan <adela.almasan@grafana.com>

public/app/features/dashboard/dashgrid/DashboardGrid.tsx

@@ -152,10 +152,14 @@ export class DashboardGrid extends PureComponent<Props> {
     for (const panel of this.props.dashboard.panels) {
       const panelClasses = classNames({ 'react-grid-item--fullscreen': panel.isViewing });
 
+      // used to allow overflowing content to show on top of the next panel
+      const descIndex = this.props.dashboard.panels.length - panelElements.length;
+
       panelElements.push(
         <GrafanaGridItem
           key={panel.key}
           className={panelClasses}
+          descendingOrderIndex={descIndex}
           data-panelid={panel.id}
           gridPos={panel.gridPos}
           gridWidth={gridWidth}
@@ -277,6 +281,7 @@ export class DashboardGrid extends PureComponent<Props> {
 interface GrafanaGridItemProps extends React.HTMLAttributes<HTMLDivElement> {
   gridWidth?: number;
   gridPos?: GridPos;
+  descendingOrderIndex?: number;
   isViewing: boolean;
   windowHeight: number;
   windowWidth: number;
@@ -291,7 +296,7 @@ const GrafanaGridItem = React.forwardRef<HTMLDivElement, GrafanaGridItemProps>((
   let width = 100;
   let height = 100;
 
-  const { gridWidth, gridPos, isViewing, windowHeight, windowWidth, ...divProps } = props;
+  const { gridWidth, gridPos, isViewing, windowHeight, windowWidth, descendingOrderIndex, ...divProps } = props;
   const style: CSSProperties = props.style ?? {};
 
   if (isViewing) {
@@ -321,7 +326,7 @@ const GrafanaGridItem = React.forwardRef<HTMLDivElement, GrafanaGridItemProps>((
 
   // props.children[0] is our main children. RGL adds the drag handle at props.children[1]
   return (
-    <div {...divProps} ref={ref}>
+    <div {...divProps} style={{ ...divProps.style, zIndex: descendingOrderIndex }} ref={ref}>
       {/* Pass width and height to children as render props */}
       {[props.children[0](width, height), props.children.slice(1)]}
     </div>

public/sass/components/_dashboard_grid.scss

@@ -85,6 +85,15 @@
   }
 }
 
+// Hack to prevent panel overlap during drag/hover (due to descending z-index assignment)
+.react-grid-item {
+  &:hover,
+  &:active,
+  &:focus {
+    z-index: 100 !important;
+  }
+}
+
 // Hack for preventing panel menu overlapping.
 .react-grid-item.resizing.panel,
 .react-grid-item.panel.dropdown-menu-open,