Conflicts from PR #122 from @pngwyn

packages/builder/src/PackageRoot.svelte

@@ -56,7 +56,6 @@
     height: 48px;
     background: white;
     padding: 0px 15px 0 1.8rem;
-    width: 100%;
     display: flex;
     align-items: center;
     border-bottom: 1px solid #ddd;

packages/builder/src/common/Select.svelte

@@ -37,7 +37,6 @@
     appearance: none;
     background: #fff;
     border: 1px solid #ccc;
-    height: 35px;
   }
 
   .arrow {

packages/builder/src/userInterface/ComponentSelectionList.svelte

@@ -35,13 +35,16 @@
   $: templatesByComponent = groupBy(t => t.component)($store.templates)
   $: hierarchy = $store.hierarchy
   $: libraryModules = $store.libraries
-  $: standaloneTemplates = pipe(templatesByComponent, [
+  $: standaloneTemplates = pipe(
+    templatesByComponent,
+    [
       values,
       flatten,
       filter(t => !$store.components.some(c => c.name === t.component)),
       map(t => ({ name: splitName(t.component).componentName, template: t })),
       uniqBy(t => t.name),
-  ])
+    ]
+  )
 
   const addRootComponent = (component, allComponents) => {
     const { libName } = splitName(component.name)
@@ -122,7 +125,7 @@
   </Select>
 
   <div class="library-container">
-    <ul>
+    <!-- <ul>
       <li>
         <button
           class:selected={current_view === 'text'}
@@ -144,7 +147,7 @@
           <ImageIcon />
         </button>
       </li>
-    </ul>
+    </ul> -->
 
     {#if componentLibrary}
       {#each generate_components_list(componentLibrary.components) as component}
@@ -221,9 +224,10 @@
   }
 
   .library-container {
-    padding: 0 0 10px 10px;
+    padding: 0 0 10px 0;
     flex: 1 1 auto;
     min-height: 0px;
+    margin-top: 20px;
   }
 
   .component-container {
@@ -237,7 +241,7 @@
     cursor: pointer;
     border: 1px solid #ebebeb;
     border-radius: 2px;
-    margin: 10px 0;
+    margin: 5px 0;
     height: 40px;
     box-sizing: border-box;
     color: #163057;
@@ -300,7 +304,7 @@
     border-radius: 5px;
   }
 
-  li button {
+  /* li button {
     width: 100%;
     height: 100%;
     background: none;
@@ -309,12 +313,12 @@
     padding: 12px;
     outline: none;
     cursor: pointer;
-  }
+  } */
 
-  .selected {
+  /* .selected {
     color: var(--button-text);
     background: var(--background-button) !important;
-  }
+  } */
 
   .open {
     color: rgba(0, 85, 255, 1);

packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte

@@ -21,18 +21,18 @@
   {#if $store.currentFrontEndType === 'page' || $store.screens.length}
     <div class="switcher">
 
-      <button
-        class:selected={selected === PROPERTIES_TAB}
-        on:click={() => selectTab(PROPERTIES_TAB)}>
-        Properties
-      </button>
-
       <button
         class:selected={selected === COMPONENT_SELECTION_TAB}
         on:click={() => selectTab(COMPONENT_SELECTION_TAB)}>
         Components
       </button>
 
+      <button
+        class:selected={selected === PROPERTIES_TAB}
+        on:click={() => selectTab(PROPERTIES_TAB)}>
+        Properties
+      </button>
+
     </div>
 
     <div class="panel">
@@ -56,13 +56,14 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    padding: 2rem 1.5rem 2rem 1.5rem;
+    padding: 2rem 0;
   }
 
   .switcher {
     display: flex;
     justify-content: space-between;
     margin-bottom: 25px;
+    padding: 0 1.5rem;
   }
 
   .switcher > button {
@@ -86,5 +87,6 @@
     flex: 1 1 auto;
     height: 0px;
     overflow-y: auto;
+    padding: 0 1.5rem 1.5rem 1.5rem;
   }
 </style>

packages/builder/src/userInterface/UserInterfaceRoot.svelte

@@ -119,9 +119,11 @@
   .ui-nav {
     grid-column: 1;
     background-color: var(--secondary5);
-    height: 100%;
+    height: calc(100vh - 49px);
-    padding: 0 1.5rem 0rem 0;
+    padding: 0;
-    overflow-y: auto;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
   }
 
   .preview-pane {
@@ -209,4 +211,9 @@
     margin-top: 1.5rem;
     width: calc(100% + 1.5rem);
   }
+
+  .components-list-container {
+    overflow: auto;
+    padding: 0 30px 0 0;
+  }
 </style>