From 014d31843748c2fd101e623c2af5402c8f49b928 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 21 Mar 2022 15:40:07 +0000
Subject: [PATCH] Update layouts in nav tree to new full width style

---
 .../LayoutDropdownMenu.svelte                 |  7 ++++++
 .../FrontendNavigatePane.svelte               | 22 +++++++++++++++----
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
index a947d2095f..e54beb9e41 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
@@ -65,3 +65,10 @@
     <Input thin type="text" label="Name" bind:value={name} />
   </ModalContent>
 </Modal>
+
+<style>
+  .icon {
+    display: grid;
+    place-items: center;
+  }
+</style>
diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
index 8a1ae83792..0611d4fc71 100644
--- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
@@ -148,15 +148,21 @@
         </BBUILayout>
         <div class="nav-items-container" bind:this={scrollRef}>
           <ComponentNavigationTree />
-          <div class="overlay" />
         </div>
       </div>
     </Tab>
     <Tab title="Layouts">
       <div class="tab-content-padding">
-        {#each $store.layouts as layout, idx (layout._id)}
-          <Layout {layout} border={idx > 0} />
-        {/each}
+        <div
+          class="nav-items-container nav-items-container--layouts"
+          bind:this={scrollRef}
+        >
+          <div class="layouts-container">
+            {#each $store.layouts as layout, idx (layout._id)}
+              <Layout {layout} border={idx > 0} />
+            {/each}
+          </div>
+        </div>
         <Modal bind:this={newLayoutModal}>
           <NewLayoutModal />
         </Modal>
@@ -212,4 +218,12 @@
     height: 0;
     position: relative;
   }
+  .nav-items-container--layouts {
+    border-top: none;
+    margin-top: calc(-1 * var(--spectrum-global-dimension-static-size-150));
+  }
+
+  .layouts-container {
+    min-width: max-content;
+  }
 </style>