From ea0abbffb4e958e1c467f4daf05d259a84d6c60a Mon Sep 17 00:00:00 2001
From: Kasia Kucharczyk <2536609+kkucharc@users.noreply.github.com>
Date: Mon, 9 Nov 2020 02:35:39 +0100
Subject: [PATCH] fix: extended droppable area on the top of dashboards
 (#11525)

* Extended droppable area on the top

* Empty dashboard detects almost whole area to place first element
---
 .../src/dashboard/components/DashboardGrid.jsx      |  2 +-
 .../src/dashboard/stylesheets/dnd.less              | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/DashboardGrid.jsx b/superset-frontend/src/dashboard/components/DashboardGrid.jsx
index f9914139a1..6889c91ab3 100644
--- a/superset-frontend/src/dashboard/components/DashboardGrid.jsx
+++ b/superset-frontend/src/dashboard/components/DashboardGrid.jsx
@@ -171,7 +171,7 @@ class DashboardGrid extends React.PureComponent {
           ))}
 
           {/* make the area below components droppable */}
-          {editMode && (
+          {editMode && gridComponent.children.length > 0 && (
             <DragDroppable
               component={gridComponent}
               depth={depth}
diff --git a/superset-frontend/src/dashboard/stylesheets/dnd.less b/superset-frontend/src/dashboard/stylesheets/dnd.less
index d449bd9361..cb29c09a3c 100644
--- a/superset-frontend/src/dashboard/stylesheets/dnd.less
+++ b/superset-frontend/src/dashboard/stylesheets/dnd.less
@@ -52,6 +52,12 @@
   min-width: 16px;
 }
 
+.empty-droptarget:first-child {
+  .drop-indicator--bottom {
+    top: 24px;
+  }
+}
+
 .drop-indicator--right {
   top: 0;
   left: 100%;
@@ -123,7 +129,12 @@
   }
 
   & > .empty-droptarget:first-child {
-    height: 24px;
+    height: 48px;
     margin-top: -24px;
+    margin-bottom: -24px;
+  }
+
+  & > .empty-droptarget:only-child {
+    height: 80vh;
   }
 }