From 1b8f7efbbbd5732d909c387274fa52cefdc28f76 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Thu, 16 Sep 2021 12:15:32 +0100
Subject: [PATCH] fix label not being rendered correctly

---
 packages/bbui/src/Drawer/Drawer.svelte        |  8 ++++--
 .../SetupPanel/AutomationBlockSetup.svelte    | 26 ++++++++++++-------
 .../bindings/DrawerBindableInput.svelte       |  3 ++-
 3 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index a619ee0f8b..67252f72b6 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -6,7 +6,7 @@
   import Heading from "../Typography/Heading.svelte"
 
   export let title
-
+  export let fillWidth
   let visible = false
 
   export function show() {
@@ -34,7 +34,7 @@
 
 {#if visible}
   <Portal>
-    <section class="drawer" transition:slide>
+    <section class:fillWidth class="drawer" transition:slide>
       <header>
         <div class="text">
           <Heading size="XS">{title}</Heading>
@@ -63,6 +63,10 @@
     z-index: 2;
   }
 
+  .fillWidth {
+    width: calc(100% - 260px) !important;
+  }
+
   header {
     display: flex;
     justify-content: space-between;
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index c16260779e..3c77157acb 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -76,7 +76,7 @@
 <div class="fields">
   {#each schemaProperties as [key, value]}
     <div class="block-field">
-      <Label>{value.title || key}</Label>
+      <Label>{value.title || (key === "row" ? "Table" : key)}</Label>
       {#if value.type === "string" && value.enum}
         <Select
           on:change={e => onChange(e, key)}
@@ -102,6 +102,7 @@
           />
         {:else}
           <DrawerBindableInput
+            fillWidth
             title={value.title}
             panel={AutomationBindingPanel}
             type="email"
@@ -161,14 +162,17 @@
             {bindings}
           />
         {:else}
-          <DrawerBindableInput
-            title={value.title}
-            panel={AutomationBindingPanel}
-            type={value.customType}
-            value={inputData[key]}
-            on:change={e => onChange(e, key)}
-            {bindings}
-          />
+          <div class="test">
+            <DrawerBindableInput
+              fillWidth
+              title={value.title}
+              panel={AutomationBindingPanel}
+              type={value.customType}
+              value={inputData[key]}
+              on:change={e => onChange(e, key)}
+              {bindings}
+            />
+          </div>
         {/if}
       {/if}
     </div>
@@ -191,4 +195,8 @@
     display: grid;
     grid-gap: 5px;
   }
+
+  .test :global(.drawer) {
+    width: 10000px !important;
+  }
 </style>
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index ee2487a9d6..502b56c4d4 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -14,6 +14,7 @@
   export let placeholder
   export let label
   export let disabled = false
+  export let fillWidth = false
 
   const dispatch = createEventDispatcher()
   let bindingDrawer
@@ -45,7 +46,7 @@
     </div>
   {/if}
 </div>
-<Drawer bind:this={bindingDrawer} {title}>
+<Drawer {fillWidth} bind:this={bindingDrawer} {title}>
   <svelte:fragment slot="description">
     Add the objects on the left to enrich your text.
   </svelte:fragment>