Prevent dragging the screen or layout components, and prevent dragging any layout components when previewing a screen

packages/client/src/components/ClientApp.svelte

@@ -105,7 +105,10 @@
               <div id="app-root">
                 <CustomThemeWrapper>
                   {#key $screenStore.activeLayout._id}
-                    <Component instance={$screenStore.activeLayout.props} />
+                    <Component
+                      isLayout
+                      instance={$screenStore.activeLayout.props}
+                    />
                   {/key}
 
                   <!-- Layers on top of app -->

packages/client/src/components/Component.svelte

@@ -11,6 +11,8 @@
   import Placeholder from "components/app/Placeholder.svelte"
 
   export let instance = {}
+  export let isLayout = false
+  export let isScreen = false
 
   // The enriched component settings
   let enrichedSettings
@@ -178,7 +180,8 @@
       data-type={interactive ? "component" : ""}
       data-id={id}
       data-name={name}
-      data-droppable={definition?.hasChildren || false}
+      data-draggable={interactive && !isLayout && !isScreen ? "true" : "false"}
+      data-droppable={definition?.hasChildren ? "true" : "false"}
     >
       <svelte:component this={constructor} {...componentSettings}>
         {#if children.length}
@@ -197,7 +200,7 @@
   .component {
     display: contents;
   }
-  .component > :global(*:hover) {
+  [data-draggable="true"] {
     cursor: pointer;
   }
 </style>

packages/client/src/components/Screen.svelte

@@ -22,6 +22,6 @@
 <!-- Ensure to fully remount when screen changes -->
 {#key screenDefinition?._id}
   <Provider key="url" data={params}>
-    <Component instance={screenDefinition} />
+    <Component isScreen instance={screenDefinition} />
   </Provider>
 {/key}

packages/client/src/utils/styleable.js

@@ -23,7 +23,11 @@ export const styleable = (node, styles = {}) => {
   let applyHoverStyles
   let selectComponent
 
-  node.setAttribute("draggable", true)
+  // Allow dragging if required
+  const parent = node.closest("[data-type='component']")
+  if (parent && parent.dataset.draggable === "true") {
+    node.setAttribute("draggable", true)
+  }
 
   // Creates event listeners and applies initial styles
   const setupStyles = (newStyles = {}) => {