From af4d3c0c215457e43cdf91f474cbf9f44b420f40 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 7 Apr 2022 15:32:46 +0100
Subject: [PATCH] Split buttons into left and right sides

---
 .../backend/DataTable/DataTable.svelte        | 52 +++++++++++--------
 1 file changed, 29 insertions(+), 23 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte
index 0a1244d9c9..fd2045fc07 100644
--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte
@@ -138,30 +138,29 @@
           <CreateViewButton disabled={!hasCols || !hasRows} />
         {/if}
       </div>
-      <div class="right-buttons" />
-    </div>
-    {#if hasCols}
-      <ManageAccessButton resourceId={$tables.selected?._id} />
-      {#if isUsersTable}
-        <EditRolesButton />
-      {/if}
-      {#if !isInternal}
-        <ExistingRelationshipButton
-          table={$tables.selected}
-          on:updatecolumns={onUpdateColumns}
+      <div class="right-buttons">
+        <ManageAccessButton resourceId={$tables.selected?._id} />
+        {#if isUsersTable}
+          <EditRolesButton />
+        {/if}
+        {#if !isInternal}
+          <ExistingRelationshipButton
+            table={$tables.selected}
+            on:updatecolumns={onUpdateColumns}
+          />
+        {/if}
+        <HideAutocolumnButton bind:hideAutocolumns />
+        <!-- always have the export last -->
+        <ExportButton view={$tables.selected?._id} />
+        <ImportButton
+          tableId={$tables.selected?._id}
+          on:updaterows={onUpdateRows}
         />
-      {/if}
-      <HideAutocolumnButton bind:hideAutocolumns />
-      <!-- always have the export last -->
-      <ExportButton view={$tables.selected?._id} />
-      <ImportButton
-        tableId={$tables.selected?._id}
-        on:updaterows={onUpdateRows}
-      />
-      {#key id}
-        <TableFilterButton {schema} on:change={onFilter} />
-      {/key}
-    {/if}
+        {#key id}
+          <TableFilterButton {schema} on:change={onFilter} />
+        {/key}
+      </div>
+    </div>
     <div slot="placeholder">
       <Layout gap="S">
         <Heading>Let's create some columns!</Heading>
@@ -195,4 +194,11 @@
     align-items: center;
     margin-top: var(--spacing-xl);
   }
+  .buttons {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
 </style>