From e4d1d8d70cd553c262e1095bb3d77f4271b111d6 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Fri, 28 Oct 2022 15:36:37 +0100
Subject: [PATCH] Dashboards: Add workaround for react-grid-layout rearrange
 bug (#57832)

---
 .../features/dashboard/containers/DashboardPage.tsx    | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx
index 3320cd423cf..1a2c42a5f45 100644
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.tsx
@@ -299,9 +299,17 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
       return;
     }
 
+    // Move all panels down by the height of the "add panel" widget.
+    // This is to work around an issue with react-grid-layout that can mess up the layout
+    // in certain configurations. (See https://github.com/react-grid-layout/react-grid-layout/issues/1787)
+    const addPanelWidgetHeight = 8;
+    for (const panel of dashboard.panelIterator()) {
+      panel.gridPos.y += addPanelWidgetHeight;
+    }
+
     dashboard.addPanel({
       type: 'add-panel',
-      gridPos: { x: 0, y: 0, w: 12, h: 8 },
+      gridPos: { x: 0, y: 0, w: 12, h: addPanelWidgetHeight },
       title: 'Panel Title',
     });