From b6e6a1ef4b614b3dc68f269df0bae61b2419a52b Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Thu, 13 Aug 2020 10:15:09 +0100
Subject: [PATCH] changes from code review

---
 .../userInterface/ComponentsHierarchy.svelte      |  4 +++-
 .../ComponentsHierarchyChildren.svelte            | 15 +++------------
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index db4ea2fc27..b7fc60f347 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -11,6 +11,8 @@
 
   export let screens = []
 
+  const dragDropStore = writable({})
+
   let confirmDeleteDialog
   let componentToDelete = ""
 
@@ -62,7 +64,7 @@
       <ComponentsHierarchyChildren
         components={screen.props._children}
         currentComponent={$store.currentComponentInfo}
-        dragDropStore={writable({})} />
+        {dragDropStore} />
     {/if}
   {/each}
 
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index 7d24a42a8e..e23d34bc3c 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -107,7 +107,7 @@
   {#each components as component, index (component._id)}
     <li on:click|stopPropagation={() => selectComponent(component)}>
 
-      {#if $dragDropStore && $dragDropStore.targetComponent === component && $dragDropStore.dropPosition == 'above'}
+      {#if $dragDropStore && $dragDropStore.targetComponent === component && $dragDropStore.dropPosition === 'above'}
         <div
           on:drop={drop}
           ondragover="return false"
@@ -144,22 +144,13 @@
           level={level + 1} />
       {/if}
 
-      {#if $dragDropStore && $dragDropStore.targetComponent === component && $dragDropStore.dropPosition == 'inside'}
+      {#if $dragDropStore && $dragDropStore.targetComponent === component && ($dragDropStore.dropPosition === 'inside' || $dragDropStore.dropPosition === 'below')}
         <div
           on:drop={drop}
           ondragover="return false"
           ondragenter="return false"
           class="budibase__nav-item item drop-item"
-          style="margin-left: {(level + 2) * 20 + 40}px" />
-      {/if}
-
-      {#if $dragDropStore && $dragDropStore.targetComponent === component && $dragDropStore.dropPosition == 'below'}
-        <div
-          on:drop={drop}
-          ondragover="return false"
-          ondragenter="return false"
-          class="budibase__nav-item item drop-item"
-          style="margin-left: {level * 20 + 40}px" />
+          style="margin-left: {(level + ($dragDropStore.dropPosition === 'inside' ? 2 : 0)) * 20 + 40}px" />
       {/if}
     </li>
   {/each}