fix formatting of selectors

packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte

@@ -283,6 +283,14 @@
     return !dependsOn || !!inputData[dependsOn]
   }
 
+  function shouldRenderField(value) {
+    return (
+      value.customType !== "row" &&
+      value.customType !== "code" &&
+      value.customType !== "queryParams"
+    )
+  }
+
   onMount(async () => {
     try {
       await environment.loadVariables()
@@ -295,15 +303,15 @@
 <div class="fields">
   {#each schemaProperties as [key, value]}
     {#if canShowField(key, value)}
-      <div class:block-field={value.customType !== "row"}>
+      <div class:block-field={shouldRenderField(value)}>
-        {#if key !== "fields" && value.type !== "boolean" && value.customType !== "row"}
+        {#if key !== "fields" && value.type !== "boolean" && shouldRenderField(value)}
           <Label
             tooltip={value.title === "Binding / Value"
               ? "If using the String input type, please use a comma or newline separated string"
               : null}>{value.title || (key === "row" ? "Table" : key)}</Label
           >
         {/if}
-        <div class:field-width={value.customType !== "row"}>
+        <div class:field-width={shouldRenderField(value)}>
           {#if value.type === "string" && value.enum && canShowField(key, value)}
             <Select
               on:change={e => onChange(e, key)}

packages/builder/src/components/automation/SetupPanel/CodeEditorModal.svelte

@@ -23,7 +23,9 @@
     </div>
   </ModalContent>
 </Modal>
-<Button primary on:click={show}>Edit Code</Button>
+<div class="center">
+  <Button primary on:click={show}>Edit Code</Button>
+</div>
 
 <style>
   .container :global(section > header) {
@@ -33,4 +35,9 @@
   .container :global(textarea) {
     min-height: 60px;
   }
+
+  .center {
+    display: flex;
+    justify-content: center;
+  }
 </style>

packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte

@@ -1,7 +1,7 @@
 <script>
   import { createEventDispatcher } from "svelte"
   import { queries } from "stores/backend"
-  import { Select } from "@budibase/bbui"
+  import { Select, Label } from "@budibase/bbui"
   import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
   import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
 
@@ -27,41 +27,54 @@
   $: if (value?.queryId == null) value = { queryId: "" }
 </script>
 
-<div class="block-field">
+<div class="schema-fields">
-  <Select
+  <Label>Table</Label>
-    label="Query"
+  <div class="field-width">
-    on:change={onChangeQuery}
+    <Select
-    value={value.queryId}
+      on:change={onChangeQuery}
-    options={$queries.list}
+      value={value.queryId}
-    getOptionValue={query => query._id}
+      options={$queries.list}
-    getOptionLabel={query => query.name}
+      getOptionValue={query => query._id}
-  />
+      getOptionLabel={query => query.name}
+    />
+  </div>
 </div>
 
 {#if parameters.length}
   <div class="schema-fields">
     {#each parameters as field}
-      <DrawerBindableInput
+      <Label>{field.name}</Label>
-        panel={AutomationBindingPanel}
+      <div class="field-width">
-        extraThin
+        <DrawerBindableInput
-        value={value[field.name]}
+          panel={AutomationBindingPanel}
-        on:change={e => onChange(e, field)}
+          extraThin
-        label={field.name}
+          on:change={e => onChange(e, field)}
-        type="string"
+          type="string"
-        {bindings}
+          {bindings}
-        fillWidth={true}
+          fillWidth={true}
-        updateOnChange={false}
+          updateOnChange={false}
-      />
+        />
+      </div>
     {/each}
   </div>
 {/if}
 
 <style>
-  .schema-fields {
+  .field-width {
-    display: grid;
+    width: 320px;
-    grid-gap: var(--spacing-xl);
-    margin-top: var(--spacing-xl);
   }
+
+  .schema-fields {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+    flex: 1;
+    margin-bottom: 10px;
+  }
+
   .schema-fields :global(label) {
     text-transform: capitalize;
   }