From d4b2fb57365318069a5d16f5e73e8afe1087ffde Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Mon, 1 Jun 2020 22:04:32 +0100
Subject: [PATCH] bugfix: right nav scrolling

---
 packages/builder/package.json                                 | 2 +-
 .../components/userInterface/ComponentPropertiesPanel.svelte  | 4 ++++
 packages/builder/src/global.css                               | 2 ++
 packages/builder/src/pages/[application]/_reset.svelte        | 2 +-
 .../builder/src/pages/[application]/frontend/_layout.svelte   | 4 ++++
 5 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 81e240d148..8e426deb45 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -51,7 +51,7 @@
     "safe-buffer": "^5.1.2",
     "shortid": "^2.2.8",
     "string_decoder": "^1.2.0",
-    "svelte-simple-modal": "^0.3.0",
+    "svelte-simple-modal": "^0.4.2",
     "uikit": "^3.1.7"
   },
   "devDependencies": {
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index afce0576e1..3e816ba88a 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -105,7 +105,9 @@
     display: flex;
     flex-direction: column;
     overflow-x: hidden;
+    overflow-y:  hidden;
     padding: 20px;
+    box-sizing: border-box;
   }
 
   .title > div:nth-child(1) {
@@ -120,5 +122,7 @@
   .component-props-container {
     margin-top: 20px;
     flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
   }
 </style>
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index dea20e4d26..10c1f376d6 100644
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@@ -88,6 +88,8 @@ html, body {
 
 #app {
     height: 100%;
+    box-sizing: border-box;
+    overflow-y: hidden;
 }
 
 h1 {
diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index 5e3e973ae7..b688662b0a 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -81,7 +81,7 @@
 
 <style>
   .root {
-    height: 100%;
+    min-height: 100%;
     width: 100%;
     display: flex;
     flex-direction: column;
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index cbbb1ebc63..95f3f1fd67 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -76,6 +76,9 @@
     grid-template-columns: 300px 1fr 300px;
     width: 100%;
     background: var(--grey-light);
+    flex: 1;
+    min-height: 0;
+    align-items: stretch;
   }
 
   .ui-nav {
@@ -98,6 +101,7 @@
   .components-pane {
     grid-column: 3;
     background-color: var(--white);
+    min-height: 0;
   }
 
   .nav-group-header > div:nth-child(1) {