From 5cc4002f326a3a3584928486d2b0b8ee9224a3ad Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 2 Aug 2024 09:22:04 +0100
Subject: [PATCH] Add better support for auto sizing error state components in
 grid layouts

---
 packages/client/manifest.json                   |  4 ++--
 packages/client/src/components/Component.svelte | 10 +++++-----
 packages/client/src/utils/grid.js               | 16 ++++++++--------
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 9b3939854c..46595279b4 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -5344,11 +5344,11 @@
     "hasChildren": false,
     "size": {
       "width": 600,
-      "height": 400
+      "height": 420
     },
     "grid": {
       "hAlign": "stretch",
-      "vAlign": "stretch"
+      "vAlign": "center"
     },
     "settings": [
       {
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index d45b320b35..7aea6ce6b9 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -199,7 +199,7 @@
   $: darkMode = !currentTheme?.includes("light")
 
   // Build up full styles and split them into variables and non-variables
-  $: baseStyles = getBaseStyles(definition)
+  $: baseStyles = getBaseStyles(definition, errorState)
   $: styles = {
     ...baseStyles,
     ...instance._styles?.normal,
@@ -632,11 +632,11 @@
   }
 
   // Generates any required base styles based on the component definition
-  const getBaseStyles = definition => {
+  const getBaseStyles = (definition, errored = false) => {
     return {
-      "--default-width": definition.size?.width || 100,
-      "--default-height": definition.size?.height || 100,
-      ...getBaseGridVars(definition),
+      "--default-width": errored ? 500 : definition.size?.width || 100,
+      "--default-height": errored ? 60 : definition.size?.height || 100,
+      ...getBaseGridVars(definition, errored),
     }
   }
 
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index 4fa8a3e49b..3052199656 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -70,15 +70,15 @@ export const getGridParentID = node => {
 }
 
 // Generates the base set of grid CSS vars from a component definition
-export const getBaseGridVars = definition => {
-  const gridHAlign = definition?.grid?.hAlign || "stretch"
-  const gridVAlign = definition?.grid?.vAlign || "center"
-  const flexStyles = gridVAlign === "stretch" ? "1 1 0" : "0 0 auto"
+export const getBaseGridVars = (definition, errored = false) => {
+  const hAlign = errored ? "stretch" : definition?.grid?.hAlign || "stretch"
+  const vAlign = errored ? "stretch" : definition?.grid?.vAlign || "center"
+  const flexStyles = vAlign === "stretch" ? "1 1 0" : "0 0 auto"
   return {
-    "--grid-desktop-h-align": gridHAlign,
-    "--grid-mobile-h-align": gridHAlign,
-    "--grid-desktop-v-align": gridVAlign,
-    "--grid-mobile-v-align": gridVAlign,
+    "--grid-desktop-h-align": hAlign,
+    "--grid-mobile-h-align": hAlign,
+    "--grid-desktop-v-align": vAlign,
+    "--grid-mobile-v-align": vAlign,
     "--grid-desktop-child-flex": flexStyles,
     "--grid-mobile-child-flex": flexStyles,
   }