Make workflow builder scrollable and improve UX around selecting and editing worflow blocks

packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte

@@ -15,7 +15,7 @@
   }
 </script>
 
-<div class="bb-margin-xl block-field">
+<div class="block-field">
   <select class="budibase__input" bind:value={value.model}>
     {#each $backendUiStore.models as model}
       <option value={model}>{model.name}</option>

packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte

@@ -14,12 +14,13 @@
     : []
 </script>
 
-<label class="selected-label">{workflowBlock.type}: {workflowBlock.name}</label>
+<div class="container">
+  <!-- <label class="selected-label">{workflowBlock.type}: {workflowBlock.name}</label> -->
   {#each workflowParams as [parameter, type]}
     <div class="block-field">
       <label class="label">{parameter}</label>
       {#if Array.isArray(type)}
-      <Select bind:value={workflowBlock.args[parameter]} thin>
+        <Select bind:value={workflowBlock.args[parameter]} thin secondary>
           {#each type as option}
             <option value={option}>{option}</option>
           {/each}
@@ -32,15 +33,14 @@
           <option value="POWER_USER">Power User</option>
         </Select>
       {:else if type === 'password'}
-      <Input type="password" thin bind:value={workflowBlock.args[parameter]} />
+        <Input
+          type="password"
+          thin
+          bind:value={workflowBlock.args[parameter]} />
       {:else if type === 'number'}
         <Input type="number" thin bind:value={workflowBlock.args[parameter]} />
       {:else if type === 'longText'}
-      <TextArea
-        type="text"
-        thin
-        bind:value={workflowBlock.args[parameter]}
-        label="" />
+        <TextArea type="text" thin bind:value={workflowBlock.args[parameter]} />
       {:else if type === 'model'}
         <ModelSelector bind:value={workflowBlock.args[parameter]} />
       {:else if type === 'record'}
@@ -50,8 +50,13 @@
       {/if}
     </div>
   {/each}
+</div>
 
 <style>
+  .container {
+    margin-top: -20px;
+  }
+
   .block-field {
     display: grid;
   }

packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte

@@ -37,6 +37,7 @@
 
 <section>
   <Flowchart blocks={uiTree} {onSelect} />
+</section>
 <footer>
   {#if selectedWorkflow}
     <button
@@ -55,13 +56,22 @@
     </button>
   {/if}
 </footer>
-</section>
 
 <style>
+  section {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: flex-start;
+    overflow: auto;
+    height: 100%;
+    position: relative;
+  }
+
   footer {
     position: absolute;
-    bottom: 0;
-    right: 0;
+    bottom: 20px;
+    right: 30px;
     display: flex;
     align-items: flex-end;
   }
@@ -77,7 +87,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-right: 24px;
+  }
+  footer > button:first-child {
+    margin-right: 20px;
   }
 
   .play-button.highlighted {

packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowChart.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <section class="canvas">
-  {#each blocks as block, idx}
+  {#each blocks as block, idx (block.id)}
     <FlowItem {onSelect} {block} />
     {#if idx !== blocks.length - 1}
       <Arrow />
@@ -16,6 +16,11 @@
 </section>
 
 <style>
+  section {
+    position: absolute;
+    padding: 20px 40px;
+  }
+
   .canvas {
     display: flex;
     align-items: center;

packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte

@@ -1,15 +1,27 @@
 <script>
   import { fade } from "svelte/transition"
+  import { workflowStore } from "builderStore"
 
   export let onSelect
   export let block
+  let selected = false
 
   function selectBlock() {
     onSelect(block)
   }
+
+  $: selected =
+    $workflowStore.selectedWorkflowBlock != null &&
+    $workflowStore.selectedWorkflowBlock.id === block.id
+
+  console.log(selected)
 </script>
 
-<div transition:fade class={`${block.type} hoverable`} on:click={selectBlock}>
+<div
+  transition:fade
+  class={`${block.type} hoverable`}
+  class:selected
+  on:click={selectBlock}>
   <header>
     {#if block.type === 'TRIGGER'}
       <i class="ri-lightbulb-fill" />
@@ -32,8 +44,8 @@
   div {
     width: 320px;
     padding: 20px;
-    border-radius: 5px;
-    transition: 0.3s all;
+    border-radius: var(--border-radius-m);
+    transition: 0.3s all ease;
     box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.08);
     background-color: var(--ink);
     font-size: 16px;
@@ -69,9 +81,12 @@
 
   p {
     color: inherit;
+    margin-bottom: 0;
   }
 
+  div.selected,
   div:hover {
-    transform: scale(1.05);
+    transform: scale(1.1);
+    box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.15);
   }
 </style>

packages/builder/src/pages/[application]/workflow/_layout.svelte

@@ -35,7 +35,6 @@
 
   .content {
     flex: 1 1 auto;
-    margin: 20px 40px;
   }
 
   .nav {