Remove scrolling from tables when not required and stop selects from updating their own state locally

packages/bbui/src/Form/Select.svelte

@@ -1,7 +1,6 @@
 <script>
   import Field from "./Field.svelte"
   import Select from "./Core/Select.svelte"
-  import { createEventDispatcher } from "svelte"
 
   export let value = null
   export let label = undefined
@@ -21,12 +20,6 @@
   export let sort = false
   export let tooltip = ""
 
-  const dispatch = createEventDispatcher()
-  const onChange = e => {
-    value = e.detail
-    dispatch("change", e.detail)
-  }
-
   const extractProperty = (value, property) => {
     if (value && typeof value === "object") {
       return value[property]
@@ -51,7 +44,7 @@
     {getOptionIcon}
     {getOptionColour}
     {isOptionEnabled}
-    on:change={onChange}
+    on:change
     on:click
   />
 </Field>

packages/bbui/src/Table/Table.svelte

@@ -300,7 +300,11 @@
         </slot>
       </div>
     {:else}
-      <div class="spectrum-Table" style={`${heightStyle}${gridStyle}`}>
+      <div
+        class="spectrum-Table"
+        class:no-scroll={!rowCount}
+        style={`${heightStyle}${gridStyle}`}
+      >
         {#if fields.length}
           <div class="spectrum-Table-head">
             {#if showEditColumn}
@@ -443,7 +447,6 @@
   /* Wrapper */
   .wrapper {
     position: relative;
-    z-index: 0;
     --table-bg: var(--spectrum-global-color-gray-50);
     --table-border: 1px solid var(--spectrum-alias-border-color-mid);
     --cell-padding: var(--spectrum-global-dimension-size-250);
@@ -470,6 +473,9 @@
     display: grid;
     overflow: auto;
   }
+  .spectrum-Table.no-scroll {
+    overflow: visible;
+  }
 
   /* Header */
   .spectrum-Table-head {