From fa6ad0daec436238492a2cb2f1b2d2863408ef2a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 6 Sep 2024 08:46:09 +0100
Subject: [PATCH] Fix issue with enriching screen definitions causing bad
 component instances to be parsed

---
 packages/client/src/components/Component.svelte          | 2 +-
 packages/client/src/components/Screen.svelte             | 7 +++----
 .../src/components/app/container/GridContainer.svelte    | 9 ++-------
 3 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index b65d7b0cdc..9c8aada1bc 100644
--- a/packages/client/src/components/Component.svelte
+++ b/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 = {
diff --git a/packages/client/src/components/Screen.svelte b/packages/client/src/components/Screen.svelte
index 2d62b2f810..bf91a3a6df 100644
--- a/packages/client/src/components/Screen.svelte
+++ b/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}
diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index bbcdbbf689..4dc75f3513 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/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)