Fix drop overlay with single rowed grids

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,6 +55,16 @@ function Sortable({ id, children }) {
       >
         {children}
       </Box>
+      <Box
+        sx={{
+          width: "100%",
+          height: 0,
+          paddingTop: "100%",
+          pointerEvents: "none",
+          position: "absolute",
+          top: 0,
+        }}
+      >
         <Box ref={setDroppableNodeRef} style={sortDropStyle} bg="primary" />
         <Box
           ref={setGroupNodeRef}
@@ -63,6 +72,7 @@ function Sortable({ id, children }) {
           sx={{ borderColor: "primary" }}
         />
       </Box>
+    </Box>
   );
 }