Switch bindingPanel to use new Drawer content component

packages/bbui/src/Drawer/DrawerContentWithSidebar.svelte

@@ -21,7 +21,6 @@
   }
   .sidebar {
     border-right: var(--border-light);
-    padding: var(--spacing-l);
     overflow: auto;
   }
 
@@ -30,7 +29,6 @@
   }
 
   .main {
-    padding: var(--spacing-l);
     font-family: var(--font-sans);
   }
   .main :global(textarea) {

packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte

@@ -1,6 +1,6 @@
 <script>
   import groupBy from "lodash/fp/groupBy"
-  import { Search, TextArea, Heading, Spacer, Label, Layout, DrawerContentWithSidebar } from "@budibase/bbui"
+  import { Search, TextArea, Heading, Label, DrawerContentWithSidebar, Layout } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { isValid } from "@budibase/string-templates"
   import {
@@ -58,12 +58,12 @@
 </script>
 
 <DrawerContentWithSidebar>
-  <Search placeholder="Search" bind:value={search} />
+  <svelte:fragment slot="sidebar">
-      <svelte:fragment slot="sidebar">
+  <Layout>
-        <Spacer medium />
+    <Search placeholder="Search" bind:value={search} />
-      {#if context}
+    {#if context}
+      <section>
         <Heading xs h3>Columns</Heading>
-        <Spacer small />
         <ul>
           {#each context.filter((context) =>
             context.readableBinding.match(searchRgx)
@@ -73,11 +73,11 @@
             </li>
           {/each}
         </ul>
-      {/if}
+      </section>
-      <Spacer small />
+    {/if}
-      {#if instance}
+    {#if instance}
+      <section>
         <Heading xs h3>Components</Heading>
-        <Spacer small />
         <ul>
           {#each instance.filter((instance) =>
             instance.readableBinding.match(searchRgx)
@@ -87,10 +87,10 @@
             </li>
           {/each}
         </ul>
-      {/if}
+      </section>
-      <Spacer small />
+    {/if}
+    <section>
       <Heading xs h3>Helpers</Heading>
-      <Spacer small />
       <ul>
         {#each helpers.filter((helper) => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
           <li on:click={() => addToText(helper.text)}>
@@ -104,24 +104,33 @@
           </li>
         {/each}
       </ul>
-      </svelte:fragment>
+    </section>
-      <svelte:fragment slot="main">
+  </Layout>
-        <TextArea
+  </svelte:fragment>
-          bind:getCaretPosition
+  <div class="main" slot="main">
-          bind:value
+    <TextArea
-          placeholder="Add text, or click the objects on the left to add them to the textbox."
+      bind:getCaretPosition
-        />
+      bind:value
-        {#if !valid}
+      placeholder="Add text, or click the objects on the left to add them to the textbox."
-          <p class="syntax-error">
+    />
-            Current Handlebars syntax is invalid, please check the guide
+    {#if !valid}
-            <a href="https://handlebarsjs.com/guide/">here</a>
+      <p class="syntax-error">
-            for more details.
+        Current Handlebars syntax is invalid, please check the guide
-          </p>
+        <a href="https://handlebarsjs.com/guide/">here</a>
-        {/if}
+        for more details.
-      </svelte:fragment>
+      </p>
+    {/if}
+  </div>
 </DrawerContentWithSidebar>
 
 <style>
+  .main {
+    padding: var(--spacing-m)
+  }
+  section {
+    display: grid;
+    grid-gap: var(--spacing-s);
+  }
   ul {
     list-style: none;
     padding-left: 0;
@@ -134,10 +143,11 @@
     font-family: var(--font-sans);
     font-size: var(--font-size-xs);
     color: var(--grey-7);
-    padding: var(--spacing-m) 0;
+    padding: var(--spacing-m);
     margin: auto 0px;
     align-items: center;
     cursor: pointer;
+    border-radius: var(--spacing-s);
     border: var(--border-light);
     border-width: 1px 0 1px 0;
   }
@@ -148,8 +158,8 @@
   }
 
   li:hover {
-    color: var(--ink);
+    background-color: var(--grey-2);
-    font-weight: 500;
+    cursor: pointer;
   }
 
   li:active {