Merge branch 'master' of github.com:Budibase/budibase into new-data-ui

packages/client/src/components/Component.svelte

@@ -201,7 +201,7 @@
 
   // Metadata to pass into grid action to apply CSS
   const checkGrid = x =>
-    x?._component.endsWith("/container") && x?.layout === "grid"
+    x?._component?.endsWith("/container") && x?.layout === "grid"
   $: insideGrid = checkGrid(parent)
   $: isGrid = checkGrid(instance)
   $: gridMetadata = {

packages/client/src/components/Screen.svelte

@@ -14,7 +14,6 @@
 
   // Get the screen definition for the current route
   $: screen = $screenStore.activeScreen
-  $: screenDefinition = { ...screen?.props, addEmptyRows: true }
   $: onLoadActions.set(screen?.onLoad)
   $: runOnLoadActions($onLoadActions, params)
 
@@ -42,10 +41,10 @@
 </script>
 
 <!-- Ensure to fully remount when screen changes -->
-{#if $routeStore.routerLoaded}
-  {#key screenDefinition?._id}
+{#if $routeStore.routerLoaded && screen?.props}
+  {#key screen.props._id}
     <Provider key="url" data={params}>
-      <Component isRoot instance={screenDefinition} />
+      <Component isRoot instance={screen.props} />
     </Provider>
   {/key}
 {/if}

packages/client/src/components/app/container/GridContainer.svelte

@@ -4,8 +4,6 @@
   import { GridRowHeight, GridColumns } from "constants"
   import { memo } from "@budibase/frontend-core"
 
-  export let addEmptyRows = false
-
   const component = getContext("component")
   const { styleable, builderStore } = getContext("sdk")
   const context = getContext("context")
@@ -18,11 +16,8 @@
   let styles = memo({})
 
   $: inBuilder = $builderStore.inBuilder
-  $: requiredRows = calculateRequiredRows(
-    $children,
-    mobile,
-    addEmptyRows && inBuilder
-  )
+  $: addEmptyRows = $component.isRoot && inBuilder
+  $: requiredRows = calculateRequiredRows($children, mobile, addEmptyRows)
   $: requiredHeight = requiredRows * GridRowHeight
   $: availableRows = Math.floor(height / GridRowHeight)
   $: rows = Math.max(requiredRows, availableRows)