From 6b1404b7059acd1f1fac6801c207a5a4f4ea6a8a Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 20 Sep 2019 09:02:22 +0100
Subject: [PATCH] scolling properties pane

---
 packages/builder/src/userInterface/EditComponent.svelte   | 8 +++++++-
 .../builder/src/userInterface/UserInterfaceRoot.svelte    | 2 ++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/userInterface/EditComponent.svelte b/packages/builder/src/userInterface/EditComponent.svelte
index a95e19f722..4279ce5423 100644
--- a/packages/builder/src/userInterface/EditComponent.svelte
+++ b/packages/builder/src/userInterface/EditComponent.svelte
@@ -155,7 +155,7 @@ const componentInstancePropsChanged = (instanceProps) => {
                              instanceProps={editingComponentInstance}
                              onPropsChanged={componentInstancePropsChanged}/>
     {:else}
-    <div>
+    <div class="component-props-container">
 
         <div class="section-header padding" on:click={() => componentDetailsExpanded = !componentDetailsExpanded}>
             <span style="margin-right: 7px">Component Details</span>
@@ -232,6 +232,8 @@ const componentInstancePropsChanged = (instanceProps) => {
     border-style: solid;
     border-color: var(--lightslate);
     border-width: 0px 0px 0px 1px;
+    display:flex;
+    flex-direction: column;
 }
 
 .padding {
@@ -267,4 +269,8 @@ const componentInstancePropsChanged = (instanceProps) => {
     margin-top: 20px;
 }
 
+.component-props-container {
+    flex: 1 1 auto;
+    overflow-y: auto;
+}
 </style>
\ No newline at end of file
diff --git a/packages/builder/src/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/userInterface/UserInterfaceRoot.svelte
index a77a9fc7e6..27dc4a7577 100644
--- a/packages/builder/src/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/userInterface/UserInterfaceRoot.svelte
@@ -88,6 +88,7 @@ const settings = () => {
     grid-template-columns: [uiNav] 250px [preview] auto [properties] 300px;
     height: 100%;
     width: 100%;
+    overflow-y: auto;
 }
 
 .ui-nav {
@@ -100,6 +101,7 @@ const settings = () => {
     grid-column-start: properties;
     background-color: var(--primary10);
     height: 100%;
+    overflow-y: hidden;
 }
 
 .pages-list-container {