rework AutomationBindingPanel to use Layout component

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

@@ -1,6 +1,6 @@
 <script>
   import groupBy from "lodash/fp/groupBy"
-  import { Input, TextArea, Heading, Spacer, Label } from "@budibase/bbui"
+  import { Input, TextArea, Heading, Layout } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { isValid } from "@budibase/string-templates"
   import { handlebarsCompletions } from "constants/completions"
@@ -46,43 +46,50 @@
 
 <div class="container">
   <div class="list">
+    <Layout>
+      <div class="section">
         <Heading s h3>Available bindings</Heading>
-    <Spacer medium />
         <Input extraThin placeholder="Search" bind:value={search} />
-    <Spacer medium />
+      </div>
+      <div class="section">
         {#each categories as [categoryName, bindings]}
           <Heading xs h4>{categoryName}</Heading>
-      <Spacer extraSmall />
-      {#each bindableProperties.filter(binding =>
+          {#each bindableProperties.filter((binding) =>
             binding.label.match(searchRgx)
           ) as binding}
             <div class="binding" on:click={() => addToText(binding)}>
               <span class="binding__label">{binding.label}</span>
               <span class="binding__type">{binding.type}</span>
               <br />
-          <div class="binding__description">{binding.description || ''}</div>
+              <div class="binding__description">
+                {binding.description || ""}
+              </div>
             </div>
           {/each}
         {/each}
+      </div>
+      <div class="section">
         <Heading xs h3>Helpers</Heading>
-    <Spacer extraSmall />
-    {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
+        {#each helpers.filter((helper) => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
           <div class="binding" on:click={() => addToText(helper)}>
             <span class="binding__label">{helper.label}</span>
             <br />
             <div class="binding__description">
-          {@html helper.description || ''}
+              {@html helper.description || ""}
             </div>
             <pre>{helper.example || ''}</pre>
           </div>
         {/each}
       </div>
+    </Layout>
+  </div>
   <div class="text">
     <TextArea
       bind:getCaretPosition
       thin
       bind:value
-      placeholder="Add text, or click the objects on the left to add them to the textbox." />
+      placeholder="Add text, or click the objects on the left to add them to the textbox."
+    />
     {#if !validity}
       <p class="syntax-error">
         Current Handlebars syntax is invalid, please check the guide
@@ -98,22 +105,17 @@
     height: 40vh;
     overflow-y: auto;
     display: grid;
-    grid-template-columns: 280px 1fr;
+    grid-template-columns: 290px 1fr;
   }
 
   .list {
+    grid-gap: var(--spacing-s);
     border-right: var(--border-light);
-    padding: var(--spacing-l);
-    overflow: auto;
+    overflow-y: auto;
   }
-  .list {
-    border-right: var(--border-light);
-    padding: var(--spacing-l);
-    overflow: auto;
-  }
-
-  .list::-webkit-scrollbar {
-    display: none;
+  .section {
+    display: grid;
+    grid-gap: var(--spacing-s);
   }
 
   .text {
@@ -159,21 +161,6 @@
     font-weight: 500;
   }
 
-  .editor {
-    padding-left: var(--spacing-l);
-  }
-  .editor :global(textarea) {
-    min-height: 60px;
-  }
-
-  .controls {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    grid-gap: var(--spacing-l);
-    align-items: center;
-    margin-top: var(--spacing-m);
-  }
-
   .syntax-error {
     color: var(--red);
     font-size: 12px;