Update how screen layout param is handled

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte

@@ -126,7 +126,7 @@
       },
     },
     {
-      key: "layout",
+      key: "props.layout",
       label: "Layout",
       defaultValue: "flex",
       control: BarButtonList,

packages/client/src/components/Router.svelte

@@ -71,4 +71,7 @@
   div {
     position: relative;
   }
+  div :global(> .component > *) {
+    flex: 1 1 auto;
+  }
 </style>

packages/client/src/components/Screen.svelte

@@ -13,29 +13,10 @@
   const onLoadActions = memo()
 
   // Get the screen definition for the current route
-  $: screenDefinition = getScreenDefinition($screenStore.activeScreen)
+  $: screenDefinition = $screenStore.activeScreen?.props
   $: onLoadActions.set($screenStore.activeScreen?.onLoad)
   $: runOnLoadActions($onLoadActions, params)
 
-  const getScreenDefinition = activeScreen => {
-    if (!activeScreen) {
-      return null
-    }
-
-    // Enrich screen definition with some builder screen props and styles
-    return {
-      ...activeScreen.props,
-      layout: activeScreen.layout,
-      _styles: {
-        ...activeScreen.props._styles,
-        normal: {
-          ...activeScreen.props._styles?.normal,
-          flex: "1 1 auto",
-        },
-      },
-    }
-  }
-
   // Enrich and execute any on load actions.
   // We manually construct the full context here as this component is the
   // one that provides the url context, so it is not available in $context yet

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

@@ -37,7 +37,6 @@
   export let openLogoLinkInNewTab
   export let textAlign
   export let embedded = false
-  export let pageLayout = "flex"
 
   const NavigationClasses = {
     Top: "top",
@@ -319,7 +318,7 @@
         }
       }}
     >
-      <div class="main size--{pageWidthClass} layout--{pageLayout}">
+      <div class="main size--{pageWidthClass}">
         <slot />
       </div>
     </div>
@@ -481,7 +480,7 @@
     position: relative;
     padding: 32px;
   }
-  .main.layout--grid {
+  .main:has(> .grid) {
     padding-top: 0;
     padding-bottom: 0;
   }

packages/client/src/components/preview/IndicatorSet.svelte

@@ -1,9 +1,10 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import Indicator from "./Indicator.svelte"
-  import { builderStore, componentStore } from "stores"
+  import { componentStore } from "stores"
   import { memo, Utils } from "@budibase/frontend-core"
   import { writable } from "svelte/store"
+  import { isGridChild } from "utils/grid"
 
   export let componentId = null
   export let color = null
@@ -58,15 +59,7 @@
   const checkInsideGrid = id => {
     const component = document.getElementsByClassName(id)[0]
     const domNode = component?.children[0]
-
-    // Ignore grid itself
-    if (domNode?.classList?.contains("grid")) {
-      return false
-    }
-
-    return component?.parentNode
-      ?.closest?.(".component")
-      ?.childNodes[0]?.classList?.contains("grid")
+    return isGridChild(domNode)
   }
 
   const createIntersectionCallback = idx => entries => {

packages/client/src/stores/screens.js

@@ -132,7 +132,6 @@ const createScreenStore = () => {
         let layoutSettings = {
           navigation: "None",
           pageWidth: activeScreen?.width || "Large",
-          pageLayout: activeScreen?.layout || "flex",
           embedded: $appStore.embedded,
         }
         if (activeScreen?.showNavigation) {

packages/client/src/utils/grid.js

@@ -58,6 +58,10 @@ export const isGridEvent = e => {
 
 // Determines whether a DOM element is an immediate child of a grid
 export const isGridChild = node => {
+  // Ignore grid itself
+  if (node?.classList?.contains("grid")) {
+    return false
+  }
   return node
     ?.closest(".component")
     ?.parentNode.closest(".component")