Allow dropping on empty space below tree

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentScrollWrapper.svelte

@@ -1,5 +1,7 @@
 <script>
   import { setContext } from "svelte"
+  import { dndStore } from "./dndStore"
+  import { notifications } from "@budibase/bbui"
 
   let scrollRef
 
@@ -50,9 +52,23 @@
   setContext("scroll", {
     scrollTo,
   })
+
+  const onDrop = async () => {
+    try {
+      await dndStore.actions.drop()
+    } catch (error) {
+      console.error(error)
+      notifications.error("Error saving component")
+    }
+  }
 </script>
 
-<div bind:this={scrollRef}>
+<div
+  bind:this={scrollRef}
+  on:drop={onDrop}
+  ondragover="return false"
+  ondragenter="return false"
+>
   <slot />
 </div>
 

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte

@@ -68,7 +68,8 @@
     closedNodes = closedNodes
   }
 
-  const onDrop = async () => {
+  const onDrop = async e => {
+    e.stopPropagation()
     try {
       await dndStore.actions.drop()
     } catch (error) {