Prevent DND targetting either above or below the screen/layout, and fix bug determinging whether a drop target is valid

packages/client/src/components/Component.svelte

@@ -174,7 +174,7 @@
 
   // Drag and drop helper tags
   $: draggable = interactive && !isLayout && !isScreen
-  $: droppable = interactive
+  $: droppable = interactive && !isLayout && !isScreen
   $: dropInside = interactive && definition?.hasChildren && !children.length
 </script>
 

packages/client/src/components/preview/DNDHandler.svelte

@@ -105,9 +105,14 @@
     const element = e.target.closest("[data-type='component']")
     if (
       element &&
-      element.dataset.droppable &&
+      element.dataset.droppable === "true" &&
       element.dataset.id !== dragInfo.target
     ) {
+      // Do nothing if this is the same target
+      if (element.dataset.id === dropInfo?.target) {
+        return
+      }
+
       // Ensure the dragging flag is always set.
       // There's a bit of a race condition between the app reinitialisation
       // after selecting the DND component and setting this the first time