Fix table height when no rows exist and fixed row count specified

packages/bbui/src/Table/Table.svelte

@@ -70,7 +70,7 @@
   }
 
   const getContentStyle = (visibleRows, rowCount) => {
-    if (!rowCount) {
+    if (!rowCount || !visibleRows) {
       return ""
     }
     return `height: ${headerHeight + visibleRows * (rowHeight + 1)}px;`
@@ -318,16 +318,15 @@
       var(--spectrum-alias-background-color-default);
   }
   .container::-webkit-scrollbar {
-    width: 16px;
+    width: 10px;
-    height: 16px;
+    height: 10px;
   }
   .container::-webkit-scrollbar-track {
     background: var(--spectrum-alias-background-color-default);
   }
   .container::-webkit-scrollbar-thumb {
     background-color: var(--spectrum-global-color-gray-400);
-    border-radius: 20px;
+    border-radius: 4px;
-    border: 4px solid var(--spectrum-alias-background-color-default);
   }
   .container::-webkit-scrollbar-corner {
     background: var(--spectrum-alias-background-color-default);

packages/builder/src/components/common/Checkbox.svelte

@@ -1,114 +0,0 @@
-<script>
-  import { createEventDispatcher } from "svelte"
-
-  const dispatch = createEventDispatcher()
-
-  export let checked = false
-
-  function handleChange() {
-    checked = !checked
-    dispatch("change", checked)
-  }
-</script>
-
-<input type="checkbox" class="checkbox" id="_checkbox" />
-<div class="checkbox-container" on:click={handleChange}>
-  <div class="check-div" class:checked>
-    <div class="tick_mark" />
-  </div>
-</div>
-
-<style>
-  .checkbox-container {
-    position: relative;
-    z-index: 0;
-  }
-
-  .checkbox {
-    display: none;
-  }
-
-  .check-div {
-    position: relative;
-    width: 20px;
-    height: 20px;
-    background-color: var(--grey-2);
-    cursor: pointer;
-    transition: 0.2s ease transform, 0.2s ease background-color,
-      0.2s ease box-shadow;
-    overflow: hidden;
-    border-radius: 4px;
-  }
-
-  .check-div:before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    right: 0;
-    left: 0;
-    width: 12px;
-    height: 12px;
-    margin: 0 auto;
-    background-color: var(--background);
-    transform: translateY(-50%);
-    transition: 0.2s ease width, 0.2s ease height;
-    border-radius: 2px;
-  }
-
-  .check-div:active {
-    transform: translateY(-50%) scale(0.9);
-  }
-
-  .tick_mark {
-    position: absolute;
-    top: 50%;
-    left: 6px;
-    width: 5px;
-    height: 4px;
-    margin: 0 auto;
-    transform: rotateZ(-40deg);
-  }
-
-  .tick_mark:before,
-  .tick_mark:after {
-    content: "";
-    position: absolute;
-    background-color: var(--ink);
-    border-radius: 2px;
-    opacity: 0;
-    transition: 0.2s ease transform, 0.2s ease opacity;
-  }
-
-  .tick_mark:before {
-    left: 0;
-    bottom: 0;
-    width: 2px;
-    height: 6px;
-    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
-    transform: translateY(-68px);
-  }
-
-  .tick_mark:after {
-    left: 0;
-    bottom: 0;
-    width: 12px;
-    height: 2px;
-    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
-    transform: translateX(78px);
-  }
-
-  .checked {
-    background-color: var(--grey-2);
-  }
-
-  .checked:before {
-    width: 0;
-    height: 0;
-  }
-
-  .checked .tick_mark:before,
-  .checked .tick_mark:after {
-    transform: translate(0);
-    opacity: 1;
-  }
-</style>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/Checkbox.svelte

@@ -1,7 +0,0 @@
-<script>
-  import Checkbox from "components/common/Checkbox.svelte"
-
-  export let value
-</script>
-
-<Checkbox checked={value} on:change />

packages/builder/src/components/design/PropertiesPanel/PropertyControls/Input.svelte

@@ -1,11 +0,0 @@
-<script>
-  /*
-  This file exists because of how we pass this control to the 
-  properties panel - via a JS reference, not using svelte tags
-  ... checkout the use of Input in propertyCategories to see what i mean
-  */
-  import { Input } from "@budibase/bbui"
-  export let name, value, placeholder, type
-</script>
-
-<Input {name} {value} {placeholder} {type} extraThin on:change />