Merge branch 'master' into navigation-tidy-up

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": {

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

@@ -44,11 +44,13 @@
     flex-direction: column;
     padding: 20px 20px;
     border-left: solid 1px var(--grey);
+    box-sizing: border-box;
   }
 
   .switcher {
     display: flex;
     margin: 0px 20px 20px 0px;
+    box-sizing: border-box;
   }
 
   .switcher > button {
@@ -67,4 +69,9 @@
   .switcher > .selected {
     color: var(--ink);
   }
+  
+  .panel {
+    min-height: 0;
+    overflow-y: auto;
+  }
 </style>

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>

packages/builder/src/global.css

@@ -88,6 +88,8 @@ html, body {
 
 #app {
     height: 100%;
+    box-sizing: border-box;
+    overflow-y: hidden;
 }
 
 h1 {

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;

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) {