From 8bf3595015a45b0846bf6090e9925dde82cec1ce Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 10 May 2022 14:37:00 +0100
Subject: [PATCH] Update layouts to support legacy page widths while allowing
 new screens to determine their own width

---
 .../client/src/components/app/Layout.svelte   | 32 ++++++-------------
 1 file changed, 10 insertions(+), 22 deletions(-)

diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 93cbb84e6d..a7733c035f 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -23,18 +23,17 @@
   export let navBackground
   export let navTextColor
   export let navWidth
-  export let pageWidth
 
   const NavigationClasses = {
     Top: "top",
     Left: "left",
     None: "none",
   }
-  const WidthClasses = {
-    Max: "max",
-    Large: "l",
-    Medium: "m",
-    Small: "s",
+  const WidthStyles = {
+    Max: "100%",
+    Large: "1400px",
+    Medium: "1100px",
+    Small: "800px",
   }
 
   // Set some layout context. This isn't used in bindings but can be used
@@ -49,8 +48,8 @@
 
   $: validLinks = links?.filter(link => link.text && link.url) || []
   $: typeClass = NavigationClasses[navigation] || NavigationClasses.None
-  $: navWidthClass = WidthClasses[navWidth || width] || WidthClasses.Large
-  $: pageWidthClass = WidthClasses[pageWidth || width] || WidthClasses.Large
+  $: navWidthStyle = WidthStyles[navWidth || width] || WidthStyles.Large
+  $: pageWidthStyle = WidthStyles[width] || WidthStyles.Max
   $: navStyle = getNavStyle(
     navBackground,
     navTextColor,
@@ -117,7 +116,7 @@
       on:click={$builderStore.inBuilder ? builderStore.actions.clickNav : null}
       style={navStyle}
     >
-      <div class="nav nav--{typeClass} size--{navWidthClass}">
+      <div class="nav nav--{typeClass}" style={`width: ${navWidthStyle};`}>
         <div class="nav-header">
           {#if validLinks?.length}
             <div class="burger">
@@ -184,7 +183,7 @@
     </div>
   {/if}
   <div class="main-wrapper">
-    <div class="main size--{pageWidthClass}">
+    <div class="main" style={`--pageWidth: ${pageWidthStyle};`}>
       <slot />
     </div>
   </div>
@@ -275,22 +274,11 @@
     max-width: 100%;
     position: relative;
     padding: 32px;
+    width: 100%;
   }
   .layout--none .main {
     padding: 0;
   }
-  .size--s {
-    width: 800px;
-  }
-  .size--m {
-    width: 1100px;
-  }
-  .size--l {
-    width: 1400px;
-  }
-  .size--max {
-    width: 100%;
-  }
 
   /*  Nav components */
   .burger {