From bdc8d1e675fef1619952e0ecc6d90bb20d1dcef1 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Wed, 20 Jul 2022 16:38:42 +0100
Subject: [PATCH] Fix for left positioning of the KeyValueBuilder drawers

---
 .../automation/SetupPanel/AutomationBlockSetup.svelte          | 2 ++
 .../src/components/common/bindings/DrawerBindableInput.svelte  | 3 ++-
 .../builder/src/components/integration/KeyValueBuilder.svelte  | 2 ++
 .../datasource/[selectedDatasource]/rest/[query]/index.svelte  | 3 +++
 4 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 8b34cf8cd2..f77374985d 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -246,6 +246,7 @@
             {bindings}
             allowJS={false}
             updateOnChange={false}
+            drawerLeft="260px"
           />
         {/if}
       {:else if value.customType === "query"}
@@ -335,6 +336,7 @@
               {bindings}
               updateOnChange={false}
               placeholder={value.customType === "queryLimit" ? queryLimit : ""}
+              drawerLeft="260px"
             />
           </div>
         {/if}
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index b162408b26..b8d418c62b 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -18,6 +18,7 @@
   export let fillWidth
   export let allowJS = true
   export let updateOnChange = true
+  export let drawerLeft
 
   const dispatch = createEventDispatcher()
   let bindingDrawer
@@ -53,7 +54,7 @@
     </div>
   {/if}
 </div>
-<Drawer {fillWidth} bind:this={bindingDrawer} {title}>
+<Drawer {fillWidth} bind:this={bindingDrawer} {title} left={drawerLeft}>
   <svelte:fragment slot="description">
     Add the objects on the left to enrich your text.
   </svelte:fragment>
diff --git a/packages/builder/src/components/integration/KeyValueBuilder.svelte b/packages/builder/src/components/integration/KeyValueBuilder.svelte
index 9b46bc0364..4ffb380aa4 100644
--- a/packages/builder/src/components/integration/KeyValueBuilder.svelte
+++ b/packages/builder/src/components/integration/KeyValueBuilder.svelte
@@ -32,6 +32,7 @@
   export let menuItems
   export let showMenu = false
   export let bindings = []
+  export let bindingDrawerLeft
 
   let fields = Object.entries(object || {}).map(([name, value]) => ({
     name,
@@ -119,6 +120,7 @@
           value={field.value}
           allowJS={false}
           fillWidth={true}
+          drawerLeft={bindingDrawerLeft}
         />
       {:else}
         <Input
diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte
index 6a798f0178..5ccc173318 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte
@@ -440,6 +440,7 @@
                 ...dynamicRequestBindings,
                 ...dataSourceStaticBindings,
               ]}
+              bindingDrawerLeft="260px"
             />
           </Tab>
           <Tab title="Params">
@@ -448,6 +449,7 @@
               name="param"
               headings
               bindings={mergedBindings}
+              bindingDrawerLeft="260px"
             />
           </Tab>
           <Tab title="Headers">
@@ -458,6 +460,7 @@
               name="header"
               headings
               bindings={mergedBindings}
+              bindingDrawerLeft="260px"
             />
           </Tab>
           <Tab title="Body">