From cdc2092264aed0672dc92136fae570fce4a126b6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 8 Aug 2024 16:30:31 +0100
Subject: [PATCH] Only apply grid action when component is an immediate child
 of a grid container

---
 packages/client/src/components/Component.svelte | 9 ++++++++-
 packages/client/src/utils/grid.js               | 6 +++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 0a216bd675..8083678482 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -42,6 +42,7 @@
   import { gridLayout } from "utils/grid.js"
 
   export let instance = {}
+  export let parent = null
   export let isLayout = false
   export let isRoot = false
   export let isBlock = false
@@ -194,14 +195,20 @@
   $: pad = pad || (interactive && hasChildren && inDndPath)
   $: $dndIsDragging, (pad = false)
 
+  // Themes
   $: currentTheme = $context?.device?.theme
   $: darkMode = !currentTheme?.includes("light")
 
+  // Apply ephemeral styles (such as when resizing grid components)
   $: normalStyles = {
     ...instance._styles?.normal,
     ...ephemeralStyles,
   }
+
+  // Metadata to pass into grid action to apply CSS
   $: gridMetadata = {
+    active:
+      parent?._component.endsWith("/container") && parent?.layout === "grid",
     id,
     interactive,
     styles: normalStyles,
@@ -672,7 +679,7 @@
       <svelte:component this={constructor} bind:this={ref} {...initialSettings}>
         {#if children.length}
           {#each children as child (child._id)}
-            <svelte:self instance={child} />
+            <svelte:self instance={child} parent={instance} />
           {/each}
         {:else if emptyState}
           {#if isRoot}
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index 54c5e2c24f..d974e31899 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -71,7 +71,11 @@ export const gridLayout = (node, metadata) => {
 
   // Applies the required listeners, CSS and classes to a component DOM node
   const applyMetadata = metadata => {
-    const { id, styles, interactive, errored, definition, draggable } = metadata
+    const { id, styles, interactive, errored, definition, draggable, active } =
+      metadata
+    if (!active) {
+      return
+    }
 
     // Callback to select the component when clicking on the wrapper
     selectComponent = e => {