From 59614ddd26998684967b009f6d7118d01ef30339 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 23 Apr 2021 11:39:39 +0100
Subject: [PATCH] Add custom scrollbars and fix page heights

---
 packages/bbui/src/Table/Table.svelte          | 17 ---------------
 packages/builder/src/global.css               | 21 +++++++++++++++++++
 .../[application]/automate/_layout.svelte     |  3 ++-
 .../builder/[application]/data/_layout.svelte |  3 ++-
 .../design/[assetType]/_layout.svelte         |  3 ++-
 5 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index 1dafe44229..3c7c224555 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -313,23 +313,6 @@
     height: 100%;
     position: relative;
     overflow: auto;
-    scrollbar-width: thin;
-    scrollbar-color: var(--spectrum-global-color-gray-400)
-      var(--spectrum-alias-background-color-default);
-  }
-  .container::-webkit-scrollbar {
-    width: 10px;
-    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: 4px;
-  }
-  .container::-webkit-scrollbar-corner {
-    background: var(--spectrum-alias-background-color-default);
   }
   .container.quiet {
     border: none !important;
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index 28490782aa..298513bd23 100644
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@@ -55,4 +55,25 @@ body {
 
 * + .bb-margin-xl {
     margin-top: var(--spacing-xl);
+}
+
+/* Custom scrollbars */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: var(--spectrum-alias-background-color-default);
+}
+::-webkit-scrollbar-thumb {
+    background-color: var(--spectrum-global-color-gray-400);
+    border-radius: 4px;
+}
+::-webkit-scrollbar-corner {
+    background: var(--spectrum-alias-background-color-default);
+}
+html * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--spectrum-global-color-gray-400)
+    var(--spectrum-alias-background-color-default);
 }
\ No newline at end of file
diff --git a/packages/builder/src/pages/builder/[application]/automate/_layout.svelte b/packages/builder/src/pages/builder/[application]/automate/_layout.svelte
index 922631a582..3d734cbab0 100644
--- a/packages/builder/src/pages/builder/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/automate/_layout.svelte
@@ -21,7 +21,8 @@
 
 <style>
   .root {
-    height: calc(100% - 60px);
+    flex: 1 1 auto;
+    height: 0;
     display: grid;
     grid-template-columns: 260px minmax(510px, 1fr) 260px;
   }
diff --git a/packages/builder/src/pages/builder/[application]/data/_layout.svelte b/packages/builder/src/pages/builder/[application]/data/_layout.svelte
index eb54110b4f..f6e4acbb94 100644
--- a/packages/builder/src/pages/builder/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/_layout.svelte
@@ -66,7 +66,8 @@
 
 <style>
   .root {
-    height: calc(100vh - 60px);
+    flex: 1 1 auto;
+    height: 0;
     display: grid;
     grid-template-columns: 260px minmax(0, 1fr);
   }
diff --git a/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
index 3ba2558fc7..38562fbfa7 100644
--- a/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
@@ -168,7 +168,8 @@
     display: grid;
     grid-template-columns: 260px 1fr 260px;
     align-items: stretch;
-    height: calc(100vh - 60px);
+    flex: 1 1 auto;
+    height: 0;
   }
 
   .ui-nav {