From 67e2430197aba83a25ab6854b38c684cefbbcb6b Mon Sep 17 00:00:00 2001
From: Josh Hunt <joshhunt@users.noreply.github.com>
Date: Tue, 17 Oct 2023 10:11:52 +0000
Subject: [PATCH] Dashboard: Fix panels overlapping Save Drawer (#76675)

* Dashboard: Fix panels overlapping

* comments
---
 .../features/dashboard/dashgrid/DashboardGrid.tsx    | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
index 2460cc5059a..924944700dc 100644
--- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
@@ -153,6 +153,7 @@ export class DashboardGrid extends PureComponent<Props> {
       const panelClasses = classNames({ 'react-grid-item--fullscreen': panel.isViewing });
 
       // used to allow overflowing content to show on top of the next panel
+      // requires parent create stacking context to prevent overlap with parent elements
       const descIndex = this.props.dashboard.panels.length - panelElements.length;
 
       panelElements.push(
@@ -230,9 +231,18 @@ export class DashboardGrid extends PureComponent<Props> {
      * We have a parent with "flex: 1 1 0" we need to reset it to "flex: 1 1 auto" to have the AutoSizer
      * properly working. For more information go here:
      * https://github.com/bvaughn/react-virtualized/blob/master/docs/usingAutoSizer.md#can-i-use-autosizer-within-a-flex-container
+     *
+     * pos: rel + z-index is required to create a new stacking context to contain the escalating z-indexes of the panels
      */
     return (
-      <div style={{ flex: '1 1 auto', display: this.props.editPanel ? 'none' : undefined }}>
+      <div
+        style={{
+          flex: '1 1 auto',
+          position: 'relative',
+          zIndex: 1,
+          display: this.props.editPanel ? 'none' : undefined,
+        }}
+      >
         <AutoSizer disableHeight>
           {({ width }) => {
             if (width === 0) {