update field styling and ux for individual blocks

packages/builder/.gitignore

@@ -6,3 +6,4 @@ release/
 dist/
 routify
 .routify/
+svelte.config.js

packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte

@@ -100,19 +100,13 @@
   }
 </script>
 
-<div
-  class={`block ${block.type} hoverable`}
-  class:selected
-  on:keydown={() => {}}
-  on:click={() => {}}
->
+<div class={`block ${block.type} hoverable`} class:selected on:click={() => {}}>
   {#if loopBlock}
     <div class="blockSection">
       <div
         on:click={() => {
           showLooping = !showLooping
         }}
-        on:keydown={() => {}}
         class="splitHeader"
       >
         <div class="center-items">
@@ -131,11 +125,7 @@
         </div>
 
         <div class="blockTitle">
-          <div
-            style="margin-left: 10px;"
-            on:keydown={() => {}}
-            on:click={() => {}}
-          >
+          <div style="margin-left: 10px;" on:click={() => {}}>
             <Icon hoverable name={showLooping ? "ChevronDown" : "ChevronUp"} />
           </div>
         </div>

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

@@ -295,21 +295,23 @@
 <div class="fields">
   {#each schemaProperties as [key, value]}
     {#if canShowField(key, value)}
-      <div class="block-field">
-        {#if key !== "fields" && value.type !== "boolean"}
+      <div class:block-field={value.customType !== "row"}>
+        {#if key !== "fields" && value.type !== "boolean" && value.customType !== "row"}
           <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"}>
           {#if value.type === "string" && value.enum && canShowField(key, value)}
             <Select
               on:change={e => onChange(e, key)}
               value={inputData[key]}
               placeholder={false}
               options={value.enum}
-            getOptionLabel={(x, idx) => (value.pretty ? value.pretty[idx] : x)}
+              getOptionLabel={(x, idx) =>
+                value.pretty ? value.pretty[idx] : x}
             />
           {:else if value.type === "json"}
             <Editor
@@ -535,6 +537,7 @@
             {/if}
           {/if}
         </div>
+      </div>
     {/if}
   {/each}
 </div>
@@ -547,6 +550,10 @@
 {/if}
 
 <style>
+  .field-width {
+    width: 320px;
+  }
+
   .messaging {
     display: flex;
     align-items: center;
@@ -561,8 +568,13 @@
   }
 
   .block-field {
-    display: grid;
-    grid-gap: 5px;
+    display: flex; /* Use Flexbox */
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row; /* Arrange label and field side by side */
+    align-items: center; /* Align vertically in the center */
+    gap: 10px; /* Add some space between label and field */
+    flex: 1;
   }
 
   .test :global(.drawer) {

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

@@ -1,6 +1,6 @@
 <script>
   import { tables } from "stores/backend"
-  import { Select, Checkbox } from "@budibase/bbui"
+  import { Select, Checkbox, Label } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import RowSelectorTypes from "./RowSelectorTypes.svelte"
   import DrawerBindableSlot from "../../common/bindings/DrawerBindableSlot.svelte"
@@ -99,6 +99,9 @@
   $: if (value?.tableId == null) value = { tableId: "" }
 </script>
 
+<div class="schema-fields">
+  <Label>Table</Label>
+  <div class="field-width">
     <Select
       on:change={onChangeTable}
       value={value.tableId}
@@ -106,9 +109,13 @@
       getOptionLabel={table => table.name}
       getOptionValue={table => table._id}
     />
+  </div>
+</div>
 {#if schemaFields.length}
-  <div class="schema-fields">
   {#each schemaFields as [field, schema]}
+    <div class="schema-fields">
+      <Label>{field}</Label>
+      <div class="field-width">
         {#if !schema.autocolumn && schema.type !== "attachment"}
           {#if isTestModal}
             <RowSelectorTypes
@@ -123,9 +130,9 @@
             <DrawerBindableSlot
               fillWidth
               title={value.title}
-            label={field}
               panel={AutomationBindingPanel}
               type={schema.type}
+              label={field}
               {schema}
               value={value[field]}
               on:change={e => onChange(e, field)}
@@ -145,6 +152,7 @@
             </DrawerBindableSlot>
           {/if}
         {/if}
+
         {#if isUpdateRow && schema.type === "link"}
           <div class="checkbox-field">
             <Checkbox
@@ -155,15 +163,25 @@
             />
           </div>
         {/if}
-    {/each}
       </div>
+    </div>
+  {/each}
 {/if}
 
 <style>
+  .field-width {
+    width: 320px;
+  }
+
   .schema-fields {
-    display: grid;
-    grid-gap: var(--spacing-s);
-    margin-top: var(--spacing-s);
+    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;

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

@@ -33,7 +33,6 @@
 {#if schemaHasOptions(schema) && schema.type !== "array"}
   <Select
     on:change={e => onChange(e, field)}
-    label={field}
     value={value[field]}
     options={schema.constraints.inclusion}
   />
@@ -46,7 +45,6 @@
 {:else if schema.type === "boolean"}
   <Select
     on:change={e => onChange(e, field)}
-    label={field}
     value={value[field]}
     options={[
       { label: "True", value: "true" },
@@ -56,7 +54,6 @@
 {:else if schema.type === "array"}
   <Multiselect
     bind:value={value[field]}
-    label={field}
     options={schema.constraints.inclusion}
     on:change={e => onChange(e, field)}
   />
@@ -92,7 +89,6 @@
     panel={AutomationBindingPanel}
     value={value[field]}
     on:change={e => onChange(e, field)}
-    label={field}
     type="string"
     bindings={parsedBindings}
     fillWidth={true}