From f496adae1d431525864220372d23a24db079f181 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Fri, 21 May 2021 16:12:32 +1000
Subject: [PATCH] Fix drop overlay with single rowed grids

---
 src/components/drag/SortableTile.js | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/drag/SortableTile.js b/src/components/drag/SortableTile.js
index c2acff5..af86a86 100644
--- a/src/components/drag/SortableTile.js
+++ b/src/components/drag/SortableTile.js
@@ -43,11 +43,10 @@ function Sortable({ id, children }) {
     borderWidth: "4px",
     borderRadius: "4px",
     borderStyle: over?.id === `__group__${id}` ? "solid" : "none",
-    pointerEvents: "none",
   };
 
   return (
-    <Box style={{ position: "relative" }}>
+    <Box sx={{ position: "relative" }}>
       <Box
         ref={setDraggableNodeRef}
         style={dragStyle}
@@ -56,12 +55,23 @@ function Sortable({ id, children }) {
       >
         {children}
       </Box>
-      <Box ref={setDroppableNodeRef} style={sortDropStyle} bg="primary" />
       <Box
-        ref={setGroupNodeRef}
-        style={groupDropStyle}
-        sx={{ borderColor: "primary" }}
-      />
+        sx={{
+          width: "100%",
+          height: 0,
+          paddingTop: "100%",
+          pointerEvents: "none",
+          position: "absolute",
+          top: 0,
+        }}
+      >
+        <Box ref={setDroppableNodeRef} style={sortDropStyle} bg="primary" />
+        <Box
+          ref={setGroupNodeRef}
+          style={groupDropStyle}
+          sx={{ borderColor: "primary" }}
+        />
+      </Box>
     </Box>
   );
 }