Disable new screens settings when viewing an old screen and correctly upgrade all screen settings when detaching from custom layouts

packages/builder/src/builderStore/store/frontend.js

@@ -290,12 +290,8 @@ export const getFrontendStore = () => {
         // Pull relevant settings from old layout, if required
         const layout = get(store).layouts.find(x => x._id === screen.layoutId)
         screen.layoutId = null
-        if (screen.showNavigation == null) {
-          screen.showNavigation = layout?.props.navigation !== "None"
-        }
-        if (screen.width == null) {
-          screen.width = layout?.props.width || "Large"
-        }
+        screen.showNavigation = layout?.props.navigation !== "None"
+        screen.width = layout?.props.width || "Large"
         await store.actions.screens.save(screen)
       },
     },

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

@@ -90,7 +90,7 @@
     }
   }
 
-  const screenSettings = [
+  $: screenSettings = [
     {
       key: "routing.homeScreen",
       control: Checkbox,
@@ -134,6 +134,7 @@
       control: Toggle,
       props: {
         text: "Show navigation",
+        disabled: !!$selectedScreen.layoutId,
       },
     },
     {
@@ -143,6 +144,7 @@
       props: {
         options: ["Extra small", "Small", "Medium", "Large", "Max"],
         placeholder: "Default",
+        disabled: !!$selectedScreen.layoutId,
       },
     },
   ]