UI update to the Table dropdown

Spacing within the dropdown improved. Utilised new components from bbui.
Attempted to change the dropdown button to a select so it was consistent with the other inputs but failed.
I did improve the dropdown button by ensuring the width remains the same when selecting different values.

packages/builder/src/components/userInterface/ModelViewSelect.svelte

@@ -1,10 +1,10 @@
 <script>
-  import { Button, Icon, DropdownMenu } from "@budibase/bbui"
+  import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { backendUiStore } from "builderStore"
 
   const dispatch = createEventDispatcher()
-  let anchor, dropdown
+  let anchorRight, dropdownRight
 
   export let value = {}
 
@@ -30,21 +30,17 @@
   }, [])
 </script>
 
-<div bind:this={anchor}>
+<div class="dropdownbutton" bind:this={anchorRight}>
-  <Button secondary small on:click={dropdown.show}>
+  <Button secondary wide on:click={dropdownRight.show}>
     <span>{value.label ? value.label : 'Model / View'}</span>
     <Icon name="arrowdown" />
   </Button>
 </div>
-<DropdownMenu
+<DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
-  bind:this={dropdown}
+  <div class="dropdown">
-  width="175px"
+    <div class="title">
-  borderColor="#d1d1d1ff"
+      <Heading extraSmall>Tables</Heading>
-  {anchor}
+    </div>
-  align="right">
-  <div class="model-view-container">
-    <p>Tables</p>
-
     <ul>
       {#each models as model}
         <li
@@ -55,7 +51,9 @@
       {/each}
     </ul>
     <hr />
-    <p>Views</p>
+    <div class="title">
+      <Heading extraSmall>Views</Heading>
+    </div>
     <ul>
       {#each views as view}
         <li
@@ -69,23 +67,18 @@
 </DropdownMenu>
 
 <style>
-  .model-view-container {
+  .dropdownbutton {
-    padding-bottom: 8px;
+    width: 100%;
-    font: var(--smallheavybodytext);
   }
-
+  .dropdown {
-  p {
+    padding: var(--spacing-m) 0;
-    color: var(--grey-7);
-    margin: 0px;
-    padding: 8px;
   }
-
+  .title {
-  span {
+    padding: 0 var(--spacing-m) var(--spacing-xs) var(--spacing-m);
-    text-transform: capitalize;
   }
 
   hr {
-    margin: 10px 0px 5px 0px;
+    margin: var(--spacing-m) 0 var(--spacing-xl) 0;
   }
 
   ul {
@@ -97,7 +90,8 @@
   li {
     cursor: pointer;
     margin: 0px;
-    padding: 5px 8px;
+    padding: var(--spacing-s) var(--spacing-m);
+    font-size: var(--font-size-xs);
   }
 
   .selected {