From b470e57a29c0d6308a4a118bc0c164aa81e6857e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 28 Sep 2022 14:16:09 +0100
Subject: [PATCH] Expand component trees with padding when dragging and
 dropping

---
 packages/client/src/components/Component.svelte | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 2d586df24d..2a6c46feec 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -453,6 +453,7 @@
     class:interactive
     class:editing
     class:block={isBlock}
+    class:explode={children.length && !isLayout && $builderStore.isDragging}
     data-id={id}
     data-name={name}
     data-icon={icon}
@@ -481,15 +482,19 @@
   .component {
     display: contents;
   }
-
+  .component :global(> *) {
+    transition: padding 250ms ease, border 250ms ease;
+  }
+  .component.explode :global(> *) {
+    padding: 12px 4px !important;
+    border: 2px dashed var(--spectrum-global-color-gray-400) !important;
+  }
   .interactive :global(*:hover) {
     cursor: pointer;
   }
-
   .draggable :global(*:hover) {
     cursor: grab;
   }
-
   .editing :global(*:hover) {
     cursor: auto;
   }