scrolling backend nav

packages/builder/src/nav/BackendNav.svelte

@@ -45,7 +45,7 @@ store.subscribe(db => {
 
 </script>
 
-<div class="root">
+
 <div class="items-root">
     <div class="hierarchy">
         <div class="components-list-container">
@@ -56,6 +56,7 @@ store.subscribe(db => {
             </div>
         </div>
 
+        <div class="hierarchy-items-container">
             {#each $store.hierarchy.children as record}
             <HierarchyRow node={record}
                         type="record" />
@@ -65,33 +66,24 @@ store.subscribe(db => {
             <HierarchyRow node={index}
                         type="index" />
             {/each}
-
+        </div>
     </div>
 
     <NavItem name="actions" label="Actions & Triggers"/>
     <NavItem name="access levels" label="User Levels"/>
-        <div class="space-filler"></div>
-    </div>
+
 </div>
 
+
 <style>
 
-.root {
-    height: 100%;
-    background-color: var(--secondary5);
-}
 
 .items-root {
     display: flex;
     flex-direction: column;
     max-height: 100%;
-    height: 1rem;
-}
-
-
-
-.nav-items-container {
-    padding: 2rem 1rem 0rem 1rem;
+    height: 100%;
+    background-color: var(--secondary5);
 }
 
 .nav-group-header {
@@ -109,7 +101,7 @@ store.subscribe(db => {
     margin-right: 5px;
 }
 
-.nav-group-header>span:nth-child(2) {
+.nav-group-header>div:nth-child(2) {
     margin-left:5px;
     vertical-align: bottom;
     grid-column-start: title;
@@ -127,21 +119,21 @@ store.subscribe(db => {
     color: var(--primary75);   
 }
 
-
-.hierarchy-title-row {
-    padding: 2rem 1rem 0rem 1rem;
-    font-size: 1rem;
-    font-weight: bold;
-}
-
 .hierarchy-title {
     flex: auto 1 1;
 }
 
 
+.hierarchy {
+    display:flex;
+    flex-direction: column;
+    flex: 1 0 auto;
+    height: 100px;
+}
 
-.space-filler {
+.hierarchy-items-container {
     flex: 1 1 auto;
+    overflow-y:auto;
 }