From 4f00e7a3b15e67617ef16c032ae96b8418bada1a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 14 Feb 2022 11:47:48 +0000
Subject: [PATCH] Add labels to column config drawer

---
 .../ColumnEditor/ColumnDrawer.svelte          | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte
index 00927d522d..3f2f75a206 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte
@@ -6,6 +6,7 @@
     Layout,
     Input,
     Select,
+    Label,
   } from "@budibase/bbui"
   import { flip } from "svelte/animate"
   import { dndzone } from "svelte-dnd-action"
@@ -75,6 +76,12 @@
           on:finalize={handleFinalize}
           on:consider={updateColumnOrder}
         >
+          <div class="column">
+            <div />
+            <Label size="L">Column</Label>
+            <Label size="L">Label</Label>
+            <div />
+          </div>
           {#each columns as column (column.id)}
             <div class="column" animate:flip={{ duration: flipDurationMs }}>
               <div
@@ -102,7 +109,8 @@
           {/each}
         </div>
       {/if}
-      <div>
+      <div class="column">
+        <div />
         <Button secondary icon="Add" on:click={addColumn}>Add Column</Button>
       </div>
     </Layout>
@@ -124,9 +132,8 @@
   }
   .column {
     gap: var(--spacing-l);
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+    display: grid;
+    grid-template-columns: 20px 1fr 1fr 20px;
     align-items: center;
     border-radius: var(--border-radius-s);
     transition: background-color ease-in-out 130ms;
@@ -134,10 +141,6 @@
   .column:hover {
     background-color: var(--spectrum-global-color-gray-100);
   }
-  .column > :global(.spectrum-Form-item) {
-    flex: 1 1 auto;
-    width: 0;
-  }
   .handle {
     display: grid;
     place-items: center;