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">
-        <Spacer medium />
+  <Layout>
+    <Search placeholder="Search" bind:value={search} />
     {#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>
+      </section>
     {/if}
-      <Spacer small />
     {#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>
+      </section>
     {/if}
-      <Spacer small />
+    <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,8 +104,10 @@
           </li>
         {/each}
       </ul>
+    </section>
+  </Layout>
   </svelte:fragment>
-      <svelte:fragment slot="main">
+  <div class="main" slot="main">
     <TextArea
       bind:getCaretPosition
       bind:value
@@ -118,10 +120,17 @@
         for more details.
       </p>
     {/if}
-      </svelte:fragment>
+  </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 {