Reduce unecessary div layers

packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte

@@ -33,49 +33,40 @@
   }
 </script>
 
-<div class="items-root">
+{#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
-  {#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
+  <div class="title">
-    <div class="title">
+    <h1>Tables</h1>
-      <h1>Tables</h1>
+    <i on:click={modal.show} class="ri-add-circle-fill" />
-      <i on:click={modal.show} class="ri-add-circle-fill" />
+  </div>
-    </div>
+  <div class="hierarchy-items-container">
-    <div class="hierarchy-items-container">
+    {#each $backendUiStore.tables as table, idx}
-      {#each $backendUiStore.tables as table}
+      <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"
+          indentLevel={1}
-          text={table.name}
+          icon="ri-eye-line"
-          selected={selectedView === `all_${table._id}`}
+          text={viewName}
-          on:click={() => selectTable(table)}>
+          selected={selectedView === viewName}
-          <EditTablePopover {table} />
+          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>
+    {/each}
-  {/if}
+  </div>
-</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;

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>