"Master Layout" > "Page Layout" .. and moved above screens

packages/builder/src/components/userInterface/MasterLayout.svelte → packages/builder/src/components/userInterface/PageLayout.svelte

@@ -52,22 +52,20 @@
 
 <div>
   <div
-    class="budibase__nav-item"
+    class="budibase__nav-item root"
     class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
     on:click|stopPropagation={() => store.setScreenType('page')}>
     <span
       class="icon"
       class:rotate={$store.currentPreviewItem.name !== _layout.title}>
-      {#if _layout.component.props._children.length}
-        <ArrowDownIcon />
-      {/if}
+      <ArrowDownIcon />
     </span>
 
     <span class="icon">
       <GridIcon />
     </span>
 
-    <span class="title">Master Layout</span>
+    <span class="title">Page Layout</span>
   </div>
 
   {#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children}
@@ -90,6 +88,9 @@
   onOk={() => store.deleteComponent(componentToDelete)} />
 
 <style>
+  .root {
+    
+  }
   .title {
     margin-left: 10px;
     margin-top: 2px;

packages/builder/src/components/userInterface/UserInterfaceRoot.svelte

@@ -1,7 +1,7 @@
 <script>
   import ComponentsHierarchy from "./ComponentsHierarchy.svelte"
   import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
-  import MasterLayout from "./MasterLayout.svelte"
+  import PageLayout from "./PageLayout.svelte"
   import PagesList from "./PagesList.svelte"
   import { store } from "builderStore"
   import IconButton from "components/common/IconButton.svelte"
@@ -55,6 +55,10 @@
 
     <div class="border-line" />
 
+    <PageLayout layout={$store.pages[$store.currentPageName]} />
+
+    <div class="border-line" />
+
     <div class="components-list-container">
       <div class="nav-group-header">
         <span class="components-nav-header" style="margin-top: 0;">
@@ -67,7 +71,6 @@
         </div>
       </div>
       <div class="nav-items-container">
-        <MasterLayout layout={$store.pages[$store.currentPageName]} />
         <ComponentsHierarchy screens={$store.screens} />
       </div>
     </div>