From 51c11cb537eee0c1e409f9a15f4a0f9e7cd9fe86 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 23 Oct 2020 12:57:35 +0100
Subject: [PATCH] Reduce unecessary div layers

---
 .../CreateAutomationModal.svelte              |  0
 .../TableNavigator/TableNavigator.svelte      | 61 ++++++++-----------
 .../pages/[application]/data/_layout.svelte   |  5 ++
 3 files changed, 31 insertions(+), 35 deletions(-)
 rename packages/builder/src/components/automation/AutomationPanel/{AutomationList => }/CreateAutomationModal.svelte (100%)

diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte b/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
similarity index 100%
rename from packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte
rename to packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
index e521a1dfc6..0b73074e10 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
@@ -33,49 +33,40 @@
   }
 </script>
 
-<div class="items-root">
-  {#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
-    <div class="title">
-      <h1>Tables</h1>
-      <i on:click={modal.show} class="ri-add-circle-fill" />
-    </div>
-    <div class="hierarchy-items-container">
-      {#each $backendUiStore.tables as table}
+{#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
+  <div class="title">
+    <h1>Tables</h1>
+    <i on:click={modal.show} class="ri-add-circle-fill" />
+  </div>
+  <div class="hierarchy-items-container">
+    {#each $backendUiStore.tables as table, idx}
+      <NavItem
+        border={idx > 0}
+        icon="ri-table-line"
+        text={table.name}
+        selected={selectedView === `all_${table._id}`}
+        on:click={() => selectTable(table)}>
+        <EditTablePopover {table} />
+      </NavItem>
+      {#each Object.keys(table.views || {}) as viewName}
         <NavItem
-          icon="ri-table-line"
-          text={table.name}
-          selected={selectedView === `all_${table._id}`}
-          on:click={() => selectTable(table)}>
-          <EditTablePopover {table} />
+          indentLevel={1}
+          icon="ri-eye-line"
+          text={viewName}
+          selected={selectedView === viewName}
+          on:click={() => onClickView(table, viewName)}>
+          <EditViewPopover
+            view={{ name: viewName, ...table.views[viewName] }} />
         </NavItem>
-        {#each Object.keys(table.views || {}) as viewName}
-          <NavItem
-            indentLevel={1}
-            icon="ri-eye-line"
-            text={viewName}
-            selected={selectedView === viewName}
-            on:click={() => onClickView(table, viewName)}>
-            <EditViewPopover
-              view={{ name: viewName, ...table.views[viewName] }} />
-          </NavItem>
-        {/each}
       {/each}
-    </div>
-  {/if}
-</div>
+    {/each}
+  </div>
+{/if}
 <Modal bind:this={modal}>
   <CreateTableModal />
 </Modal>
 
 <style>
-  .items-root {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: var(--spacing-l);
-  }
-
   .title {
     display: flex;
     flex-direction: row;
diff --git a/packages/builder/src/pages/[application]/data/_layout.svelte b/packages/builder/src/pages/[application]/data/_layout.svelte
index d52fdffade..fa6b40a91d 100644
--- a/packages/builder/src/pages/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/[application]/data/_layout.svelte
@@ -30,5 +30,10 @@
     overflow-y: auto;
     background: var(--white);
     padding: var(--spacing-l) var(--spacing-xl);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
   }
 </style>