Reduce unecessary div layers

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

@@ -33,15 +33,15 @@
   }
 </script>
 
-<div class="items-root">
-  {#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
+{#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}
+    {#each $backendUiStore.tables as table, idx}
       <NavItem
+        border={idx > 0}
         icon="ri-table-line"
         text={table.name}
         selected={selectedView === `all_${table._id}`}
@@ -61,21 +61,12 @@
       {/each}
     {/each}
   </div>
-  {/if}
-</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>