Add screen width setting with backwards compatibility

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte

@@ -9,6 +9,7 @@
     Toggle,
     Checkbox,
     Banner,
+    Select,
     notifications,
   } from "@budibase/bbui"
   import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
@@ -135,6 +136,15 @@
         text: "Show navigation",
       },
     },
+    {
+      key: "width",
+      label: "Width",
+      control: Select,
+      props: {
+        options: ["Extra small", "Small", "Medium", "Large", "Max"],
+        placeholder: "Default",
+      },
+    },
   ]
 
   const removeCustomLayout = async () => {

packages/client/src/components/app/Layout.svelte

@@ -23,17 +23,19 @@
   export let navBackground
   export let navTextColor
   export let navWidth
+  export let pageWidth
 
   const NavigationClasses = {
     Top: "top",
     Left: "left",
     None: "none",
   }
-  const WidthStyles = {
+  const WidthClasses = {
-    Max: "100%",
+    Max: "max",
-    Large: "1400px",
+    Large: "l",
-    Medium: "1100px",
+    Medium: "m",
-    Small: "800px",
+    Small: "s",
+    "Extra small": "xs",
   }
 
   // Set some layout context. This isn't used in bindings but can be used
@@ -48,8 +50,8 @@
 
   $: validLinks = links?.filter(link => link.text && link.url) || []
   $: typeClass = NavigationClasses[navigation] || NavigationClasses.None
-  $: navWidthStyle = WidthStyles[navWidth || width] || WidthStyles.Large
+  $: navWidthClass = WidthClasses[navWidth || width] || WidthClasses.Large
-  $: pageWidthStyle = WidthStyles[width] || WidthStyles.Max
+  $: pageWidthClass = WidthClasses[pageWidth || width] || WidthClasses.Large
   $: navStyle = getNavStyle(
     navBackground,
     navTextColor,
@@ -116,7 +118,7 @@
       on:click={$builderStore.inBuilder ? builderStore.actions.clickNav : null}
       style={navStyle}
     >
-      <div class="nav nav--{typeClass}" style={`width: ${navWidthStyle};`}>
+      <div class="nav nav--{typeClass} size--{navWidthClass}">
         <div class="nav-header">
           {#if validLinks?.length}
             <div class="burger">
@@ -183,7 +185,7 @@
     </div>
   {/if}
   <div class="main-wrapper">
-    <div class="main" style={`--pageWidth: ${pageWidthStyle};`}>
+    <div class="main size--{pageWidthClass}">
       <slot />
     </div>
   </div>
@@ -274,11 +276,25 @@
     max-width: 100%;
     position: relative;
     padding: 32px;
-    width: 100%;
   }
   .layout--none .main {
     padding: 0;
   }
+  .size--xs {
+    width: 400px;
+  }
+  .size--s {
+    width: 800px;
+  }
+  .size--m {
+    width: 1100px;
+  }
+  .size--l {
+    width: 1400px;
+  }
+  .size--max {
+    width: 100%;
+  }
 
   /*  Nav components */
   .burger {

packages/client/src/stores/screens.js

@@ -44,10 +44,13 @@ const createScreenStore = () => {
       if (!activeLayout) {
         let navigationSettings = {
           navigation: "None",
+          pageWidth: activeScreen?.width || "Large",
         }
         if (activeScreen?.showNavigation) {
-          navigationSettings =
+          navigationSettings = {
-            $builderStore.navigation || $appStore.application?.navigation || {}
+            ...navigationSettings,
+            ...($builderStore.navigation || $appStore.application?.navigation),
+          }
 
           // Default navigation to top
           if (!navigationSettings.navigation) {