Tidy backend table styles, fix layout and add scrolling

packages/builder/src/components/database/DataTable/ModelDataTable.svelte

@@ -54,15 +54,13 @@
 </script>
 
 <section>
-  <div class="table-controls">
-    <h2 class="title">{$backendUiStore.selectedModel.name}</h2>
-    <div class="popovers">
-      <ColumnPopover />
-      {#if Object.keys($backendUiStore.selectedModel.schema).length > 0}
-        <RowPopover />
-        <ViewPopover />
-      {/if}
-    </div>
+  <h2 class="title">{$backendUiStore.selectedModel.name}</h2>
+  <div class="popovers">
+    <ColumnPopover />
+    {#if Object.keys($backendUiStore.selectedModel.schema).length > 0}
+      <RowPopover />
+      <ViewPopover />
+    {/if}
   </div>
   <table class="bb-table">
     <thead>
@@ -80,7 +78,10 @@
     </thead>
     <tbody>
       {#if paginatedData.length === 0}
-        <div class="no-data">No Data.</div>
+        <td class="no-border">No data.</td>
+        {#each headers as header}
+          <td class="no-border" />
+        {/each}
       {/if}
       {#each paginatedData as row}
         <tr>
@@ -108,30 +109,31 @@
 </section>
 
 <style>
-  section {
-    margin-bottom: 20px;
-  }
-
   .title {
     font-size: 24px;
     font-weight: 600;
     text-rendering: optimizeLegibility;
     text-transform: capitalize;
+    margin-top: 0;
+  }
+
+  .popovers {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
   }
 
   table {
     border: 1px solid var(--grey-4);
     background: #fff;
-    border-radius: 3px;
     border-collapse: collapse;
   }
 
   thead {
-    height: 40px;
     background: var(--grey-3);
-    border: 1px solid var(--grey-4);
+    border-bottom: 1px solid var(--grey-4);
   }
-
   thead th {
     color: var(--ink);
     text-transform: capitalize;
@@ -140,13 +142,15 @@
     text-rendering: optimizeLegibility;
     transition: 0.5s all;
     vertical-align: middle;
+    height: 48px;
+    padding-top: 0;
+    padding-bottom: 0;
   }
 
   .edit-header {
     width: 100px;
     cursor: default;
   }
-
   .edit-header:hover {
     color: var(--ink);
   }
@@ -161,30 +165,24 @@
     text-overflow: ellipsis;
     border: 1px solid var(--grey-4);
     overflow: hidden;
-    white-space: pre;
+    white-space: nowrap;
     box-sizing: border-box;
+    padding: var(--spacing-l) var(--spacing-m);
+    font-size: var(--font-size-xs);
+  }
+  td.no-border {
+    border: none;
   }
 
+  tbody {
+    border: 1px solid var(--grey-4);
+  }
   tbody tr {
     border-bottom: 1px solid var(--grey-4);
     transition: 0.3s background-color;
     color: var(--ink);
-    font-size: 12px;
   }
-
   tbody tr:hover {
     background: var(--grey-1);
   }
-
-  .table-controls {
-    width: 100%;
-  }
-
-  .popovers {
-    display: flex;
-  }
-
-  .no-data {
-    padding: 14px;
-  }
 </style>

packages/builder/src/components/database/DataTable/Table.svelte

@@ -54,7 +54,11 @@
     </thead>
     <tbody>
       {#if paginatedData.length === 0}
-        <div class="no-data">No Data.</div>
+        {#each columns as header, idx}
+          <td class="no-border">
+            {#if idx === 0}No data.{/if}
+          </td>
+        {/each}
       {/if}
       {#each paginatedData as row}
         <tr>
@@ -77,29 +81,24 @@
 </section>
 
 <style>
-  section {
-    margin-bottom: 20px;
-  }
   .title {
     font-size: 24px;
     font-weight: 600;
     text-rendering: optimizeLegibility;
     text-transform: capitalize;
+    margin-top: 0;
   }
 
   table {
     border: 1px solid var(--grey-4);
     background: #fff;
-    border-radius: 3px;
     border-collapse: collapse;
   }
 
   thead {
-    height: 40px;
     background: var(--grey-3);
     border: 1px solid var(--grey-4);
   }
-
   thead th {
     color: var(--ink);
     text-transform: capitalize;
@@ -108,9 +107,11 @@
     text-rendering: optimizeLegibility;
     transition: 0.5s all;
     vertical-align: middle;
+    height: 48px;
+    padding-top: 0;
+    padding-bottom: 0;
   }
-
-  th:hover {
+  thead th:hover {
     color: var(--blue);
     cursor: pointer;
   }
@@ -119,15 +120,20 @@
     max-width: 200px;
     text-overflow: ellipsis;
     border: 1px solid var(--grey-4);
+    white-space: nowrap;
+    box-sizing: border-box;
+    padding: var(--spacing-l) var(--spacing-m);
+    font-size: var(--font-size-xs);
+  }
+  td.no-border {
+    border: none;
   }
 
   tbody tr {
     border-bottom: 1px solid var(--grey-4);
     transition: 0.3s background-color;
     color: var(--ink);
-    font-size: 12px;
   }
-
   tbody tr:hover {
     background: var(--grey-1);
   }
@@ -143,8 +149,4 @@
   :global(.popovers > div) {
     margin-right: var(--spacing-m);
   }
-
-  .no-data {
-    padding: 14px;
-  }
 </style>

packages/builder/src/pages/[application]/backend/_layout.svelte

@@ -25,7 +25,8 @@
   }
   .content {
     flex: 1 1 auto;
-    margin: var(--spacing-xl) 40px;
+    padding: var(--spacing-xl) 40px;
+    overflow-y: auto;
   }
   .nav {
     overflow-y: auto;