From cd07c3e6520a7c1a37cd042b2ad00426d78462bb Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peterholmberg@users.noreply.github.com>
Date: Tue, 26 Nov 2019 12:58:20 +0100
Subject: [PATCH] Fix: Disable draggable panels on small devices (#20629)

* fix for draggable on mobile

* elaborate in code comment
---
 public/app/features/dashboard/dashgrid/DashboardGrid.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
index eaf63186b0b..d437124e82f 100644
--- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
@@ -58,11 +58,17 @@ function GridWrapper({
     }
   }
 
+  /*
+    Disable draggable if mobile device, solving an issue with unintentionally
+     moving panels. https://github.com/grafana/grafana/issues/18497
+  */
+  const draggable = width <= 420 ? false : isDraggable;
+
   return (
     <ReactGridLayout
       width={lastGridWidth}
       className={className}
-      isDraggable={isDraggable}
+      isDraggable={draggable}
       isResizable={isResizable}
       containerPadding={[0, 0]}
       useCSSTransforms={false}