From a3431e6884612b095501ee964d4813ac7420666d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 26 Jul 2024 15:41:07 +0100
Subject: [PATCH 001/112] Add initial work on grid layouts in containers

---
 packages/client/manifest.json                 | 101 ++++++++++++++----
 .../client/src/components/app/Repeater.svelte |   2 +-
 .../components/app/container/Container.svelte |  12 +++
 .../FlexContainer.svelte}                     |   0
 .../GridContainer.svelte}                     |   3 +
 packages/client/src/components/app/index.js   |   3 +-
 .../components/preview/GridDNDHandler.svelte  |   2 +-
 .../components/preview/IndicatorSet.svelte    |  16 ++-
 8 files changed, 103 insertions(+), 36 deletions(-)
 create mode 100644 packages/client/src/components/app/container/Container.svelte
 rename packages/client/src/components/app/{Container.svelte => container/FlexContainer.svelte} (100%)
 rename packages/client/src/components/app/{Grid.svelte => container/GridContainer.svelte} (97%)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 37f9c681d6..2559671bab 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -119,6 +119,48 @@
     },
     "styles": ["padding", "size", "background", "border", "shadow"],
     "settings": [
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "layout",
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "Flex",
+            "value": "flex",
+            "barIcon": "ModernGridView",
+            "barTitle": "Flex layout"
+          },
+          {
+            "label": "Grid",
+            "value": "grid",
+            "barIcon": "ViewGrid",
+            "barTitle": "Grid layout"
+          }
+        ],
+        "defaultValue": "flex"
+      },
+      {
+        "type": "number",
+        "label": "Columns",
+        "key": "cols",
+        "placeholder": 12,
+        "dependsOn": {
+          "setting": "layout",
+          "value": "grid"
+        }
+      },
+      {
+        "type": "number",
+        "label": "Rows",
+        "key": "rows",
+        "placeholder": 12,
+        "dependsOn": {
+          "setting": "layout",
+          "value": "grid"
+        }
+      },
       {
         "type": "select",
         "label": "Direction",
@@ -139,7 +181,12 @@
             "barTitle": "Row layout"
           }
         ],
-        "defaultValue": "column"
+        "defaultValue": "column",
+        "dependsOn": {
+          "setting": "layout",
+          "value": "grid",
+          "invert": true
+        }
       },
       {
         "type": "select",
@@ -173,7 +220,12 @@
             "barTitle": "Align stretched horizontally"
           }
         ],
-        "defaultValue": "stretch"
+        "defaultValue": "stretch",
+        "dependsOn": {
+          "setting": "layout",
+          "value": "grid",
+          "invert": true
+        }
       },
       {
         "type": "select",
@@ -207,7 +259,12 @@
             "barTitle": "Align stretched vertically"
           }
         ],
-        "defaultValue": "top"
+        "defaultValue": "top",
+        "dependsOn": {
+          "setting": "layout",
+          "value": "grid",
+          "invert": true
+        }
       },
       {
         "type": "select",
@@ -229,7 +286,12 @@
             "barTitle": "Grow container"
           }
         ],
-        "defaultValue": "shrink"
+        "defaultValue": "shrink",
+        "dependsOn": {
+          "setting": "layout",
+          "value": "grid",
+          "invert": true
+        }
       },
       {
         "type": "select",
@@ -255,7 +317,12 @@
             "value": "L"
           }
         ],
-        "defaultValue": "M"
+        "defaultValue": "M",
+        "dependsOn": {
+          "setting": "layout",
+          "value": "grid",
+          "invert": true
+        }
       },
       {
         "type": "boolean",
@@ -263,7 +330,12 @@
         "key": "wrap",
         "showInBar": true,
         "barIcon": "ModernGridView",
-        "barTitle": "Wrap"
+        "barTitle": "Wrap",
+        "dependsOn": {
+          "setting": "layout",
+          "value": "grid",
+          "invert": true
+        }
       },
       {
         "type": "event",
@@ -7167,23 +7239,6 @@
       "scope": "local"
     }
   },
-  "grid": {
-    "name": "Grid",
-    "icon": "ViewGrid",
-    "hasChildren": true,
-    "settings": [
-      {
-        "type": "number",
-        "key": "cols",
-        "label": "Columns"
-      },
-      {
-        "type": "number",
-        "key": "rows",
-        "label": "Rows"
-      }
-    ]
-  },
   "gridblock": {
     "name": "Table",
     "icon": "Table",
diff --git a/packages/client/src/components/app/Repeater.svelte b/packages/client/src/components/app/Repeater.svelte
index 2d07342cf5..0b9f011a6e 100644
--- a/packages/client/src/components/app/Repeater.svelte
+++ b/packages/client/src/components/app/Repeater.svelte
@@ -1,7 +1,7 @@
 <script>
   import { getContext } from "svelte"
   import Placeholder from "./Placeholder.svelte"
-  import Container from "./Container.svelte"
+  import Container from "./container/Container.svelte"
 
   const { Provider, ContextScopes } = getContext("sdk")
   const component = getContext("component")
diff --git a/packages/client/src/components/app/container/Container.svelte b/packages/client/src/components/app/container/Container.svelte
new file mode 100644
index 0000000000..9cfe74cf35
--- /dev/null
+++ b/packages/client/src/components/app/container/Container.svelte
@@ -0,0 +1,12 @@
+<script>
+  import GridContainer from "./GridContainer.svelte"
+  import FlexContainer from "./FlexContainer.svelte"
+
+  export let layout = "flex"
+
+  $: component = layout === "grid" ? GridContainer : FlexContainer
+</script>
+
+<svelte:component this={component} {...$$props}>
+  <slot />
+</svelte:component>
diff --git a/packages/client/src/components/app/Container.svelte b/packages/client/src/components/app/container/FlexContainer.svelte
similarity index 100%
rename from packages/client/src/components/app/Container.svelte
rename to packages/client/src/components/app/container/FlexContainer.svelte
diff --git a/packages/client/src/components/app/Grid.svelte b/packages/client/src/components/app/container/GridContainer.svelte
similarity index 97%
rename from packages/client/src/components/app/Grid.svelte
rename to packages/client/src/components/app/container/GridContainer.svelte
index adc050d330..870a593b46 100644
--- a/packages/client/src/components/app/Grid.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -7,6 +7,9 @@
   export let cols = 12
   export let rows = 12
 
+  $: cols = cols || 12
+  $: rows = rows || 12
+
   // Deliberately non-reactive as we want this fixed whenever the grid renders
   const defaultColSpan = Math.ceil((cols + 1) / 2)
   const defaultRowSpan = Math.ceil((rows + 1) / 2)
diff --git a/packages/client/src/components/app/index.js b/packages/client/src/components/app/index.js
index 6d9df6e588..63cdb95ac1 100644
--- a/packages/client/src/components/app/index.js
+++ b/packages/client/src/components/app/index.js
@@ -13,7 +13,7 @@ import "@spectrum-css/page/dist/index-vars.css"
 export { default as Placeholder } from "./Placeholder.svelte"
 
 // User facing components
-export { default as container } from "./Container.svelte"
+export { default as container } from "./container/Container.svelte"
 export { default as section } from "./Section.svelte"
 export { default as dataprovider } from "./DataProvider.svelte"
 export { default as divider } from "./Divider.svelte"
@@ -35,7 +35,6 @@ export { default as spectrumcard } from "./SpectrumCard.svelte"
 export { default as tag } from "./Tag.svelte"
 export { default as markdownviewer } from "./MarkdownViewer.svelte"
 export { default as embeddedmap } from "./embedded-map/EmbeddedMap.svelte"
-export { default as grid } from "./Grid.svelte"
 export { default as sidepanel } from "./SidePanel.svelte"
 export { default as modal } from "./Modal.svelte"
 export { default as gridblock } from "./GridBlock.svelte"
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index df0ccb814e..28ef068cfc 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -25,7 +25,7 @@
       e.target
         .closest?.(".component")
         ?.parentNode.closest(".component")
-        ?.childNodes[0].classList.contains("grid") ||
+        ?.childNodes[0].classList?.contains("grid") ||
       e.target.classList.contains("anchor")
     )
   }
diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index 2b941b2662..2a346742f1 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -1,7 +1,6 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import Indicator from "./Indicator.svelte"
-  import { domDebounce } from "utils/domDebounce"
   import { builderStore } from "stores"
 
   export let componentId = null
@@ -36,20 +35,20 @@
 
   $: visibleIndicators = state.indicators.filter(x => x.visible)
   $: offset = $builderStore.inBuilder ? 0 : 2
-  $: $$props, debouncedUpdate()
+  // $: $$props, updatePosition()
 
   const checkInsideGrid = id => {
     const component = document.getElementsByClassName(id)[0]
     const domNode = component?.children[0]
 
     // Ignore grid itself
-    if (domNode?.classList.contains("grid")) {
+    if (domNode?.classList?.contains("grid")) {
       return false
     }
 
     return component?.parentNode
       ?.closest?.(".component")
-      ?.childNodes[0]?.classList.contains("grid")
+      ?.childNodes[0]?.classList?.contains("grid")
   }
 
   const createIntersectionCallback = idx => entries => {
@@ -145,17 +144,16 @@
       })
     })
   }
-  const debouncedUpdate = domDebounce(updatePosition)
 
   onMount(() => {
-    debouncedUpdate()
-    interval = setInterval(debouncedUpdate, 100)
-    document.addEventListener("scroll", debouncedUpdate, true)
+    updatePosition()
+    interval = setInterval(updatePosition, 100)
+    document.addEventListener("scroll", updatePosition, true)
   })
 
   onDestroy(() => {
     clearInterval(interval)
-    document.removeEventListener("scroll", debouncedUpdate, true)
+    document.removeEventListener("scroll", updatePosition, true)
     observers.forEach(o => o.disconnect())
   })
 </script>

From f58e05b5093eb8c2369b34deb72754ee09c93106 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 29 Jul 2024 14:45:33 +0100
Subject: [PATCH 002/112] Improve performance

---
 .../components/preview/GridDNDHandler.svelte  | 25 ++++++++-----------
 .../components/preview/IndicatorSet.svelte    | 11 +++++++-
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 28ef068cfc..266a86c867 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -1,21 +1,20 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import { builderStore, componentStore } from "stores"
-  import { Utils } from "@budibase/frontend-core"
+  import { Utils, memo } from "@budibase/frontend-core"
 
   let dragInfo
-  let gridStyles
+  let gridStyles = memo()
   let id
 
   // Some memoisation of primitive types for performance
-  $: jsonStyles = JSON.stringify(gridStyles)
   $: id = dragInfo?.id || id
 
   // Set ephemeral grid styles on the dragged component
   $: instance = componentStore.actions.getComponentInstance(id)
   $: $instance?.setEphemeralStyles({
-    ...gridStyles,
-    ...(gridStyles ? { "z-index": 999 } : null),
+    ...$gridStyles,
+    ...($gridStyles ? { "z-index": 999 } : null),
   })
 
   // Util to check if a DND event originates from a grid (or inside a grid).
@@ -33,7 +32,7 @@
   // Util to get the inner DOM node by a component ID
   const getDOMNode = id => {
     const component = document.getElementsByClassName(id)[0]
-    return [...component.children][0]
+    return [...component?.children][0]
   }
 
   const processEvent = Utils.throttle((mouseX, mouseY) => {
@@ -76,9 +75,7 @@
         "grid-column-start": colStart + deltaX,
         "grid-column-end": colEnd + deltaX,
       }
-      if (JSON.stringify(newStyles) !== jsonStyles) {
-        gridStyles = newStyles
-      }
+      gridStyles.set(newStyles)
     } else if (mode === "resize") {
       let newStyles = {}
       if (side === "right") {
@@ -102,9 +99,7 @@
         newStyles["grid-column-start"] = Math.min(colStart + deltaX, colEnd - 1)
         newStyles["grid-row-start"] = Math.min(rowStart + deltaY, rowEnd - 1)
       }
-      if (JSON.stringify(newStyles) !== jsonStyles) {
-        gridStyles = newStyles
-      }
+      gridStyles.set(newStyles)
     }
   }, 100)
 
@@ -200,8 +195,8 @@
   // Callback when drag stops (whether dropped or not)
   const stopDragging = async () => {
     // Save changes
-    if (gridStyles) {
-      await builderStore.actions.updateStyles(gridStyles, dragInfo.id)
+    if ($gridStyles) {
+      await builderStore.actions.updateStyles($gridStyles, dragInfo.id)
     }
 
     // Reset listener
@@ -211,7 +206,7 @@
 
     // Reset state
     dragInfo = null
-    gridStyles = null
+    gridStyles.set(null)
   }
 
   onMount(() => {
diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index 2a346742f1..aa9735cedb 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -2,6 +2,7 @@
   import { onMount, onDestroy } from "svelte"
   import Indicator from "./Indicator.svelte"
   import { builderStore } from "stores"
+  import { memo } from "@budibase/frontend-core"
 
   export let componentId = null
   export let color = null
@@ -25,6 +26,7 @@
     insideGrid: false,
     error: false,
   })
+  const config = memo($$props)
 
   let interval
   let state = defaultState()
@@ -35,7 +37,13 @@
 
   $: visibleIndicators = state.indicators.filter(x => x.visible)
   $: offset = $builderStore.inBuilder ? 0 : 2
-  // $: $$props, updatePosition()
+  $: config.set({
+    componentId,
+    color,
+    zIndex,
+    prefix,
+    allowResizeAnchors,
+  })
 
   const checkInsideGrid = id => {
     const component = document.getElementsByClassName(id)[0]
@@ -147,6 +155,7 @@
 
   onMount(() => {
     updatePosition()
+    config.subscribe(updatePosition)
     interval = setInterval(updatePosition, 100)
     document.addEventListener("scroll", updatePosition, true)
   })

From bfdbf72b50418d080ec587035b29c8e19124c4b3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 29 Jul 2024 15:38:24 +0100
Subject: [PATCH 003/112] Improve responsiveness of indicators

---
 .../src/components/preview/IndicatorSet.svelte     | 14 +++++++++++---
 packages/client/src/stores/components.js           |  3 ---
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index aa9735cedb..aeeb32be86 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -1,8 +1,9 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import Indicator from "./Indicator.svelte"
-  import { builderStore } from "stores"
+  import { builderStore, componentStore } from "stores"
   import { memo } from "@budibase/frontend-core"
+  import { writable } from "svelte/store"
 
   export let componentId = null
   export let color = null
@@ -10,6 +11,7 @@
   export let prefix = null
   export let allowResizeAnchors = false
 
+  const config = memo($$props)
   const errorColor = "var(--spectrum-global-color-static-red-600)"
   const defaultState = () => ({
     // Cached props
@@ -26,7 +28,6 @@
     insideGrid: false,
     error: false,
   })
-  const config = memo($$props)
 
   let interval
   let state = defaultState()
@@ -37,6 +38,8 @@
 
   $: visibleIndicators = state.indicators.filter(x => x.visible)
   $: offset = $builderStore.inBuilder ? 0 : 2
+
+  // Update position when any props change
   $: config.set({
     componentId,
     color,
@@ -44,6 +47,12 @@
     prefix,
     allowResizeAnchors,
   })
+  $: $config, updatePosition()
+
+  // Update position when component state changes
+  $: instance = componentStore.actions.getComponentInstance(componentId)
+  $: componentState = $instance?.state || writable()
+  $: $componentState, updatePosition()
 
   const checkInsideGrid = id => {
     const component = document.getElementsByClassName(id)[0]
@@ -155,7 +164,6 @@
 
   onMount(() => {
     updatePosition()
-    config.subscribe(updatePosition)
     interval = setInterval(updatePosition, 100)
     document.addEventListener("scroll", updatePosition, true)
   })
diff --git a/packages/client/src/stores/components.js b/packages/client/src/stores/components.js
index b7f7d98197..d4afa6c7f1 100644
--- a/packages/client/src/stores/components.js
+++ b/packages/client/src/stores/components.js
@@ -142,9 +142,6 @@ const createComponentStore = () => {
   }
 
   const getComponentInstance = id => {
-    if (!id) {
-      return null
-    }
     return derived(store, $store => $store.mountedComponents[id])
   }
 

From 1aa7077b9ecf8c2140471e3138c20f18537b3476 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 29 Jul 2024 15:57:43 +0100
Subject: [PATCH 004/112] Use CSS variables to store grid position metadata

---
 .../app/container/GridContainer.svelte        | 15 +++--
 .../components/preview/GridDNDHandler.svelte  | 59 +++++++++++--------
 2 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 870a593b46..2d7bf109d2 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -68,14 +68,19 @@
     overflow: hidden;
     width: auto;
     height: auto;
-    grid-column-start: 1;
-    grid-column-end: var(--default-col-span);
-    grid-row-start: 1;
-    grid-row-end: var(--default-row-span);
+    grid-column-start: min(
+      max(1, var(--grid-column-start)),
+      var(--cols)
+    ) !important;
+    grid-column-end: min(
+      max(1, var(--grid-column-end)),
+      var(--cols)
+    ) !important;
+    grid-row-start: min(max(1, var(--grid-row-start)), var(--rows)) !important;
+    grid-row-end: min(max(1, var(--grid-row-end)), var(--rows)) !important;
     max-height: 100%;
     max-width: 100%;
   }
-
   .grid {
     position: relative;
     height: 400px;
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 266a86c867..924631bc78 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -70,34 +70,43 @@
       deltaY = Math.min(Math.max(deltaY, rowDeltaMin), rowDeltaMax)
       deltaX = Math.min(Math.max(deltaX, colDeltaMin), colDeltaMax)
       const newStyles = {
-        "grid-row-start": rowStart + deltaY,
-        "grid-row-end": rowEnd + deltaY,
-        "grid-column-start": colStart + deltaX,
-        "grid-column-end": colEnd + deltaX,
+        "--grid-row-start": rowStart + deltaY,
+        "--grid-row-end": rowEnd + deltaY,
+        "--grid-column-start": colStart + deltaX,
+        "--grid-column-end": colEnd + deltaX,
       }
       gridStyles.set(newStyles)
     } else if (mode === "resize") {
       let newStyles = {}
       if (side === "right") {
-        newStyles["grid-column-end"] = Math.max(colEnd + deltaX, colStart + 1)
+        newStyles["--grid-column-end"] = Math.max(colEnd + deltaX, colStart + 1)
       } else if (side === "left") {
-        newStyles["grid-column-start"] = Math.min(colStart + deltaX, colEnd - 1)
+        newStyles["--grid-column-start"] = Math.min(
+          colStart + deltaX,
+          colEnd - 1
+        )
       } else if (side === "top") {
-        newStyles["grid-row-start"] = Math.min(rowStart + deltaY, rowEnd - 1)
+        newStyles["--grid-row-start"] = Math.min(rowStart + deltaY, rowEnd - 1)
       } else if (side === "bottom") {
-        newStyles["grid-row-end"] = Math.max(rowEnd + deltaY, rowStart + 1)
+        newStyles["--grid-row-end"] = Math.max(rowEnd + deltaY, rowStart + 1)
       } else if (side === "bottom-right") {
-        newStyles["grid-column-end"] = Math.max(colEnd + deltaX, colStart + 1)
-        newStyles["grid-row-end"] = Math.max(rowEnd + deltaY, rowStart + 1)
+        newStyles["--grid-column-end"] = Math.max(colEnd + deltaX, colStart + 1)
+        newStyles["--grid-row-end"] = Math.max(rowEnd + deltaY, rowStart + 1)
       } else if (side === "bottom-left") {
-        newStyles["grid-column-start"] = Math.min(colStart + deltaX, colEnd - 1)
-        newStyles["grid-row-end"] = Math.max(rowEnd + deltaY, rowStart + 1)
+        newStyles["--grid-column-start"] = Math.min(
+          colStart + deltaX,
+          colEnd - 1
+        )
+        newStyles["--grid-row-end"] = Math.max(rowEnd + deltaY, rowStart + 1)
       } else if (side === "top-right") {
-        newStyles["grid-column-end"] = Math.max(colEnd + deltaX, colStart + 1)
-        newStyles["grid-row-start"] = Math.min(rowStart + deltaY, rowEnd - 1)
+        newStyles["--grid-column-end"] = Math.max(colEnd + deltaX, colStart + 1)
+        newStyles["--grid-row-start"] = Math.min(rowStart + deltaY, rowEnd - 1)
       } else if (side === "top-left") {
-        newStyles["grid-column-start"] = Math.min(colStart + deltaX, colEnd - 1)
-        newStyles["grid-row-start"] = Math.min(rowStart + deltaY, rowEnd - 1)
+        newStyles["--grid-column-start"] = Math.min(
+          colStart + deltaX,
+          colEnd - 1
+        )
+        newStyles["--grid-row-start"] = Math.min(rowStart + deltaY, rowEnd - 1)
       }
       gridStyles.set(newStyles)
     }
@@ -166,20 +175,20 @@
     const styles = window.getComputedStyle(domNode)
     if (domGrid) {
       const minMax = (value, min, max) => Math.min(max, Math.max(min, value))
-      const getStyle = x => parseInt(styles?.[x] || "0")
+      const getStyle = x => parseInt(styles?.getPropertyValue(x) || "0")
       const getColStyle = x => minMax(getStyle(x), 1, gridCols + 1)
       const getRowStyle = x => minMax(getStyle(x), 1, gridRows + 1)
       dragInfo.grid = {
         startX: e.clientX,
         startY: e.clientY,
-        rowStart: getRowStyle("grid-row-start"),
-        rowEnd: getRowStyle("grid-row-end"),
-        colStart: getColStyle("grid-column-start"),
-        colEnd: getColStyle("grid-column-end"),
-        rowDeltaMin: 1 - getRowStyle("grid-row-start"),
-        rowDeltaMax: gridRows + 1 - getRowStyle("grid-row-end"),
-        colDeltaMin: 1 - getColStyle("grid-column-start"),
-        colDeltaMax: gridCols + 1 - getColStyle("grid-column-end"),
+        rowStart: getRowStyle("--grid-row-start"),
+        rowEnd: getRowStyle("--grid-row-end"),
+        colStart: getColStyle("--grid-column-start"),
+        colEnd: getColStyle("--grid-column-end"),
+        rowDeltaMin: 1 - getRowStyle("--grid-row-start"),
+        rowDeltaMax: gridRows + 1 - getRowStyle("--grid-row-end"),
+        colDeltaMin: 1 - getColStyle("--grid-column-start"),
+        colDeltaMax: gridCols + 1 - getColStyle("--grid-column-end"),
       }
       handleEvent(e)
     }

From f91cc26fe181447f4be6cd635ff4e444c46eb401 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 29 Jul 2024 16:36:56 +0100
Subject: [PATCH 005/112] Sanity check grid size limits and improve logic
 around min/max column/row dimensions

---
 packages/client/manifest.json                 |  2 +
 .../app/container/GridContainer.svelte        | 16 +++-----
 .../components/preview/GridDNDHandler.svelte  | 41 ++++++-------------
 3 files changed, 20 insertions(+), 39 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 2559671bab..f282cf17a4 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -146,6 +146,7 @@
         "label": "Columns",
         "key": "cols",
         "placeholder": 12,
+        "min": 1,
         "dependsOn": {
           "setting": "layout",
           "value": "grid"
@@ -156,6 +157,7 @@
         "label": "Rows",
         "key": "rows",
         "placeholder": 12,
+        "min": 1,
         "dependsOn": {
           "setting": "layout",
           "value": "grid"
diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 2d7bf109d2..498b19b25b 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -9,11 +9,6 @@
 
   $: cols = cols || 12
   $: rows = rows || 12
-
-  // Deliberately non-reactive as we want this fixed whenever the grid renders
-  const defaultColSpan = Math.ceil((cols + 1) / 2)
-  const defaultRowSpan = Math.ceil((rows + 1) / 2)
-
   $: coords = generateCoords(rows, cols)
 
   const generateCoords = (rows, cols) => {
@@ -35,8 +30,6 @@
       ...$component.styles?.normal,
       "--cols": cols,
       "--rows": rows,
-      "--default-col-span": defaultColSpan,
-      "--default-row-span": defaultRowSpan,
       gap: "0 !important",
     },
   }}
@@ -73,11 +66,14 @@
       var(--cols)
     ) !important;
     grid-column-end: min(
-      max(1, var(--grid-column-end)),
-      var(--cols)
+      max(2, var(--grid-column-end)),
+      calc(var(--cols) + 1)
     ) !important;
     grid-row-start: min(max(1, var(--grid-row-start)), var(--rows)) !important;
-    grid-row-end: min(max(1, var(--grid-row-end)), var(--rows)) !important;
+    grid-row-end: min(
+      max(2, var(--grid-row-end)),
+      calc(var(--rows) + 1)
+    ) !important;
     max-height: 100%;
     max-width: 100%;
   }
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 924631bc78..878a8a7feb 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -17,6 +17,9 @@
     ...($gridStyles ? { "z-index": 999 } : null),
   })
 
+  // Sugar for a combination of both min and max
+  const minMax = (value, min, max) => Math.min(max, Math.max(min, value))
+
   // Util to check if a DND event originates from a grid (or inside a grid).
   // This is important as we do not handle grid DND in this handler.
   const isGridEvent = e => {
@@ -41,18 +44,7 @@
     }
 
     const { mode, side, gridId, grid } = dragInfo
-    const {
-      startX,
-      startY,
-      rowStart,
-      rowEnd,
-      colStart,
-      colEnd,
-      rowDeltaMin,
-      rowDeltaMax,
-      colDeltaMin,
-      colDeltaMax,
-    } = grid
+    const { startX, startY, rowStart, rowEnd, colStart, colEnd } = grid
 
     const domGrid = getDOMNode(gridId)
     const cols = parseInt(domGrid.dataset.cols)
@@ -67,13 +59,11 @@
     let deltaY = Math.round(diffY / rowHeight)
 
     if (mode === "move") {
-      deltaY = Math.min(Math.max(deltaY, rowDeltaMin), rowDeltaMax)
-      deltaX = Math.min(Math.max(deltaX, colDeltaMin), colDeltaMax)
       const newStyles = {
-        "--grid-row-start": rowStart + deltaY,
-        "--grid-row-end": rowEnd + deltaY,
-        "--grid-column-start": colStart + deltaX,
-        "--grid-column-end": colEnd + deltaX,
+        "--grid-row-start": minMax(rowStart + deltaY, 1, rows),
+        "--grid-row-end": minMax(rowEnd + deltaY, 2, rows + 1),
+        "--grid-column-start": minMax(colStart + deltaX, 1, cols),
+        "--grid-column-end": minMax(colEnd + deltaX, 2, cols + 1),
       }
       gridStyles.set(newStyles)
     } else if (mode === "resize") {
@@ -174,21 +164,14 @@
     const domNode = getDOMNode(dragInfo.id)
     const styles = window.getComputedStyle(domNode)
     if (domGrid) {
-      const minMax = (value, min, max) => Math.min(max, Math.max(min, value))
       const getStyle = x => parseInt(styles?.getPropertyValue(x) || "0")
-      const getColStyle = x => minMax(getStyle(x), 1, gridCols + 1)
-      const getRowStyle = x => minMax(getStyle(x), 1, gridRows + 1)
       dragInfo.grid = {
         startX: e.clientX,
         startY: e.clientY,
-        rowStart: getRowStyle("--grid-row-start"),
-        rowEnd: getRowStyle("--grid-row-end"),
-        colStart: getColStyle("--grid-column-start"),
-        colEnd: getColStyle("--grid-column-end"),
-        rowDeltaMin: 1 - getRowStyle("--grid-row-start"),
-        rowDeltaMax: gridRows + 1 - getRowStyle("--grid-row-end"),
-        colDeltaMin: 1 - getColStyle("--grid-column-start"),
-        colDeltaMax: gridCols + 1 - getColStyle("--grid-column-end"),
+        rowStart: minMax(getStyle("--grid-row-start"), 1, gridRows),
+        rowEnd: minMax(getStyle("--grid-row-end"), 2, gridRows + 1),
+        colStart: minMax(getStyle("--grid-column-start"), 1, gridCols),
+        colEnd: minMax(getStyle("--grid-column-end"), 2, gridCols + 1),
       }
       handleEvent(e)
     }

From 7d4acc936b309453f2e79e3a1f6b6bb7f43d1836 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 30 Jul 2024 13:50:38 +0100
Subject: [PATCH 006/112] Rewrite grid CSS variable handling

---
 .../app/container/GridContainer.svelte        |  40 +++++--
 .../components/preview/GridDNDHandler.svelte  | 111 +++++++++++++-----
 2 files changed, 107 insertions(+), 44 deletions(-)

diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 498b19b25b..9734998f79 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -3,6 +3,7 @@
 
   const component = getContext("component")
   const { styleable, builderStore } = getContext("sdk")
+  const context = getContext("context")
 
   export let cols = 12
   export let rows = 12
@@ -10,6 +11,7 @@
   $: cols = cols || 12
   $: rows = rows || 12
   $: coords = generateCoords(rows, cols)
+  $: mobile = $context.device.mobile
 
   const generateCoords = (rows, cols) => {
     let grid = []
@@ -24,6 +26,7 @@
 
 <div
   class="grid"
+  class:mobile
   use:styleable={{
     ...$component.styles,
     normal: {
@@ -61,22 +64,33 @@
     overflow: hidden;
     width: auto;
     height: auto;
-    grid-column-start: min(
-      max(1, var(--grid-column-start)),
-      var(--cols)
-    ) !important;
-    grid-column-end: min(
-      max(2, var(--grid-column-end)),
-      calc(var(--cols) + 1)
-    ) !important;
-    grid-row-start: min(max(1, var(--grid-row-start)), var(--rows)) !important;
-    grid-row-end: min(
-      max(2, var(--grid-row-end)),
-      calc(var(--rows) + 1)
-    ) !important;
     max-height: 100%;
     max-width: 100%;
+
+    /* On desktop, use desktop metadata and fall back to mobile */
+    --col-start: var(--grid-desktop-col-start, var(--grid-mobile-col-start, 1));
+    --col-end: var(--grid-desktop-col-end, var(--grid-mobile-col-end, 2));
+    --row-start: var(--grid-desktop-row-start, var(--grid-mobile-row-start, 1));
+    --row-end: var(--grid-desktop-row-end, var(--grid-mobile-row-end, 2));
+
+    /* Ensure grid metadata falls within limits */
+    grid-column-start: min(max(1, var(--col-start)), var(--cols)) !important;
+    grid-column-end: min(
+      max(2, var(--col-end)),
+      calc(var(--cols) + 1)
+    ) !important;
+    grid-row-start: min(max(1, var(--row-start)), var(--rows)) !important;
+    grid-row-end: min(max(2, var(--row-end)), calc(var(--rows) + 1)) !important;
   }
+
+  /* On mobile, use mobile metadata and fall back to desktop */
+  :global(.grid.mobile > .component > *) {
+    --col-start: var(--grid-mobile-col-start, var(--grid-desktop-col-start, 1));
+    --col-end: var(--grid-mobile-col-end, var(--grid-desktop-col-end, 2));
+    --row-start: var(--grid-mobile-row-start, var(--grid-desktop-row-start, 1));
+    --row-end: var(--grid-mobile-row-end, var(--grid-desktop-row-end, 2));
+  }
+
   .grid {
     position: relative;
     height: 400px;
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 878a8a7feb..bc1b193629 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -3,6 +3,53 @@
   import { builderStore, componentStore } from "stores"
   import { Utils, memo } from "@budibase/frontend-core"
 
+  // Enum for device preview type, included in CSS variables
+  const Devices = {
+    Desktop: "desktop",
+    Mobile: "mobile",
+  }
+
+  // Generates the CSS variable for a certain grid param suffix, for the current
+  // device
+  const getCSSVar = suffix => {
+    const device =
+      $builderStore.previewDevice === Devices.Mobile
+        ? Devices.Mobile
+        : Devices.Desktop
+    return `--grid-${device}-${suffix}`
+  }
+
+  // Generates the CSS variable for a certain grid param suffix, for the other
+  // device variant than the one included in this variable
+  const getOtherDeviceCSSVar = cssVar => {
+    if (cssVar.includes(Devices.Desktop)) {
+      return cssVar.replace(Devices.Desktop, Devices.Mobile)
+    } else {
+      return cssVar.replace(Devices.Mobile, Devices.Desktop)
+    }
+  }
+
+  // Gets the default value for a certain grid CSS variable
+  const getDefaultValue = cssVar => {
+    return cssVar.endsWith("-start") ? 1 : 2
+  }
+
+  // Enums for our grid CSS variables, for the current device
+  const Vars = {
+    get ColStart() {
+      return getCSSVar("col-start")
+    },
+    get ColEnd() {
+      return getCSSVar("col-end")
+    },
+    get RowStart() {
+      return getCSSVar("row-start")
+    },
+    get RowEnd() {
+      return getCSSVar("row-end")
+    },
+  }
+
   let dragInfo
   let gridStyles = memo()
   let id
@@ -57,46 +104,38 @@
     const rowHeight = height / rows
     const diffY = mouseY - startY
     let deltaY = Math.round(diffY / rowHeight)
-
     if (mode === "move") {
+      deltaX = minMax(deltaX, 1 - colStart, cols + 1 - colEnd)
+      deltaY = minMax(deltaY, 1 - rowStart, rows + 1 - rowEnd)
       const newStyles = {
-        "--grid-row-start": minMax(rowStart + deltaY, 1, rows),
-        "--grid-row-end": minMax(rowEnd + deltaY, 2, rows + 1),
-        "--grid-column-start": minMax(colStart + deltaX, 1, cols),
-        "--grid-column-end": minMax(colEnd + deltaX, 2, cols + 1),
+        [Vars.ColStart]: colStart + deltaX,
+        [Vars.ColEnd]: colEnd + deltaX,
+        [Vars.RowStart]: rowStart + deltaY,
+        [Vars.RowEnd]: rowEnd + deltaY,
       }
       gridStyles.set(newStyles)
     } else if (mode === "resize") {
       let newStyles = {}
       if (side === "right") {
-        newStyles["--grid-column-end"] = Math.max(colEnd + deltaX, colStart + 1)
+        newStyles[Vars.ColEnd] = Math.max(colEnd + deltaX, colStart + 1)
       } else if (side === "left") {
-        newStyles["--grid-column-start"] = Math.min(
-          colStart + deltaX,
-          colEnd - 1
-        )
+        newStyles[Vars.ColStart] = Math.min(colStart + deltaX, colEnd - 1)
       } else if (side === "top") {
-        newStyles["--grid-row-start"] = Math.min(rowStart + deltaY, rowEnd - 1)
+        newStyles[Vars.RowStart] = Math.min(rowStart + deltaY, rowEnd - 1)
       } else if (side === "bottom") {
-        newStyles["--grid-row-end"] = Math.max(rowEnd + deltaY, rowStart + 1)
+        newStyles[Vars.RowEnd] = Math.max(rowEnd + deltaY, rowStart + 1)
       } else if (side === "bottom-right") {
-        newStyles["--grid-column-end"] = Math.max(colEnd + deltaX, colStart + 1)
-        newStyles["--grid-row-end"] = Math.max(rowEnd + deltaY, rowStart + 1)
+        newStyles[Vars.ColEnd] = Math.max(colEnd + deltaX, colStart + 1)
+        newStyles[Vars.RowEnd] = Math.max(rowEnd + deltaY, rowStart + 1)
       } else if (side === "bottom-left") {
-        newStyles["--grid-column-start"] = Math.min(
-          colStart + deltaX,
-          colEnd - 1
-        )
-        newStyles["--grid-row-end"] = Math.max(rowEnd + deltaY, rowStart + 1)
+        newStyles[Vars.ColStart] = Math.min(colStart + deltaX, colEnd - 1)
+        newStyles[Vars.RowEnd] = Math.max(rowEnd + deltaY, rowStart + 1)
       } else if (side === "top-right") {
-        newStyles["--grid-column-end"] = Math.max(colEnd + deltaX, colStart + 1)
-        newStyles["--grid-row-start"] = Math.min(rowStart + deltaY, rowEnd - 1)
+        newStyles[Vars.ColEnd] = Math.max(colEnd + deltaX, colStart + 1)
+        newStyles[Vars.RowStart] = Math.min(rowStart + deltaY, rowEnd - 1)
       } else if (side === "top-left") {
-        newStyles["--grid-column-start"] = Math.min(
-          colStart + deltaX,
-          colEnd - 1
-        )
-        newStyles["--grid-row-start"] = Math.min(rowStart + deltaY, rowEnd - 1)
+        newStyles[Vars.ColStart] = Math.min(colStart + deltaX, colEnd - 1)
+        newStyles[Vars.RowStart] = Math.min(rowStart + deltaY, rowEnd - 1)
       }
       gridStyles.set(newStyles)
     }
@@ -164,14 +203,24 @@
     const domNode = getDOMNode(dragInfo.id)
     const styles = window.getComputedStyle(domNode)
     if (domGrid) {
-      const getStyle = x => parseInt(styles?.getPropertyValue(x) || "0")
+      // Util to get the current grid CSS variable for this device. If unset,
+      // fall back to using the other device type.
+      const getCurrent = cssVar => {
+        let style = styles?.getPropertyValue(cssVar)
+        if (!style) {
+          style = styles?.getPropertyValue(getOtherDeviceCSSVar(cssVar))
+        }
+        return parseInt(style || getDefaultValue(cssVar))
+      }
       dragInfo.grid = {
         startX: e.clientX,
         startY: e.clientY,
-        rowStart: minMax(getStyle("--grid-row-start"), 1, gridRows),
-        rowEnd: minMax(getStyle("--grid-row-end"), 2, gridRows + 1),
-        colStart: minMax(getStyle("--grid-column-start"), 1, gridCols),
-        colEnd: minMax(getStyle("--grid-column-end"), 2, gridCols + 1),
+
+        // Ensure things are within limits
+        rowStart: minMax(getCurrent(Vars.RowStart), 1, gridRows),
+        rowEnd: minMax(getCurrent(Vars.RowEnd), 2, gridRows + 1),
+        colStart: minMax(getCurrent(Vars.ColStart), 1, gridCols),
+        colEnd: minMax(getCurrent(Vars.ColEnd), 2, gridCols + 1),
       }
       handleEvent(e)
     }

From 0d6e7bd5d3a1c35bfe55b9a8654448d1edb7a50f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 30 Jul 2024 13:53:11 +0100
Subject: [PATCH 007/112] Fix issues with min-widths in grid children

---
 .../client/src/components/app/container/GridContainer.svelte     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 9734998f79..0ea78c583a 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -66,6 +66,7 @@
     height: auto;
     max-height: 100%;
     max-width: 100%;
+    min-width: 0;
 
     /* On desktop, use desktop metadata and fall back to mobile */
     --col-start: var(--grid-desktop-col-start, var(--grid-mobile-col-start, 1));

From 29ddeab0d428aded3a56d178a90758553f38d567 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 30 Jul 2024 15:20:59 +0100
Subject: [PATCH 008/112] Update grid layout to include nested flex wrappers
 for more layout control

---
 .../[screenId]/_components/AppPreview.svelte  |  4 +-
 .../builder/src/stores/builder/components.js  | 11 +++
 .../client/src/components/Component.svelte    | 30 ++++--
 .../app/container/FlexContainer.svelte        |  6 +-
 .../app/container/GridContainer.svelte        | 93 ++++++++++---------
 .../components/preview/GridDNDHandler.svelte  |  4 +-
 .../components/preview/IndicatorSet.svelte    |  5 +-
 packages/client/src/stores/builder.js         |  7 +-
 packages/client/src/utils/styleable.js        |  2 +-
 9 files changed, 99 insertions(+), 63 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 0ce9e096f2..94a303ead4 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -132,8 +132,8 @@
       hoverStore.hover(data.id, false)
     } else if (type === "update-prop") {
       await componentStore.updateSetting(data.prop, data.value)
-    } else if (type === "update-styles") {
-      await componentStore.updateStyles(data.styles, data.id)
+    } else if (type === "update-meta-styles") {
+      await componentStore.updateMetaStyles(data.styles, data.id)
     } else if (type === "delete-component" && data.id) {
       // Legacy type, can be deleted in future
       confirmDeleteComponent(data.id)
diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js
index c281c73dfe..a35169a646 100644
--- a/packages/builder/src/stores/builder/components.js
+++ b/packages/builder/src/stores/builder/components.js
@@ -64,6 +64,7 @@ export class ComponentStore extends BudiStore {
     this.moveDown = this.moveDown.bind(this)
     this.updateStyle = this.updateStyle.bind(this)
     this.updateStyles = this.updateStyles.bind(this)
+    this.updateMetaStyles = this.updateMetaStyles.bind(this)
     this.updateCustomStyle = this.updateCustomStyle.bind(this)
     this.updateConditions = this.updateConditions.bind(this)
     this.requestEjectBlock = this.requestEjectBlock.bind(this)
@@ -978,6 +979,16 @@ export class ComponentStore extends BudiStore {
     await this.patch(patchFn, id)
   }
 
+  async updateMetaStyles(styles, id) {
+    const patchFn = component => {
+      component._styles.meta = {
+        ...component._styles.meta,
+        ...styles,
+      }
+    }
+    await this.patch(patchFn, id)
+  }
+
   async updateCustomStyle(style) {
     await this.patch(component => {
       component._styles.custom = style
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 8eacbdf041..eaab3c56a9 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -39,6 +39,7 @@
     getActionContextKey,
     getActionDependentContextKeys,
   } from "../utils/buttonActions.js"
+  import { buildStyleString } from "utils/styleable.js"
 
   export let instance = {}
   export let isLayout = false
@@ -102,8 +103,8 @@
   let settingsDefinitionMap
   let missingRequiredSettings = false
 
-  // Temporary styles which can be added in the app preview for things like DND.
-  // We clear these whenever a new instance is received.
+  // Temporary meta styles which can be added in the app preview for things like
+  // DND. We clear these whenever a new instance is received.
   let ephemeralStyles
 
   // Single string of all HBS blocks, used to check if we use a certain binding
@@ -196,16 +197,20 @@
   $: currentTheme = $context?.device?.theme
   $: darkMode = !currentTheme?.includes("light")
 
+  // Build meta styles and stringify to apply to the wrapper node
+  $: metaStyles = {
+    ...instance._styles?.meta,
+    ...ephemeralStyles,
+  }
+  $: metaCSS = buildStyleString(metaStyles)
+
   // Update component context
   $: store.set({
     id,
     children: children.length,
     styles: {
       ...instance._styles,
-      normal: {
-        ...instance._styles?.normal,
-        ...ephemeralStyles,
-      },
+      meta: metaStyles,
       custom: customCSS,
       id,
       empty: emptyState,
@@ -605,6 +610,14 @@
     }
   }
 
+  const select = e => {
+    if (isBlock) {
+      return
+    }
+    e.stopPropagation()
+    builderStore.actions.selectComponent(id)
+  }
+
   onMount(() => {
     // Register this component instance for external access
     if ($appStore.isDevApp) {
@@ -635,6 +648,8 @@
 {#if constructor && initialSettings && (visible || inSelectedPath) && !builderHidden}
   <!-- The ID is used as a class because getElementsByClassName is O(1) -->
   <!-- and the performance matters for the selection indicators -->
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     class={`component ${id}`}
     class:draggable
@@ -650,6 +665,9 @@
     data-name={name}
     data-icon={icon}
     data-parent={$component.id}
+    style={metaCSS}
+    {draggable}
+    on:click={select}
   >
     {#if errorState}
       <ComponentErrorState
diff --git a/packages/client/src/components/app/container/FlexContainer.svelte b/packages/client/src/components/app/container/FlexContainer.svelte
index f11636b339..34368dcc8c 100644
--- a/packages/client/src/components/app/container/FlexContainer.svelte
+++ b/packages/client/src/components/app/container/FlexContainer.svelte
@@ -12,7 +12,7 @@
   export let wrap
   export let onClick
 
-  $: directionClass = direction ? `valid-container direction-${direction}` : ""
+  $: directionClass = direction ? `flex-container direction-${direction}` : ""
   $: hAlignClass = hAlign ? `hAlign-${hAlign}` : ""
   $: vAlignClass = vAlign ? `vAlign-${vAlign}` : ""
   $: sizeClass = size ? `size-${size}` : ""
@@ -39,11 +39,11 @@
 </div>
 
 <style>
-  .valid-container {
+  .flex-container {
     display: flex;
     max-width: 100%;
   }
-  .valid-container :global(.component > *) {
+  .flex-container :global(.component > *) {
     max-width: 100%;
   }
   .direction-row {
diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 0ea78c583a..50f48b6dc1 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -8,10 +8,16 @@
   export let cols = 12
   export let rows = 12
 
+  let width
+  let height
+
   $: cols = cols || 12
   $: rows = rows || 12
   $: coords = generateCoords(rows, cols)
   $: mobile = $context.device.mobile
+  $: empty = $component.empty
+  $: colSize = width / cols
+  $: rowSize = height / rows
 
   const generateCoords = (rows, cols) => {
     let grid = []
@@ -27,14 +33,18 @@
 <div
   class="grid"
   class:mobile
+  bind:clientWidth={width}
+  bind:clientHeight={height}
   use:styleable={{
     ...$component.styles,
     normal: {
       ...$component.styles?.normal,
       "--cols": cols,
       "--rows": rows,
-      gap: "0 !important",
+      "--col-size": `${colSize}px`,
+      "--row-size": `${rowSize}px`,
     },
+    empty: false,
   }}
   data-rows={rows}
   data-cols={cols}
@@ -46,55 +56,18 @@
       {/each}
     </div>
   {/if}
-  <slot />
+
+  <!-- Only render the slot if not empty, as we don't want the placeholder -->
+  {#if !empty}
+    <slot />
+  {/if}
 </div>
 
 <style>
-  /*
-    Ensure all children of containers which are top level children of
-    grids do not overflow
-  */
-  :global(.grid > .component > .valid-container > .component > *) {
-    max-height: 100%;
-    max-width: 100%;
-  }
-
-  /* Ensure all top level children have some grid styles set */
-  :global(.grid > .component > *) {
-    overflow: hidden;
-    width: auto;
-    height: auto;
-    max-height: 100%;
-    max-width: 100%;
-    min-width: 0;
-
-    /* On desktop, use desktop metadata and fall back to mobile */
-    --col-start: var(--grid-desktop-col-start, var(--grid-mobile-col-start, 1));
-    --col-end: var(--grid-desktop-col-end, var(--grid-mobile-col-end, 2));
-    --row-start: var(--grid-desktop-row-start, var(--grid-mobile-row-start, 1));
-    --row-end: var(--grid-desktop-row-end, var(--grid-mobile-row-end, 2));
-
-    /* Ensure grid metadata falls within limits */
-    grid-column-start: min(max(1, var(--col-start)), var(--cols)) !important;
-    grid-column-end: min(
-      max(2, var(--col-end)),
-      calc(var(--cols) + 1)
-    ) !important;
-    grid-row-start: min(max(1, var(--row-start)), var(--rows)) !important;
-    grid-row-end: min(max(2, var(--row-end)), calc(var(--rows) + 1)) !important;
-  }
-
-  /* On mobile, use mobile metadata and fall back to desktop */
-  :global(.grid.mobile > .component > *) {
-    --col-start: var(--grid-mobile-col-start, var(--grid-desktop-col-start, 1));
-    --col-end: var(--grid-mobile-col-end, var(--grid-desktop-col-end, 2));
-    --row-start: var(--grid-mobile-row-start, var(--grid-desktop-row-start, 1));
-    --row-end: var(--grid-mobile-row-end, var(--grid-desktop-row-end, 2));
-  }
-
   .grid {
     position: relative;
     height: 400px;
+    gap: 0;
   }
   .grid,
   .underlay {
@@ -118,4 +91,36 @@
   .placeholder {
     background-color: var(--spectrum-global-color-gray-100);
   }
+
+  /* Ensure all top level children have grid styles applied */
+  .grid :global(> .component) {
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    justify-content: center;
+    align-items: stretch;
+
+    /* On desktop, use desktop metadata and fall back to mobile */
+    --col-start: var(--grid-desktop-col-start, var(--grid-mobile-col-start, 1));
+    --col-end: var(--grid-desktop-col-end, var(--grid-mobile-col-end, 2));
+    --row-start: var(--grid-desktop-row-start, var(--grid-mobile-row-start, 1));
+    --row-end: var(--grid-desktop-row-end, var(--grid-mobile-row-end, 2));
+
+    /* Ensure grid metadata falls within limits */
+    grid-column-start: min(max(1, var(--col-start)), var(--cols)) !important;
+    grid-column-end: min(
+      max(2, var(--col-end)),
+      calc(var(--cols) + 1)
+    ) !important;
+    grid-row-start: min(max(1, var(--row-start)), var(--rows)) !important;
+    grid-row-end: min(max(2, var(--row-end)), calc(var(--rows) + 1)) !important;
+  }
+
+  /* On mobile, use mobile metadata and fall back to desktop */
+  .grid.mobile :global(> .component) {
+    --col-start: var(--grid-mobile-col-start, var(--grid-desktop-col-start, 1));
+    --col-end: var(--grid-mobile-col-end, var(--grid-desktop-col-end, 2));
+    --row-start: var(--grid-mobile-row-start, var(--grid-desktop-row-start, 1));
+    --row-end: var(--grid-mobile-row-end, var(--grid-desktop-row-end, 2));
+  }
 </style>
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index bc1b193629..1a9a54f1f1 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -200,7 +200,7 @@
     const domGrid = getDOMNode(dragInfo.gridId)
     const gridCols = parseInt(domGrid.dataset.cols)
     const gridRows = parseInt(domGrid.dataset.rows)
-    const domNode = getDOMNode(dragInfo.id)
+    const domNode = getDOMNode(dragInfo.id)?.parentNode
     const styles = window.getComputedStyle(domNode)
     if (domGrid) {
       // Util to get the current grid CSS variable for this device. If unset,
@@ -237,7 +237,7 @@
   const stopDragging = async () => {
     // Save changes
     if ($gridStyles) {
-      await builderStore.actions.updateStyles($gridStyles, dragInfo.id)
+      await builderStore.actions.updateMetaStyles($gridStyles, dragInfo.id)
     }
 
     // Reset listener
diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index aeeb32be86..f894b92fb9 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -124,9 +124,8 @@
 
     // Extract valid children
     // Sanity limit of 100 active indicators
-    const children = Array.from(
-      document.getElementsByClassName(`${componentId}-dom`)
-    )
+    const className = nextState.insideGrid ? componentId : `${componentId}-dom`
+    const children = Array.from(document.getElementsByClassName(className))
       .filter(x => x != null)
       .slice(0, 100)
 
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 5440fc3a79..6e82ecbe02 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -40,8 +40,11 @@ const createBuilderStore = () => {
     updateProp: (prop, value) => {
       eventStore.actions.dispatchEvent("update-prop", { prop, value })
     },
-    updateStyles: async (styles, id) => {
-      await eventStore.actions.dispatchEvent("update-styles", { styles, id })
+    updateMetaStyles: async (styles, id) => {
+      await eventStore.actions.dispatchEvent("update-meta-styles", {
+        styles,
+        id,
+      })
     },
     keyDown: (key, ctrlKey) => {
       eventStore.actions.dispatchEvent("key-down", { key, ctrlKey })
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 3fccae0be5..dc6e8f5e26 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -3,7 +3,7 @@ import { builderStore } from "stores"
 /**
  * Helper to build a CSS string from a style object.
  */
-const buildStyleString = (styleObject, customStyles) => {
+export const buildStyleString = (styleObject, customStyles) => {
   let str = ""
   Object.entries(styleObject || {}).forEach(([style, value]) => {
     if (style && value != null) {

From de183d5c78dfd009ea2fb1b76789c0ecf11ea99f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 30 Jul 2024 16:48:54 +0100
Subject: [PATCH 009/112] Refactor and tidy up

---
 packages/client/manifest.json                 |  7 +++++++
 .../client/src/components/Component.svelte    | 19 ++++++++++++++++++
 .../app/container/GridContainer.svelte        |  7 +++++++
 .../src/components/preview/DNDHandler.svelte  | 12 ++---------
 .../preview/DNDPlaceholderOverlay.svelte      |  4 ++--
 .../components/preview/GridDNDHandler.svelte  | 15 ++------------
 .../components/preview/IndicatorSet.svelte    | 15 +++++++-------
 .../src/components/preview/SettingsBar.svelte | 11 ++++++----
 packages/client/src/utils/domDebounce.js      | 14 -------------
 packages/client/src/utils/grid.js             | 20 +++++++++++++++++++
 10 files changed, 74 insertions(+), 50 deletions(-)
 delete mode 100644 packages/client/src/utils/domDebounce.js
 create mode 100644 packages/client/src/utils/grid.js

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index f282cf17a4..8231c0005f 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -117,6 +117,9 @@
       "width": 400,
       "height": 200
     },
+    "grid": {
+      "fill": true
+    },
     "styles": ["padding", "size", "background", "border", "shadow"],
     "settings": [
       {
@@ -561,6 +564,10 @@
       "width": 105,
       "height": 32
     },
+    "grid": {
+      "hAlign": "center",
+      "vAlign": "center"
+    },
     "settings": [
       {
         "type": "text",
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index eaab3c56a9..340cc6e577 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -198,7 +198,9 @@
   $: darkMode = !currentTheme?.includes("light")
 
   // Build meta styles and stringify to apply to the wrapper node
+  $: definitionMetaStyles = getDefinitonMetaStyles(definition)
   $: metaStyles = {
+    ...definitionMetaStyles,
     ...instance._styles?.meta,
     ...ephemeralStyles,
   }
@@ -618,6 +620,22 @@
     builderStore.actions.selectComponent(id)
   }
 
+  // Util to generate meta styles based on component definition
+  const alignToStyleMap = {
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+    stretch: "stretch",
+  }
+  const getDefinitonMetaStyles = definition => {
+    const gridHAlign = definition.grid?.hAlign || "stretch"
+    const gridVAlign = definition.grid?.vAlign || "center"
+    return {
+      ["align-items"]: alignToStyleMap[gridHAlign],
+      ["justify-content"]: alignToStyleMap[gridVAlign],
+    }
+  }
+
   onMount(() => {
     // Register this component instance for external access
     if ($appStore.isDevApp) {
@@ -661,6 +679,7 @@
     class:parent={hasChildren}
     class:block={isBlock}
     class:error={errorState}
+    class:fill={definition.grid?.fill}
     data-id={id}
     data-name={name}
     data-icon={icon}
diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 50f48b6dc1..6ee761a681 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -123,4 +123,11 @@
     --row-start: var(--grid-mobile-row-start, var(--grid-desktop-row-start, 1));
     --row-end: var(--grid-mobile-row-end, var(--grid-desktop-row-end, 2));
   }
+
+  /* Handle grid children which need to fill the outer component wrapper */
+  .grid :global(> .component.fill > *) {
+    width: 100%;
+    height: 100%;
+    flex: 1 1 0;
+  }
 </style>
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 767efc9e3a..bdd538748b 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -13,6 +13,7 @@
   import { Utils } from "@budibase/frontend-core"
   import { findComponentById } from "utils/components.js"
   import { DNDPlaceholderID } from "constants"
+  import { isGridEvent } from "utils/grid"
 
   const ThrottleRate = 130
 
@@ -25,15 +26,6 @@
   // Local flag for whether we are awaiting an async drop event
   let dropping = false
 
-  // Util to check if a DND event originates from a grid (or inside a grid).
-  // This is important as we do not handle grid DND in this handler.
-  const isGridEvent = e => {
-    return e.target
-      ?.closest?.(".component")
-      ?.parentNode?.closest?.(".component")
-      ?.childNodes[0]?.classList.contains("grid")
-  }
-
   // Util to get the inner DOM node by a component ID
   const getDOMNode = id => {
     return document.getElementsByClassName(`${id}-dom`)[0]
@@ -267,7 +259,7 @@
     // Check if we're adding a new component rather than moving one
     if (source.newComponentType) {
       dropping = true
-      await builderStore.actions.dropNewComponent(
+      builderStore.actions.dropNewComponent(
         source.newComponentType,
         drop.parent,
         drop.index
diff --git a/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte b/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte
index 0be7faff1b..0ad4280e07 100644
--- a/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte
+++ b/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte
@@ -1,7 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import { DNDPlaceholderID } from "constants"
-  import { domDebounce } from "utils/domDebounce.js"
+  import { Utils } from "@budibase/frontend-core"
 
   let left, top, height, width
 
@@ -19,7 +19,7 @@
       width = bounds.width
     }
   }
-  const debouncedUpdate = domDebounce(updatePosition)
+  const debouncedUpdate = Utils.domDebounce(updatePosition)
 
   onMount(() => {
     const interval = setInterval(debouncedUpdate, 100)
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 1a9a54f1f1..4a3f698703 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -2,6 +2,7 @@
   import { onMount, onDestroy } from "svelte"
   import { builderStore, componentStore } from "stores"
   import { Utils, memo } from "@budibase/frontend-core"
+  import { isGridEvent, getGridParentID } from "utils/grid"
 
   // Enum for device preview type, included in CSS variables
   const Devices = {
@@ -67,18 +68,6 @@
   // Sugar for a combination of both min and max
   const minMax = (value, min, max) => Math.min(max, Math.max(min, value))
 
-  // Util to check if a DND event originates from a grid (or inside a grid).
-  // This is important as we do not handle grid DND in this handler.
-  const isGridEvent = e => {
-    return (
-      e.target
-        .closest?.(".component")
-        ?.parentNode.closest(".component")
-        ?.childNodes[0].classList?.contains("grid") ||
-      e.target.classList.contains("anchor")
-    )
-  }
-
   // Util to get the inner DOM node by a component ID
   const getDOMNode = id => {
     const component = document.getElementsByClassName(id)[0]
@@ -172,7 +161,7 @@
 
     // Find grid parent
     const domComponent = getDOMNode(id)
-    const gridId = domComponent?.closest(".grid")?.parentNode.dataset.id
+    const gridId = getGridParentID(domComponent)
     if (!gridId) {
       return
     }
diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index f894b92fb9..e437ba84b6 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -2,7 +2,7 @@
   import { onMount, onDestroy } from "svelte"
   import Indicator from "./Indicator.svelte"
   import { builderStore, componentStore } from "stores"
-  import { memo } from "@budibase/frontend-core"
+  import { memo, Utils } from "@budibase/frontend-core"
   import { writable } from "svelte/store"
 
   export let componentId = null
@@ -47,12 +47,12 @@
     prefix,
     allowResizeAnchors,
   })
-  $: $config, updatePosition()
+  $: $config, debouncedUpdate()
 
   // Update position when component state changes
   $: instance = componentStore.actions.getComponentInstance(componentId)
   $: componentState = $instance?.state || writable()
-  $: $componentState, updatePosition()
+  $: $componentState, debouncedUpdate()
 
   const checkInsideGrid = id => {
     const component = document.getElementsByClassName(id)[0]
@@ -160,16 +160,17 @@
       })
     })
   }
+  const debouncedUpdate = Utils.domDebounce(updatePosition)
 
   onMount(() => {
-    updatePosition()
-    interval = setInterval(updatePosition, 100)
-    document.addEventListener("scroll", updatePosition, true)
+    debouncedUpdate()
+    interval = setInterval(debouncedUpdate, 100)
+    document.addEventListener("scroll", debouncedUpdate, true)
   })
 
   onDestroy(() => {
     clearInterval(interval)
-    document.removeEventListener("scroll", updatePosition, true)
+    document.removeEventListener("scroll", v, true)
     observers.forEach(o => o.disconnect())
   })
 </script>
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index c5109c6bca..e80cb0eaca 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -4,7 +4,8 @@
   import SettingsColorPicker from "./SettingsColorPicker.svelte"
   import SettingsPicker from "./SettingsPicker.svelte"
   import { builderStore, componentStore, dndIsDragging } from "stores"
-  import { domDebounce } from "utils/domDebounce"
+  import { Utils } from "@budibase/frontend-core"
+  import { isGridChild } from "utils/grid"
 
   const verticalOffset = 36
   const horizontalOffset = 2
@@ -49,8 +50,10 @@
       return
     }
     const id = $builderStore.selectedComponentId
-    const parent = document.getElementsByClassName(id)?.[0]
-    const element = parent?.children?.[0]
+    let element = document.getElementsByClassName(id)?.[0]
+    if (!isGridChild(element)) {
+      element = element?.children?.[0]
+    }
 
     // The settings bar is higher in the dom tree than the selection indicators
     // as we want to be able to render the settings bar wider than the screen,
@@ -111,7 +114,7 @@
       measured = true
     }
   }
-  const debouncedUpdate = domDebounce(updatePosition)
+  const debouncedUpdate = Utils.domDebounce(updatePosition)
 
   onMount(() => {
     debouncedUpdate()
diff --git a/packages/client/src/utils/domDebounce.js b/packages/client/src/utils/domDebounce.js
deleted file mode 100644
index b15d2698b4..0000000000
--- a/packages/client/src/utils/domDebounce.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export const domDebounce = (callback, extractParams = x => x) => {
-  let active = false
-  let lastParams
-  return (...params) => {
-    lastParams = extractParams(...params)
-    if (!active) {
-      active = true
-      requestAnimationFrame(() => {
-        callback(lastParams)
-        active = false
-      })
-    }
-  }
-}
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
new file mode 100644
index 0000000000..03c48505ce
--- /dev/null
+++ b/packages/client/src/utils/grid.js
@@ -0,0 +1,20 @@
+export const isGridEvent = e => {
+  return (
+    e.target
+      .closest?.(".component")
+      ?.parentNode.closest(".component")
+      ?.childNodes[0]?.classList?.contains("grid") ||
+    e.target.classList.contains("anchor")
+  )
+}
+
+export const isGridChild = node => {
+  return node
+    ?.closest(".component")
+    ?.parentNode.closest(".component")
+    ?.childNodes[0]?.classList?.contains("grid")
+}
+
+export const getGridParentID = node => {
+  return node?.closest(".grid")?.parentNode.dataset.id
+}

From cb3c6678596544182aefec600e72a3f224c87942 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 31 Jul 2024 10:35:57 +0100
Subject: [PATCH 010/112] Large refactor of grid css variable handling to
 simplify everything

---
 .../[screenId]/_components/AppPreview.svelte  |   4 +-
 .../builder/src/stores/builder/components.js  |  11 --
 packages/client/manifest.json                 |  17 ++-
 .../client/src/components/Component.svelte    |  49 ++++----
 .../app/container/GridContainer.svelte        |  32 ++++--
 .../components/preview/GridDNDHandler.svelte  | 106 ++++++------------
 .../preview/GridStylesButton.svelte           |  48 ++++++++
 .../src/components/preview/SettingsBar.svelte |  66 ++++++++++-
 .../components/preview/SettingsButton.svelte  |   1 +
 packages/client/src/stores/builder.js         |   4 +-
 packages/client/src/utils/grid.js             |  85 ++++++++++++++
 11 files changed, 306 insertions(+), 117 deletions(-)
 create mode 100644 packages/client/src/components/preview/GridStylesButton.svelte

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 94a303ead4..0ce9e096f2 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -132,8 +132,8 @@
       hoverStore.hover(data.id, false)
     } else if (type === "update-prop") {
       await componentStore.updateSetting(data.prop, data.value)
-    } else if (type === "update-meta-styles") {
-      await componentStore.updateMetaStyles(data.styles, data.id)
+    } else if (type === "update-styles") {
+      await componentStore.updateStyles(data.styles, data.id)
     } else if (type === "delete-component" && data.id) {
       // Legacy type, can be deleted in future
       confirmDeleteComponent(data.id)
diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js
index a35169a646..c281c73dfe 100644
--- a/packages/builder/src/stores/builder/components.js
+++ b/packages/builder/src/stores/builder/components.js
@@ -64,7 +64,6 @@ export class ComponentStore extends BudiStore {
     this.moveDown = this.moveDown.bind(this)
     this.updateStyle = this.updateStyle.bind(this)
     this.updateStyles = this.updateStyles.bind(this)
-    this.updateMetaStyles = this.updateMetaStyles.bind(this)
     this.updateCustomStyle = this.updateCustomStyle.bind(this)
     this.updateConditions = this.updateConditions.bind(this)
     this.requestEjectBlock = this.requestEjectBlock.bind(this)
@@ -979,16 +978,6 @@ export class ComponentStore extends BudiStore {
     await this.patch(patchFn, id)
   }
 
-  async updateMetaStyles(styles, id) {
-    const patchFn = component => {
-      component._styles.meta = {
-        ...component._styles.meta,
-        ...styles,
-      }
-    }
-    await this.patch(patchFn, id)
-  }
-
   async updateCustomStyle(style) {
     await this.patch(component => {
       component._styles.custom = style
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 8231c0005f..1c18fd4801 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -118,7 +118,9 @@
       "height": 200
     },
     "grid": {
-      "fill": true
+      "hAlign": "stretch",
+      "vAlign": "stretch",
+      "showControls": false
     },
     "styles": ["padding", "size", "background", "border", "shadow"],
     "settings": [
@@ -2790,6 +2792,10 @@
       "width": 400,
       "height": 400
     },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
+    },
     "settings": [
       {
         "type": "select",
@@ -6915,6 +6921,10 @@
       "width": 400,
       "height": 400
     },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "start"
+    },
     "settings": [
       {
         "type": "table",
@@ -7256,6 +7266,11 @@
       "width": 600,
       "height": 400
     },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch",
+      "showControls": false
+    },
     "settings": [
       {
         "type": "dataSource",
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 340cc6e577..771cb8b0e6 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -40,6 +40,7 @@
     getActionDependentContextKeys,
   } from "../utils/buttonActions.js"
   import { buildStyleString } from "utils/styleable.js"
+  import { getBaseGridVars } from "utils/grid.js"
 
   export let instance = {}
   export let isLayout = false
@@ -103,7 +104,7 @@
   let settingsDefinitionMap
   let missingRequiredSettings = false
 
-  // Temporary meta styles which can be added in the app preview for things like
+  // Temporary styles which can be added in the app preview for things like
   // DND. We clear these whenever a new instance is received.
   let ephemeralStyles
 
@@ -197,14 +198,14 @@
   $: currentTheme = $context?.device?.theme
   $: darkMode = !currentTheme?.includes("light")
 
-  // Build meta styles and stringify to apply to the wrapper node
-  $: definitionMetaStyles = getDefinitonMetaStyles(definition)
-  $: metaStyles = {
-    ...definitionMetaStyles,
-    ...instance._styles?.meta,
+  // Build up full styles and split them into variables and non-variables
+  $: baseStyles = getBaseStyles(definition)
+  $: parsedStyles = parseStyles({
+    ...baseStyles,
+    ...instance._styles?.normal,
     ...ephemeralStyles,
-  }
-  $: metaCSS = buildStyleString(metaStyles)
+  })
+  $: wrapperCSS = buildStyleString(parsedStyles.variables)
 
   // Update component context
   $: store.set({
@@ -212,7 +213,7 @@
     children: children.length,
     styles: {
       ...instance._styles,
-      meta: metaStyles,
+      normal: parsedStyles.nonVariables,
       custom: customCSS,
       id,
       empty: emptyState,
@@ -612,7 +613,7 @@
     }
   }
 
-  const select = e => {
+  const handleWrapperClick = e => {
     if (isBlock) {
       return
     }
@@ -620,19 +621,21 @@
     builderStore.actions.selectComponent(id)
   }
 
-  // Util to generate meta styles based on component definition
-  const alignToStyleMap = {
-    start: "flex-start",
-    center: "center",
-    end: "flex-end",
-    stretch: "stretch",
+  // Splits component styles into variables and non-variables
+  const parseStyles = styles => {
+    let variables = {}
+    let nonVariables = {}
+    for (let style of Object.keys(styles || {})) {
+      const group = style.startsWith("--") ? variables : nonVariables
+      group[style] = styles[style]
+    }
+    return { variables, nonVariables }
   }
-  const getDefinitonMetaStyles = definition => {
-    const gridHAlign = definition.grid?.hAlign || "stretch"
-    const gridVAlign = definition.grid?.vAlign || "center"
+
+  // Generates any required base styles based on the component definition
+  const getBaseStyles = definition => {
     return {
-      ["align-items"]: alignToStyleMap[gridHAlign],
-      ["justify-content"]: alignToStyleMap[gridVAlign],
+      ...getBaseGridVars(definition),
     }
   }
 
@@ -684,9 +687,9 @@
     data-name={name}
     data-icon={icon}
     data-parent={$component.id}
-    style={metaCSS}
+    style={wrapperCSS}
     {draggable}
-    on:click={select}
+    on:click={handleWrapperClick}
   >
     {#if errorState}
       <ComponentErrorState
diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 6ee761a681..a5450ffe4c 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -96,16 +96,22 @@
   .grid :global(> .component) {
     display: flex;
     overflow: hidden;
-    flex-direction: column;
-    justify-content: center;
-    align-items: stretch;
 
     /* On desktop, use desktop metadata and fall back to mobile */
+    /* Position vars */
     --col-start: var(--grid-desktop-col-start, var(--grid-mobile-col-start, 1));
     --col-end: var(--grid-desktop-col-end, var(--grid-mobile-col-end, 2));
     --row-start: var(--grid-desktop-row-start, var(--grid-mobile-row-start, 1));
     --row-end: var(--grid-desktop-row-end, var(--grid-mobile-row-end, 2));
 
+    /*  Flex vars */
+    --h-align: var(--grid-desktop-h-align, var(--grid-mobile-h-align, stretch));
+    --v-align: var(--grid-desktop-v-align, var(--grid-mobile-v-align, center));
+    --child-flex: var(
+      --grid-desktop-child-flex,
+      var(--grid-mobile-child-flex, 0 0 auto)
+    );
+
     /* Ensure grid metadata falls within limits */
     grid-column-start: min(max(1, var(--col-start)), var(--cols)) !important;
     grid-column-end: min(
@@ -114,20 +120,32 @@
     ) !important;
     grid-row-start: min(max(1, var(--row-start)), var(--rows)) !important;
     grid-row-end: min(max(2, var(--row-end)), calc(var(--rows) + 1)) !important;
+
+    /* Flex container styles */
+    flex-direction: column;
+    align-items: var(--h-align);
+    justify-content: var(--v-align);
   }
 
   /* On mobile, use mobile metadata and fall back to desktop */
   .grid.mobile :global(> .component) {
+    /*   Position vars */
     --col-start: var(--grid-mobile-col-start, var(--grid-desktop-col-start, 1));
     --col-end: var(--grid-mobile-col-end, var(--grid-desktop-col-end, 2));
     --row-start: var(--grid-mobile-row-start, var(--grid-desktop-row-start, 1));
     --row-end: var(--grid-mobile-row-end, var(--grid-desktop-row-end, 2));
+
+    /* Flex vars */
+    --h-align: var(--grid-mobile-h-align, var(--grid-desktop-h-align, stretch));
+    --v-align: var(--grid-mobile-v-align, var(--grid-desktop-v-align, center));
+    --child-flex: var(
+      --grid-mobile-child-flex,
+      var(--grid-desktop-child-flex, 0 0 auto)
+    );
   }
 
   /* Handle grid children which need to fill the outer component wrapper */
-  .grid :global(> .component.fill > *) {
-    width: 100%;
-    height: 100%;
-    flex: 1 1 0;
+  .grid :global(> .component > *) {
+    flex: var(--child-flex) !important;
   }
 </style>
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 4a3f698703..41e3ea4a2f 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -2,53 +2,20 @@
   import { onMount, onDestroy } from "svelte"
   import { builderStore, componentStore } from "stores"
   import { Utils, memo } from "@budibase/frontend-core"
-  import { isGridEvent, getGridParentID } from "utils/grid"
+  import {
+    isGridEvent,
+    getGridParentID,
+    getGridVar,
+    getDefaultGridVarValue,
+    getOtherDeviceGridVar,
+  } from "utils/grid"
 
-  // Enum for device preview type, included in CSS variables
-  const Devices = {
-    Desktop: "desktop",
-    Mobile: "mobile",
-  }
-
-  // Generates the CSS variable for a certain grid param suffix, for the current
-  // device
-  const getCSSVar = suffix => {
-    const device =
-      $builderStore.previewDevice === Devices.Mobile
-        ? Devices.Mobile
-        : Devices.Desktop
-    return `--grid-${device}-${suffix}`
-  }
-
-  // Generates the CSS variable for a certain grid param suffix, for the other
-  // device variant than the one included in this variable
-  const getOtherDeviceCSSVar = cssVar => {
-    if (cssVar.includes(Devices.Desktop)) {
-      return cssVar.replace(Devices.Desktop, Devices.Mobile)
-    } else {
-      return cssVar.replace(Devices.Mobile, Devices.Desktop)
-    }
-  }
-
-  // Gets the default value for a certain grid CSS variable
-  const getDefaultValue = cssVar => {
-    return cssVar.endsWith("-start") ? 1 : 2
-  }
-
-  // Enums for our grid CSS variables, for the current device
-  const Vars = {
-    get ColStart() {
-      return getCSSVar("col-start")
-    },
-    get ColEnd() {
-      return getCSSVar("col-end")
-    },
-    get RowStart() {
-      return getCSSVar("row-start")
-    },
-    get RowEnd() {
-      return getCSSVar("row-end")
-    },
+  // Grid CSS variables
+  $: vars = {
+    colStart: $getGridVar("col-start"),
+    colEnd: $getGridVar("col-end"),
+    rowStart: $getGridVar("row-start"),
+    rowEnd: $getGridVar("row-end"),
   }
 
   let dragInfo
@@ -97,34 +64,34 @@
       deltaX = minMax(deltaX, 1 - colStart, cols + 1 - colEnd)
       deltaY = minMax(deltaY, 1 - rowStart, rows + 1 - rowEnd)
       const newStyles = {
-        [Vars.ColStart]: colStart + deltaX,
-        [Vars.ColEnd]: colEnd + deltaX,
-        [Vars.RowStart]: rowStart + deltaY,
-        [Vars.RowEnd]: rowEnd + deltaY,
+        [vars.colStart]: colStart + deltaX,
+        [vars.colEnd]: colEnd + deltaX,
+        [vars.rowStart]: rowStart + deltaY,
+        [vars.rowEnd]: rowEnd + deltaY,
       }
       gridStyles.set(newStyles)
     } else if (mode === "resize") {
       let newStyles = {}
       if (side === "right") {
-        newStyles[Vars.ColEnd] = Math.max(colEnd + deltaX, colStart + 1)
+        newStyles[vars.colEnd] = Math.max(colEnd + deltaX, colStart + 1)
       } else if (side === "left") {
-        newStyles[Vars.ColStart] = Math.min(colStart + deltaX, colEnd - 1)
+        newStyles[vars.colStart] = Math.min(colStart + deltaX, colEnd - 1)
       } else if (side === "top") {
-        newStyles[Vars.RowStart] = Math.min(rowStart + deltaY, rowEnd - 1)
+        newStyles[vars.rowStart] = Math.min(rowStart + deltaY, rowEnd - 1)
       } else if (side === "bottom") {
-        newStyles[Vars.RowEnd] = Math.max(rowEnd + deltaY, rowStart + 1)
+        newStyles[vars.rowEnd] = Math.max(rowEnd + deltaY, rowStart + 1)
       } else if (side === "bottom-right") {
-        newStyles[Vars.ColEnd] = Math.max(colEnd + deltaX, colStart + 1)
-        newStyles[Vars.RowEnd] = Math.max(rowEnd + deltaY, rowStart + 1)
+        newStyles[vars.colEnd] = Math.max(colEnd + deltaX, colStart + 1)
+        newStyles[vars.rowEnd] = Math.max(rowEnd + deltaY, rowStart + 1)
       } else if (side === "bottom-left") {
-        newStyles[Vars.ColStart] = Math.min(colStart + deltaX, colEnd - 1)
-        newStyles[Vars.RowEnd] = Math.max(rowEnd + deltaY, rowStart + 1)
+        newStyles[vars.colStart] = Math.min(colStart + deltaX, colEnd - 1)
+        newStyles[vars.rowEnd] = Math.max(rowEnd + deltaY, rowStart + 1)
       } else if (side === "top-right") {
-        newStyles[Vars.ColEnd] = Math.max(colEnd + deltaX, colStart + 1)
-        newStyles[Vars.RowStart] = Math.min(rowStart + deltaY, rowEnd - 1)
+        newStyles[vars.colEnd] = Math.max(colEnd + deltaX, colStart + 1)
+        newStyles[vars.rowStart] = Math.min(rowStart + deltaY, rowEnd - 1)
       } else if (side === "top-left") {
-        newStyles[Vars.ColStart] = Math.min(colStart + deltaX, colEnd - 1)
-        newStyles[Vars.RowStart] = Math.min(rowStart + deltaY, rowEnd - 1)
+        newStyles[vars.colStart] = Math.min(colStart + deltaX, colEnd - 1)
+        newStyles[vars.rowStart] = Math.min(rowStart + deltaY, rowEnd - 1)
       }
       gridStyles.set(newStyles)
     }
@@ -197,20 +164,21 @@
       const getCurrent = cssVar => {
         let style = styles?.getPropertyValue(cssVar)
         if (!style) {
-          style = styles?.getPropertyValue(getOtherDeviceCSSVar(cssVar))
+          style = styles?.getPropertyValue(getOtherDeviceGridVar(cssVar))
         }
-        return parseInt(style || getDefaultValue(cssVar))
+        return parseInt(style || getDefaultGridVarValue(cssVar))
       }
       dragInfo.grid = {
         startX: e.clientX,
         startY: e.clientY,
 
         // Ensure things are within limits
-        rowStart: minMax(getCurrent(Vars.RowStart), 1, gridRows),
-        rowEnd: minMax(getCurrent(Vars.RowEnd), 2, gridRows + 1),
-        colStart: minMax(getCurrent(Vars.ColStart), 1, gridCols),
-        colEnd: minMax(getCurrent(Vars.ColEnd), 2, gridCols + 1),
+        rowStart: minMax(getCurrent(vars.rowStart), 1, gridRows),
+        rowEnd: minMax(getCurrent(vars.rowEnd), 2, gridRows + 1),
+        colStart: minMax(getCurrent(vars.colStart), 1, gridCols),
+        colEnd: minMax(getCurrent(vars.colEnd), 2, gridCols + 1),
       }
+      console.log(dragInfo.grid)
       handleEvent(e)
     }
   }
@@ -226,7 +194,7 @@
   const stopDragging = async () => {
     // Save changes
     if ($gridStyles) {
-      await builderStore.actions.updateMetaStyles($gridStyles, dragInfo.id)
+      await builderStore.actions.updateStyles($gridStyles, dragInfo.id)
     }
 
     // Reset listener
diff --git a/packages/client/src/components/preview/GridStylesButton.svelte b/packages/client/src/components/preview/GridStylesButton.svelte
new file mode 100644
index 0000000000..7e436bdebc
--- /dev/null
+++ b/packages/client/src/components/preview/GridStylesButton.svelte
@@ -0,0 +1,48 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+  import { builderStore, componentStore } from "stores"
+  import { getGridVarValue } from "utils/grid"
+
+  export let style
+  export let value
+  export let icon
+  export let title
+
+  $: currentValue = getGridVarValue($componentStore.selectedComponent, style)
+  $: console.log(style, currentValue)
+  $: active = currentValue === value
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  {title}
+  class:active
+  on:click={() => {
+    builderStore.actions.updateStyles(
+      { [style]: value },
+      $componentStore.selectedComponent._id
+    )
+  }}
+>
+  <Icon name={icon} size="S" />
+</div>
+
+<style>
+  div {
+    padding: 6px;
+    border-radius: 2px;
+    color: var(--spectrum-global-color-gray-700);
+    display: flex;
+    transition: color 0.13s ease-in-out, background-color 0.13s ease-in-out;
+  }
+  div:hover {
+    background-color: var(--spectrum-global-color-gray-200);
+    cursor: pointer;
+  }
+  .active,
+  .active:hover {
+    background-color: rgba(13, 102, 208, 0.1);
+    color: var(--spectrum-global-color-blue-600);
+  }
+</style>
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index e80cb0eaca..540204f817 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -1,11 +1,13 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import SettingsButton from "./SettingsButton.svelte"
+  import GridStylesButton from "./GridStylesButton.svelte"
   import SettingsColorPicker from "./SettingsColorPicker.svelte"
   import SettingsPicker from "./SettingsPicker.svelte"
   import { builderStore, componentStore, dndIsDragging } from "stores"
   import { Utils } from "@budibase/frontend-core"
-  import { isGridChild } from "utils/grid"
+  import { findComponentParent } from "utils/components"
+  import { getGridVar } from "utils/grid"
 
   const verticalOffset = 36
   const horizontalOffset = 2
@@ -16,7 +18,10 @@
   let self
   let measured = false
 
+  // TODO: respect dependsOn keys
+
   $: id = $builderStore.selectedComponentId
+  $: parent = findComponentParent($builderStore.screen.props, id)
   $: instance = componentStore.actions.getComponentInstance(id)
   $: state = $instance?.state
   $: definition = $componentStore.selectedComponentDefinition
@@ -32,6 +37,11 @@
   }
   $: settings = getBarSettings(definition)
   $: isRoot = id === $builderStore.screen?.props?._id
+  $: insideGrid =
+    parent?._component.endsWith("/container") && parent.layout === "grid"
+  $: showGridStyles = insideGrid && definition?.grid?.showControls !== false
+  $: gridHAlignVar = $getGridVar("h-align")
+  $: gridVAlignVar = $getGridVar("v-align")
 
   const getBarSettings = definition => {
     let allSettings = []
@@ -51,7 +61,7 @@
     }
     const id = $builderStore.selectedComponentId
     let element = document.getElementsByClassName(id)?.[0]
-    if (!isGridChild(element)) {
+    if (!insideGrid) {
       element = element?.children?.[0]
     }
 
@@ -135,6 +145,58 @@
     bind:this={self}
     class:visible={measured}
   >
+    {#if showGridStyles}
+      <GridStylesButton
+        style={gridHAlignVar}
+        value="start"
+        icon="AlignLeft"
+        title="Align left"
+      />
+      <GridStylesButton
+        style={gridHAlignVar}
+        value="center"
+        icon="AlignCenter"
+        title="Align center"
+      />
+      <GridStylesButton
+        style={gridHAlignVar}
+        value="end"
+        icon="AlignRight"
+        title="Align right"
+      />
+      <GridStylesButton
+        style={gridHAlignVar}
+        value="stretch"
+        icon="MoveLeftRight"
+        title="Stretch horizontally"
+      />
+      <div class="divider" />
+      <GridStylesButton
+        style={gridVAlignVar}
+        value="start"
+        icon="AlignTop"
+        title="Align top"
+      />
+      <GridStylesButton
+        style={gridVAlignVar}
+        value="center"
+        icon="AlignMiddle"
+        title="Align middle"
+      />
+      <GridStylesButton
+        style={gridVAlignVar}
+        value="end"
+        icon="AlignBottom"
+        title="Align bottom"
+      />
+      <GridStylesButton
+        style={gridVAlignVar}
+        value="stretch"
+        icon="MoveUpDown"
+        title="Stretch vertically"
+      />
+      <div class="divider" />
+    {/if}
     {#each settings as setting, idx}
       {#if setting.type === "select"}
         {#if setting.barStyle === "buttons"}
diff --git a/packages/client/src/components/preview/SettingsButton.svelte b/packages/client/src/components/preview/SettingsButton.svelte
index 36009da821..446a367282 100644
--- a/packages/client/src/components/preview/SettingsButton.svelte
+++ b/packages/client/src/components/preview/SettingsButton.svelte
@@ -9,6 +9,7 @@
   export let title
   export let rotate = false
   export let bool = false
+  export let active = false
 
   const dispatch = createEventDispatcher()
   $: currentValue = $componentStore.selectedComponent?.[prop]
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 6e82ecbe02..9d99578532 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -40,8 +40,8 @@ const createBuilderStore = () => {
     updateProp: (prop, value) => {
       eventStore.actions.dispatchEvent("update-prop", { prop, value })
     },
-    updateMetaStyles: async (styles, id) => {
-      await eventStore.actions.dispatchEvent("update-meta-styles", {
+    updateStyles: async (styles, id) => {
+      await eventStore.actions.dispatchEvent("update-styles", {
         styles,
         id,
       })
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index 03c48505ce..c83b580795 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -1,3 +1,51 @@
+import { builderStore } from "stores"
+import { derived, get } from "svelte/store"
+
+/**
+ * We use CSS variables on components to control positioning and layout of
+ * components inside grids.
+ * --grid-[mobile/desktop]-[row/col]-[start-end]: for positioning
+ * --grid-[mobile/desktop]-[h/v]-align: for layout of inner components within
+ *  the components grid bounds
+ *
+ * Component definitions define their default layout preference via the
+ * `grid.hAlign` and `grid.vAlign` keys in the manifest.
+ */
+
+// Enum for device preview type, included in grid CSS variables
+const Devices = {
+  Desktop: "desktop",
+  Mobile: "mobile",
+}
+
+// Generates the CSS variable for a certain grid param suffix, for the current
+// device
+const previewDevice = derived(builderStore, $store => $store.device)
+export const getGridVar = derived(previewDevice, device => suffix => {
+  const prefix = device === Devices.Mobile ? Devices.Mobile : Devices.Desktop
+  return `--grid-${prefix}-${suffix}`
+})
+
+// Generates the CSS variable for a certain grid param suffix, for the other
+// device variant than the one included in this variable
+export const getOtherDeviceGridVar = cssVar => {
+  if (cssVar.includes(Devices.Desktop)) {
+    return cssVar.replace(Devices.Desktop, Devices.Mobile)
+  } else {
+    return cssVar.replace(Devices.Mobile, Devices.Desktop)
+  }
+}
+
+// Gets the default value for a certain grid CSS variable
+export const getDefaultGridVarValue = cssVar => {
+  if (cssVar.includes("align")) {
+    return cssVar.includes("-h-") ? "stretch" : "center"
+  } else {
+    return cssVar.endsWith("-start") ? 1 : 2
+  }
+}
+
+// Determines whether a JS event originated from immediately within a grid
 export const isGridEvent = e => {
   return (
     e.target
@@ -8,6 +56,7 @@ export const isGridEvent = e => {
   )
 }
 
+// Determines whether a DOM element is an immediate child of a grid
 export const isGridChild = node => {
   return node
     ?.closest(".component")
@@ -15,6 +64,42 @@ export const isGridChild = node => {
     ?.childNodes[0]?.classList?.contains("grid")
 }
 
+// Gets the component ID of the closest parent grid
 export const getGridParentID = node => {
   return node?.closest(".grid")?.parentNode.dataset.id
 }
+
+// Generates the base set of grid CSS vars from a component definition
+const alignmentToStyleMap = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch",
+}
+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"
+  return {
+    ["--grid-desktop-h-align"]: alignmentToStyleMap[gridHAlign],
+    ["--grid-mobile-h-align"]: alignmentToStyleMap[gridHAlign],
+    ["--grid-desktop-v-align"]: alignmentToStyleMap[gridVAlign],
+    ["--grid-mobile-v-align"]: alignmentToStyleMap[gridVAlign],
+    ["--grid-desktop-child-flex"]: flexStyles,
+    ["--grid-mobile-child-flex"]: flexStyles,
+  }
+}
+
+// Gets the current value of a certain grid CSS variable for a component
+export const getGridVarValue = (component, variable) => {
+  // Try the desired variable
+  let val = component?._styles?.normal?.[variable]
+
+  // Otherwise try the other device variables
+  if (!val) {
+    val = component?._styles?.normal?.[getOtherDeviceGridVar(variable)]
+  }
+
+  // Otherwise use the default
+  return val ? val : getDefaultGridVarValue(variable)
+}

From fd57f2ffccd78794b10faf981057dbd89d8bf37b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 31 Jul 2024 10:36:39 +0100
Subject: [PATCH 011/112] Remove logs

---
 packages/client/src/components/preview/GridDNDHandler.svelte   | 1 -
 packages/client/src/components/preview/GridStylesButton.svelte | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 41e3ea4a2f..67e5a0bf39 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -178,7 +178,6 @@
         colStart: minMax(getCurrent(vars.colStart), 1, gridCols),
         colEnd: minMax(getCurrent(vars.colEnd), 2, gridCols + 1),
       }
-      console.log(dragInfo.grid)
       handleEvent(e)
     }
   }
diff --git a/packages/client/src/components/preview/GridStylesButton.svelte b/packages/client/src/components/preview/GridStylesButton.svelte
index 7e436bdebc..0a313bba53 100644
--- a/packages/client/src/components/preview/GridStylesButton.svelte
+++ b/packages/client/src/components/preview/GridStylesButton.svelte
@@ -9,7 +9,6 @@
   export let title
 
   $: currentValue = getGridVarValue($componentStore.selectedComponent, style)
-  $: console.log(style, currentValue)
   $: active = currentValue === value
 </script>
 

From fc2fb812051c5fbd88f5f580dce09f57cfe96566 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 31 Jul 2024 10:43:25 +0100
Subject: [PATCH 012/112] Fix bug with responsive css variables

---
 packages/client/src/utils/grid.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index c83b580795..a357f86de4 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -20,7 +20,7 @@ const Devices = {
 
 // Generates the CSS variable for a certain grid param suffix, for the current
 // device
-const previewDevice = derived(builderStore, $store => $store.device)
+const previewDevice = derived(builderStore, $store => $store.previewDevice)
 export const getGridVar = derived(previewDevice, device => suffix => {
   const prefix = device === Devices.Mobile ? Devices.Mobile : Devices.Desktop
   return `--grid-${prefix}-${suffix}`

From 0ea9b157c789487e9c5bc71511eb57ac4902f9fc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 31 Jul 2024 13:58:29 +0100
Subject: [PATCH 013/112] Further refactoring to grid nested layouts

---
 .../client/src/components/Component.svelte    |  6 ++--
 .../app/container/GridContainer.svelte        |  2 +-
 .../preview/GridStylesButton.svelte           | 11 +++----
 .../src/components/preview/SettingsBar.svelte | 31 +++++++++++++++----
 .../components/preview/SettingsButton.svelte  | 11 +++----
 .../preview/SettingsColorPicker.svelte        |  5 +--
 .../components/preview/SettingsPicker.svelte  |  5 +--
 packages/client/src/utils/grid.js             | 10 +++---
 8 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 771cb8b0e6..85c6dc6e36 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -200,11 +200,12 @@
 
   // Build up full styles and split them into variables and non-variables
   $: baseStyles = getBaseStyles(definition)
-  $: parsedStyles = parseStyles({
+  $: styles = {
     ...baseStyles,
     ...instance._styles?.normal,
     ...ephemeralStyles,
-  })
+  }
+  $: parsedStyles = parseStyles(styles)
   $: wrapperCSS = buildStyleString(parsedStyles.variables)
 
   // Update component context
@@ -214,6 +215,7 @@
     styles: {
       ...instance._styles,
       normal: parsedStyles.nonVariables,
+      variables: parsedStyles.variables,
       custom: customCSS,
       id,
       empty: emptyState,
diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index a5450ffe4c..3e58fef787 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -95,7 +95,7 @@
   /* Ensure all top level children have grid styles applied */
   .grid :global(> .component) {
     display: flex;
-    overflow: hidden;
+    overflow: auto;
 
     /* On desktop, use desktop metadata and fall back to mobile */
     /* Position vars */
diff --git a/packages/client/src/components/preview/GridStylesButton.svelte b/packages/client/src/components/preview/GridStylesButton.svelte
index 0a313bba53..e168754f3b 100644
--- a/packages/client/src/components/preview/GridStylesButton.svelte
+++ b/packages/client/src/components/preview/GridStylesButton.svelte
@@ -1,14 +1,16 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import { builderStore, componentStore } from "stores"
+  import { builderStore } from "stores"
   import { getGridVarValue } from "utils/grid"
 
   export let style
   export let value
   export let icon
   export let title
+  export let gridStyles
+  export let componentId
 
-  $: currentValue = getGridVarValue($componentStore.selectedComponent, style)
+  $: currentValue = getGridVarValue(gridStyles, style)
   $: active = currentValue === value
 </script>
 
@@ -18,10 +20,7 @@
   {title}
   class:active
   on:click={() => {
-    builderStore.actions.updateStyles(
-      { [style]: value },
-      $componentStore.selectedComponent._id
-    )
+    builderStore.actions.updateStyles({ [style]: value }, componentId)
   }}
 >
   <Icon name={icon} size="S" />
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index 540204f817..1fecec5376 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -20,11 +20,12 @@
 
   // TODO: respect dependsOn keys
 
-  $: id = $builderStore.selectedComponentId
-  $: parent = findComponentParent($builderStore.screen.props, id)
-  $: instance = componentStore.actions.getComponentInstance(id)
-  $: state = $instance?.state
+  $: componentId = $builderStore.selectedComponentId
+  $: component = $componentStore.selectedComponent
   $: definition = $componentStore.selectedComponentDefinition
+  $: parent = findComponentParent($builderStore.screen.props, componentId)
+  $: instance = componentStore.actions.getComponentInstance(componentId)
+  $: state = $instance?.state
   $: showBar =
     definition?.showSettingsBar !== false &&
     !$dndIsDragging &&
@@ -36,12 +37,13 @@
     }
   }
   $: settings = getBarSettings(definition)
-  $: isRoot = id === $builderStore.screen?.props?._id
+  $: isRoot = componentId === $builderStore.screen?.props?._id
   $: insideGrid =
     parent?._component.endsWith("/container") && parent.layout === "grid"
   $: showGridStyles = insideGrid && definition?.grid?.showControls !== false
   $: gridHAlignVar = $getGridVar("h-align")
   $: gridVAlignVar = $getGridVar("v-align")
+  $: gridStyles = $state?.styles?.variables
 
   const getBarSettings = definition => {
     let allSettings = []
@@ -141,7 +143,7 @@
 {#if showBar}
   <div
     class="bar"
-    style="top: {top}px; left: {left}px;"
+    style="top:{top}px; left:{left}px;"
     bind:this={self}
     class:visible={measured}
   >
@@ -151,24 +153,32 @@
         value="start"
         icon="AlignLeft"
         title="Align left"
+        {gridStyles}
+        {componentId}
       />
       <GridStylesButton
         style={gridHAlignVar}
         value="center"
         icon="AlignCenter"
         title="Align center"
+        {gridStyles}
+        {componentId}
       />
       <GridStylesButton
         style={gridHAlignVar}
         value="end"
         icon="AlignRight"
         title="Align right"
+        {gridStyles}
+        {componentId}
       />
       <GridStylesButton
         style={gridHAlignVar}
         value="stretch"
         icon="MoveLeftRight"
         title="Stretch horizontally"
+        {gridStyles}
+        {componentId}
       />
       <div class="divider" />
       <GridStylesButton
@@ -176,24 +186,32 @@
         value="start"
         icon="AlignTop"
         title="Align top"
+        {gridStyles}
+        {componentId}
       />
       <GridStylesButton
         style={gridVAlignVar}
         value="center"
         icon="AlignMiddle"
         title="Align middle"
+        {gridStyles}
+        {componentId}
       />
       <GridStylesButton
         style={gridVAlignVar}
         value="end"
         icon="AlignBottom"
         title="Align bottom"
+        {gridStyles}
+        {componentId}
       />
       <GridStylesButton
         style={gridVAlignVar}
         value="stretch"
         icon="MoveUpDown"
         title="Stretch vertically"
+        {gridStyles}
+        {componentId}
       />
       <div class="divider" />
     {/if}
@@ -206,6 +224,7 @@
               value={option.value}
               icon={option.barIcon}
               title={option.barTitle || option.label}
+              {component}
             />
           {/each}
         {:else}
diff --git a/packages/client/src/components/preview/SettingsButton.svelte b/packages/client/src/components/preview/SettingsButton.svelte
index 446a367282..a93ffb77af 100644
--- a/packages/client/src/components/preview/SettingsButton.svelte
+++ b/packages/client/src/components/preview/SettingsButton.svelte
@@ -1,18 +1,19 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import { builderStore, componentStore } from "stores"
+  import { builderStore } from "stores"
   import { createEventDispatcher } from "svelte"
 
   export let prop
   export let value
   export let icon
   export let title
-  export let rotate = false
   export let bool = false
   export let active = false
+  export let component
 
   const dispatch = createEventDispatcher()
-  $: currentValue = $componentStore.selectedComponent?.[prop]
+
+  $: currentValue = component?.[prop]
   $: active = prop && (bool ? !!currentValue : currentValue === value)
 </script>
 
@@ -20,7 +21,6 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   {title}
-  class:rotate
   class:active
   on:click={() => {
     if (prop) {
@@ -50,7 +50,4 @@
     background-color: rgba(13, 102, 208, 0.1);
     color: var(--spectrum-global-color-blue-600);
   }
-  .rotate {
-    transform: rotate(90deg);
-  }
 </style>
diff --git a/packages/client/src/components/preview/SettingsColorPicker.svelte b/packages/client/src/components/preview/SettingsColorPicker.svelte
index b078d048d2..a292d7d838 100644
--- a/packages/client/src/components/preview/SettingsColorPicker.svelte
+++ b/packages/client/src/components/preview/SettingsColorPicker.svelte
@@ -1,10 +1,11 @@
 <script>
   import { ColorPicker } from "@budibase/bbui"
-  import { builderStore, componentStore } from "stores"
+  import { builderStore } from "stores"
 
   export let prop
+  export let component
 
-  $: currentValue = $componentStore.selectedComponent?.[prop]
+  $: currentValue = component?.[prop]
 </script>
 
 <div>
diff --git a/packages/client/src/components/preview/SettingsPicker.svelte b/packages/client/src/components/preview/SettingsPicker.svelte
index 8b83729fde..3900d065e8 100644
--- a/packages/client/src/components/preview/SettingsPicker.svelte
+++ b/packages/client/src/components/preview/SettingsPicker.svelte
@@ -1,12 +1,13 @@
 <script>
   import { Select } from "@budibase/bbui"
-  import { builderStore, componentStore } from "stores"
+  import { builderStore } from "stores"
 
   export let prop
   export let options
   export let label
+  export let component
 
-  $: currentValue = $componentStore.selectedComponent?.[prop]
+  $: currentValue = component?.[prop]
 </script>
 
 <div>
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index a357f86de4..5879232e89 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -1,5 +1,5 @@
-import { builderStore } from "stores"
-import { derived, get } from "svelte/store"
+import { builderStore, componentStore } from "stores"
+import { derived, get, readable } from "svelte/store"
 
 /**
  * We use CSS variables on components to control positioning and layout of
@@ -91,13 +91,13 @@ export const getBaseGridVars = definition => {
 }
 
 // Gets the current value of a certain grid CSS variable for a component
-export const getGridVarValue = (component, variable) => {
+export const getGridVarValue = (styles, variable) => {
   // Try the desired variable
-  let val = component?._styles?.normal?.[variable]
+  let val = styles?.[variable]
 
   // Otherwise try the other device variables
   if (!val) {
-    val = component?._styles?.normal?.[getOtherDeviceGridVar(variable)]
+    val = styles?.[getOtherDeviceGridVar(variable)]
   }
 
   // Otherwise use the default

From e385c7291c0beb74a8611a8872d05c122ff978c9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 31 Jul 2024 14:12:46 +0100
Subject: [PATCH 014/112] Fix some crashes and improve pixel alignment

---
 packages/client/src/components/preview/Indicator.svelte  | 2 +-
 .../client/src/components/preview/IndicatorSet.svelte    | 9 ++++-----
 packages/client/src/utils/grid.js                        | 4 ++--
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/preview/Indicator.svelte b/packages/client/src/components/preview/Indicator.svelte
index 0480ea91ce..ae6ed081a5 100644
--- a/packages/client/src/components/preview/Indicator.svelte
+++ b/packages/client/src/components/preview/Indicator.svelte
@@ -69,7 +69,7 @@
     z-index: var(--zIndex);
     border: 2px solid var(--color);
     pointer-events: none;
-    border-radius: 4px;
+    border-radius: 2px;
   }
   .indicator.withText {
     border-top-left-radius: 0;
diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index e437ba84b6..aff62a76a7 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -37,7 +37,6 @@
   let callbackCount = 0
 
   $: visibleIndicators = state.indicators.filter(x => x.visible)
-  $: offset = $builderStore.inBuilder ? 0 : 2
 
   // Update position when any props change
   $: config.set({
@@ -150,10 +149,10 @@
 
       const elBounds = child.getBoundingClientRect()
       nextState.indicators.push({
-        top: elBounds.top + scrollY - deviceBounds.top - offset,
-        left: elBounds.left + scrollX - deviceBounds.left - offset,
-        width: elBounds.width + 4,
-        height: elBounds.height + 4,
+        top: Math.round(elBounds.top + scrollY - deviceBounds.top + 1),
+        left: Math.round(elBounds.left + scrollX - deviceBounds.left + 1),
+        width: Math.round(elBounds.width + 2),
+        height: Math.round(elBounds.height + 2),
         visible: false,
         insideSidePanel: !!child.closest(".side-panel"),
         insideModal: !!child.closest(".modal-content"),
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index 5879232e89..91b4d0a525 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -77,8 +77,8 @@ const alignmentToStyleMap = {
   stretch: "stretch",
 }
 export const getBaseGridVars = definition => {
-  const gridHAlign = definition.grid?.hAlign || "stretch"
-  const gridVAlign = definition.grid?.vAlign || "center"
+  const gridHAlign = definition?.grid?.hAlign || "stretch"
+  const gridVAlign = definition?.grid?.vAlign || "center"
   const flexStyles = gridVAlign === "stretch" ? "1 1 0" : "0 0 auto"
   return {
     ["--grid-desktop-h-align"]: alignmentToStyleMap[gridHAlign],

From de9b80e23dd8a4a6a5abfa96a64ab0b56925a7e2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 31 Jul 2024 15:03:29 +0100
Subject: [PATCH 015/112] Multiple style improvements and pixel layout fixes

---
 packages/client/src/components/ClientApp.svelte  | 16 +++++-----------
 packages/client/src/components/Component.svelte  |  3 ++-
 .../app/container/GridContainer.svelte           |  1 +
 .../src/components/preview/Indicator.svelte      |  9 +++++----
 .../src/components/preview/IndicatorSet.svelte   |  7 ++++---
 5 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 763c8ef771..d0369192a0 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -356,22 +356,16 @@
   }
 
   /* Preview styles */
-  /* The additional 6px of size is to account for 4px padding and 2px border */
   #clip-root.preview {
-    padding: 2px;
+    padding: 6px;
   }
   #clip-root.tablet-preview {
-    width: calc(1024px + 6px);
-    height: calc(768px + 6px);
+    width: calc(1024px + 12px);
+    height: calc(768px + 12px);
   }
   #clip-root.mobile-preview {
-    width: calc(390px + 6px);
-    height: calc(844px + 6px);
-  }
-
-  .preview #app-root {
-    border: 1px solid var(--spectrum-global-color-gray-300);
-    border-radius: 4px;
+    width: calc(390px + 12px);
+    height: calc(844px + 12px);
   }
 
   /* Print styles */
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 85c6dc6e36..6ff6fa00fc 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -619,6 +619,7 @@
     if (isBlock) {
       return
     }
+    console.log("select", id)
     e.stopPropagation()
     builderStore.actions.selectComponent(id)
   }
@@ -691,7 +692,7 @@
     data-parent={$component.id}
     style={wrapperCSS}
     {draggable}
-    on:click={handleWrapperClick}
+    on:click|self={handleWrapperClick}
   >
     {#if errorState}
       <ComponentErrorState
diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 3e58fef787..f9394415be 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -96,6 +96,7 @@
   .grid :global(> .component) {
     display: flex;
     overflow: auto;
+    pointer-events: all;
 
     /* On desktop, use desktop metadata and fall back to mobile */
     /* Position vars */
diff --git a/packages/client/src/components/preview/Indicator.svelte b/packages/client/src/components/preview/Indicator.svelte
index ae6ed081a5..d93ecaa02b 100644
--- a/packages/client/src/components/preview/Indicator.svelte
+++ b/packages/client/src/components/preview/Indicator.svelte
@@ -69,7 +69,7 @@
     z-index: var(--zIndex);
     border: 2px solid var(--color);
     pointer-events: none;
-    border-radius: 2px;
+    border-radius: 4px;
   }
   .indicator.withText {
     border-top-left-radius: 0;
@@ -123,7 +123,7 @@
 
   /* Anchor */
   .anchor {
-    --size: 24px;
+    --size: 20px;
     position: absolute;
     width: var(--size);
     height: var(--size);
@@ -133,11 +133,12 @@
     border-radius: 50%;
   }
   .anchor-inner {
-    width: 12px;
-    height: 12px;
+    width: calc(var(--size) / 2);
+    height: calc(var(--size) / 2);
     background: white;
     border: 2px solid var(--color);
     pointer-events: none;
+    border-radius: 2px;
   }
   .anchor.right {
     right: calc(var(--size) / -2 - 1px);
diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index aff62a76a7..6d7918244a 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -11,6 +11,8 @@
   export let prefix = null
   export let allowResizeAnchors = false
 
+  // Offset = 6 (clip-root padding) - 1 (half the border thickness)
+  const offset = 6 - 1
   const config = memo($$props)
   const errorColor = "var(--spectrum-global-color-static-red-600)"
   const defaultState = () => ({
@@ -146,11 +148,10 @@
       })
       observer.observe(child)
       observers.push(observer)
-
       const elBounds = child.getBoundingClientRect()
       nextState.indicators.push({
-        top: Math.round(elBounds.top + scrollY - deviceBounds.top + 1),
-        left: Math.round(elBounds.left + scrollX - deviceBounds.left + 1),
+        top: Math.round(elBounds.top + scrollY - deviceBounds.top + offset),
+        left: Math.round(elBounds.left + scrollX - deviceBounds.left + offset),
         width: Math.round(elBounds.width + 2),
         height: Math.round(elBounds.height + 2),
         visible: false,

From 8540f4020ba2a2af55f4656d4d836dda2c300552 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 31 Jul 2024 15:34:15 +0100
Subject: [PATCH 016/112] Improve client preview styles to work with increase
 client padding

---
 .../[screenId]/_components/AppPreview.svelte  | 22 ++++++++++++++-----
 .../src/components/ClientAppSkeleton.svelte   |  1 -
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 0ce9e096f2..a5d14062dc 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -275,6 +275,7 @@
     src="/app/preview"
     class:hidden={loading || error}
   />
+  <div class="underlay" />
   <div
     class="add-component"
     class:active={isAddingComponent}
@@ -295,11 +296,10 @@
 <style>
   .loading {
     position: absolute;
-    container-type: inline-size;
-    width: 100%;
-    height: 100%;
-    border: 2px solid transparent;
-    box-sizing: border-box;
+    width: calc(100% - 12px);
+    height: calc(100% - 12px);
+    left: 6px;
+    top: 6px;
   }
 
   .loading.tablet {
@@ -318,7 +318,6 @@
     display: grid;
     place-items: center;
     position: relative;
-    overflow: hidden;
     margin: auto;
     height: 100%;
   }
@@ -363,6 +362,17 @@
     height: 100%;
   }
 
+  .underlay {
+    position: absolute;
+    background: var(--spectrum-global-color-gray-200);
+    z-index: -1;
+    --offset: 2px;
+    width: calc(100% - 12px + 2 * var(--offset));
+    height: calc(100% - 12px + 2 * var(--offset));
+    left: calc(6px - var(--offset));
+    top: calc(6px - var(--offset));
+  }
+
   .add-component {
     position: absolute;
     bottom: 20px;
diff --git a/packages/frontend-core/src/components/ClientAppSkeleton.svelte b/packages/frontend-core/src/components/ClientAppSkeleton.svelte
index a1c90d2db7..f867fccddb 100644
--- a/packages/frontend-core/src/components/ClientAppSkeleton.svelte
+++ b/packages/frontend-core/src/components/ClientAppSkeleton.svelte
@@ -58,7 +58,6 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    border-radius: 4px;
     overflow: hidden;
     background-color: var(--spectrum-global-color-gray-200);
   }

From 940e2b5a940257bc965eea8808bea5482ecbf1a8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 31 Jul 2024 15:53:40 +0100
Subject: [PATCH 017/112] Improve client loading states, skeleton and underlay

---
 .../[screenId]/_components/AppPreview.svelte  | 71 +++++++++----------
 1 file changed, 34 insertions(+), 37 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index a5d14062dc..0e2eb2ceac 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -246,13 +246,13 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="component-container">
+<div
+  class="component-container"
+  class:tablet={$previewStore.previewDevice === "tablet"}
+  class:mobile={$previewStore.previewDevice === "mobile"}
+>
   {#if loading}
-    <div
-      class={`loading ${$themeStore.baseTheme} ${$themeStore.theme}`}
-      class:tablet={$previewStore.previewDevice === "tablet"}
-      class:mobile={$previewStore.previewDevice === "mobile"}
-    >
+    <div class={`loading ${$themeStore.baseTheme} ${$themeStore.theme}`}>
       <ClientAppSkeleton
         sideNav={$navigationStore?.navigation === "Left"}
         hideFooter
@@ -294,32 +294,13 @@
 />
 
 <style>
-  .loading {
-    position: absolute;
-    width: calc(100% - 12px);
-    height: calc(100% - 12px);
-    left: 6px;
-    top: 6px;
-  }
-
-  .loading.tablet {
-    width: calc(1024px + 6px);
-    max-height: calc(768px + 6px);
-  }
-
-  .loading.mobile {
-    width: calc(390px + 6px);
-    max-height: calc(844px + 6px);
-  }
-
   .component-container {
-    grid-row-start: middle;
-    grid-column-start: middle;
     display: grid;
     place-items: center;
     position: relative;
     margin: auto;
     height: 100%;
+    --client-padding: 6px;
   }
   .component-container iframe {
     border: 0;
@@ -328,6 +309,33 @@
     width: 100%;
     background-color: transparent;
   }
+
+  .loading,
+  .underlay {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    width: calc(100% - var(--client-padding) * 2);
+    height: calc(100% - var(--client-padding) * 2);
+  }
+  .tablet .loading,
+  .tablet .underlay {
+    width: 1024px;
+    height: 768px;
+  }
+  .mobile .loading,
+  .mobile .underlay {
+    width: 390px;
+    height: 844px;
+  }
+
+  .underlay {
+    background: var(--spectrum-global-color-gray-200);
+    z-index: -1;
+    padding: 2px;
+  }
+
   .center {
     position: absolute;
     width: 100%;
@@ -362,17 +370,6 @@
     height: 100%;
   }
 
-  .underlay {
-    position: absolute;
-    background: var(--spectrum-global-color-gray-200);
-    z-index: -1;
-    --offset: 2px;
-    width: calc(100% - 12px + 2 * var(--offset));
-    height: calc(100% - 12px + 2 * var(--offset));
-    left: calc(6px - var(--offset));
-    top: calc(6px - var(--offset));
-  }
-
   .add-component {
     position: absolute;
     bottom: 20px;

From f6f0b575d6a7925d9956aa61d21b08cfc919a5fb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 31 Jul 2024 16:44:46 +0100
Subject: [PATCH 018/112] Add top level screen layout setting

---
 .../_components/Screen/GeneralPanel.svelte    | 20 ++++++++++++
 .../client/src/components/Component.svelte    |  1 -
 packages/client/src/components/Screen.svelte  | 21 ++++++++++++-
 .../client/src/components/app/Layout.svelte   | 10 +++---
 .../components/preview/GridDNDHandler.svelte  | 31 ++++++++-----------
 .../src/components/preview/SettingsBar.svelte |  2 +-
 packages/client/src/stores/screens.js         | 23 +++++++-------
 packages/client/src/utils/grid.js             |  2 +-
 8 files changed, 73 insertions(+), 37 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
index cecfdba858..3d5ef6a278 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
@@ -14,6 +14,7 @@
   import sanitizeUrl from "helpers/sanitizeUrl"
   import ButtonActionEditor from "components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte"
   import { getBindableProperties } from "dataBinding"
+  import BarButtonList from "components/design/settings/controls/BarButtonList.svelte"
 
   $: bindings = getBindableProperties($selectedScreen, null)
 
@@ -124,6 +125,24 @@
         disabled: !!$selectedScreen.layoutId,
       },
     },
+    {
+      key: "layout",
+      label: "Layout",
+      defaultValue: "flex",
+      control: BarButtonList,
+      props: {
+        options: [
+          {
+            barIcon: "ModernGridView",
+            value: "flex",
+          },
+          {
+            barIcon: "ViewGrid",
+            value: "grid",
+          },
+        ],
+      },
+    },
   ]
 
   const removeCustomLayout = async () => {
@@ -149,6 +168,7 @@
     value={Helpers.deepGet($selectedScreen, setting.key)}
     onChange={val => setScreenSetting(setting, val)}
     props={{ ...setting.props, error: errors[setting.key] }}
+    defaultValue={setting.defaultValue}
     {bindings}
   />
 {/each}
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 6ff6fa00fc..852aa30287 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -619,7 +619,6 @@
     if (isBlock) {
       return
     }
-    console.log("select", id)
     e.stopPropagation()
     builderStore.actions.selectComponent(id)
   }
diff --git a/packages/client/src/components/Screen.svelte b/packages/client/src/components/Screen.svelte
index ac0af9f3b2..ab1cc7812d 100644
--- a/packages/client/src/components/Screen.svelte
+++ b/packages/client/src/components/Screen.svelte
@@ -13,10 +13,29 @@
   const onLoadActions = memo()
 
   // Get the screen definition for the current route
-  $: screenDefinition = $screenStore.activeScreen?.props
+  $: screenDefinition = getScreenDefinition($screenStore.activeScreen)
   $: 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
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index af74e14aa0..cc2a086b2e 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -36,8 +36,8 @@
   export let logoLinkUrl
   export let openLogoLinkInNewTab
   export let textAlign
-
   export let embedded = false
+  export let pageLayout = "flex"
 
   const NavigationClasses = {
     Top: "top",
@@ -319,7 +319,7 @@
         }
       }}
     >
-      <div class="main size--{pageWidthClass}">
+      <div class="main size--{pageWidthClass} layout--{pageLayout}">
         <slot />
       </div>
     </div>
@@ -481,8 +481,9 @@
     position: relative;
     padding: 32px;
   }
-  .main.size--max {
-    padding: 0;
+  .main.layout--grid {
+    padding-top: 0;
+    padding-bottom: 0;
   }
   .layout--none .main {
     padding: 0;
@@ -501,6 +502,7 @@
   }
   .size--max {
     width: 100%;
+    padding: 0;
   }
 
   /*  Nav components */
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 67e5a0bf39..6cc322a83e 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -1,13 +1,13 @@
 <script>
   import { onMount, onDestroy } from "svelte"
+  import { get } from "svelte/store"
   import { builderStore, componentStore } from "stores"
   import { Utils, memo } from "@budibase/frontend-core"
   import {
     isGridEvent,
     getGridParentID,
     getGridVar,
-    getDefaultGridVarValue,
-    getOtherDeviceGridVar,
+    getGridVarValue,
   } from "utils/grid"
 
   // Grid CSS variables
@@ -153,30 +153,25 @@
       return
     }
 
-    const domGrid = getDOMNode(dragInfo.gridId)
+    const { id, gridId } = dragInfo
+    const domGrid = getDOMNode(gridId)
     const gridCols = parseInt(domGrid.dataset.cols)
     const gridRows = parseInt(domGrid.dataset.rows)
-    const domNode = getDOMNode(dragInfo.id)?.parentNode
-    const styles = window.getComputedStyle(domNode)
+    const instance = get(componentStore.actions.getComponentInstance(id))
+    if (!instance) {
+      return
+    }
+    const styles = get(instance.state).styles
     if (domGrid) {
-      // Util to get the current grid CSS variable for this device. If unset,
-      // fall back to using the other device type.
-      const getCurrent = cssVar => {
-        let style = styles?.getPropertyValue(cssVar)
-        if (!style) {
-          style = styles?.getPropertyValue(getOtherDeviceGridVar(cssVar))
-        }
-        return parseInt(style || getDefaultGridVarValue(cssVar))
-      }
       dragInfo.grid = {
         startX: e.clientX,
         startY: e.clientY,
 
         // Ensure things are within limits
-        rowStart: minMax(getCurrent(vars.rowStart), 1, gridRows),
-        rowEnd: minMax(getCurrent(vars.rowEnd), 2, gridRows + 1),
-        colStart: minMax(getCurrent(vars.colStart), 1, gridCols),
-        colEnd: minMax(getCurrent(vars.colEnd), 2, gridCols + 1),
+        rowStart: minMax(getGridVarValue(styles, vars.rowStart), 1, gridRows),
+        rowEnd: minMax(getGridVarValue(styles, vars.rowEnd), 2, gridRows + 1),
+        colStart: minMax(getGridVarValue(styles, vars.colStart), 1, gridCols),
+        colEnd: minMax(getGridVarValue(styles, vars.colEnd), 2, gridCols + 1),
       }
       handleEvent(e)
     }
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index 1fecec5376..c8535899af 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -43,7 +43,7 @@
   $: showGridStyles = insideGrid && definition?.grid?.showControls !== false
   $: gridHAlignVar = $getGridVar("h-align")
   $: gridVAlignVar = $getGridVar("v-align")
-  $: gridStyles = $state?.styles?.variables
+  $: gridStyles = $state?.styles
 
   const getBarSettings = definition => {
     let allSettings = []
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index 9cb0d536de..640d3d2750 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -129,29 +129,31 @@ const createScreenStore = () => {
       // If we don't have a legacy custom layout, build a layout structure
       // from the screen navigation settings
       if (!activeLayout) {
-        let navigationSettings = {
+        let layoutSettings = {
           navigation: "None",
           pageWidth: activeScreen?.width || "Large",
+          pageLayout: activeScreen?.layout || "flex",
+          embedded: $appStore.embedded,
         }
         if (activeScreen?.showNavigation) {
-          navigationSettings = {
-            ...navigationSettings,
+          layoutSettings = {
+            ...layoutSettings,
             ...($builderStore.navigation || $appStore.application?.navigation),
           }
 
           // Default navigation to top
-          if (!navigationSettings.navigation) {
-            navigationSettings.navigation = "Top"
+          if (!layoutSettings.navigation) {
+            layoutSettings.navigation = "Top"
           }
 
           // Default title to app name
-          if (!navigationSettings.title && !navigationSettings.hideTitle) {
-            navigationSettings.title = $appStore.application?.name
+          if (!layoutSettings.title && !layoutSettings.hideTitle) {
+            layoutSettings.title = $appStore.application?.name
           }
 
           // Default to the org logo
-          if (!navigationSettings.logoUrl) {
-            navigationSettings.logoUrl = $orgStore?.logoUrl
+          if (!layoutSettings.logoUrl) {
+            layoutSettings.logoUrl = $orgStore?.logoUrl
           }
         }
         activeLayout = {
@@ -173,8 +175,7 @@ const createScreenStore = () => {
                 },
               },
             ],
-            ...navigationSettings,
-            embedded: $appStore.embedded,
+            ...layoutSettings,
           },
         }
       }
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index 91b4d0a525..8f9746ad17 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -93,7 +93,7 @@ export const getBaseGridVars = definition => {
 // Gets the current value of a certain grid CSS variable for a component
 export const getGridVarValue = (styles, variable) => {
   // Try the desired variable
-  let val = styles?.[variable]
+  let val = styles?.variables?.[variable]
 
   // Otherwise try the other device variables
   if (!val) {

From 7433b073c5516c79ef4ef4d71ceda49d1efc09d6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 1 Aug 2024 08:52:41 +0100
Subject: [PATCH 019/112] Prevent pointer events in components while dragging

---
 .../src/components/preview/GridDNDHandler.svelte  | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 6cc322a83e..62cabc14cd 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -27,10 +27,8 @@
 
   // Set ephemeral grid styles on the dragged component
   $: instance = componentStore.actions.getComponentInstance(id)
-  $: $instance?.setEphemeralStyles({
-    ...$gridStyles,
-    ...($gridStyles ? { "z-index": 999 } : null),
-  })
+  $: componentStyles = getComponentStyles($gridStyles)
+  $: $instance?.setEphemeralStyles(componentStyles)
 
   // Sugar for a combination of both min and max
   const minMax = (value, min, max) => Math.min(max, Math.max(min, value))
@@ -41,6 +39,15 @@
     return [...component?.children][0]
   }
 
+  const getComponentStyles = gridStyles => {
+    let styles = { ...gridStyles }
+    if (gridStyles) {
+      styles["z-index"] = 999
+      styles["pointer-events"] = "none"
+    }
+    return styles
+  }
+
   const processEvent = Utils.throttle((mouseX, mouseY) => {
     if (!dragInfo?.grid) {
       return

From 99c7859fb2796aa3b39956e484d34a3fb249749f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 1 Aug 2024 09:00:18 +0100
Subject: [PATCH 020/112] Fix DND ghost cursor issue on mac

---
 .../src/components/preview/GridDNDHandler.svelte  | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 62cabc14cd..374defe138 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -10,6 +10,15 @@
     getGridVarValue,
   } from "utils/grid"
 
+  // Smallest possible 1x1 transparent GIF
+  const ghost = new Image(1, 1)
+  ghost.src =
+    "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
+
+  let dragInfo
+  let gridStyles = memo()
+  let id
+
   // Grid CSS variables
   $: vars = {
     colStart: $getGridVar("col-start"),
@@ -18,10 +27,6 @@
     rowEnd: $getGridVar("row-end"),
   }
 
-  let dragInfo
-  let gridStyles = memo()
-  let id
-
   // Some memoisation of primitive types for performance
   $: id = dragInfo?.id || id
 
@@ -117,7 +122,7 @@
     }
 
     // Hide drag ghost image
-    e.dataTransfer.setDragImage(new Image(), 0, 0)
+    e.dataTransfer.setDragImage(ghost, 0, 0)
 
     // Extract state
     let mode, id, side

From 8879188595af19cf0bc2aa9286bc74532c0fe1bf Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 1 Aug 2024 11:40:16 +0100
Subject: [PATCH 021/112] Update how screen layout param is handled

---
 .../_components/Screen/GeneralPanel.svelte    |  2 +-
 packages/client/src/components/Router.svelte  |  3 +++
 packages/client/src/components/Screen.svelte  | 21 +------------------
 .../client/src/components/app/Layout.svelte   |  5 ++---
 .../components/preview/IndicatorSet.svelte    | 13 +++---------
 packages/client/src/stores/screens.js         |  1 -
 packages/client/src/utils/grid.js             |  4 ++++
 7 files changed, 14 insertions(+), 35 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
index 3d5ef6a278..aa54187dfb 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
+++ b/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,
diff --git a/packages/client/src/components/Router.svelte b/packages/client/src/components/Router.svelte
index 551a564094..d19585dcec 100644
--- a/packages/client/src/components/Router.svelte
+++ b/packages/client/src/components/Router.svelte
@@ -71,4 +71,7 @@
   div {
     position: relative;
   }
+  div :global(> .component > *) {
+    flex: 1 1 auto;
+  }
 </style>
diff --git a/packages/client/src/components/Screen.svelte b/packages/client/src/components/Screen.svelte
index ab1cc7812d..ac0af9f3b2 100644
--- a/packages/client/src/components/Screen.svelte
+++ b/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
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index cc2a086b2e..3fbe3ed20c 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/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;
   }
diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index 6d7918244a..12ee3ad334 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/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 => {
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index 640d3d2750..3c5ece0a6c 100644
--- a/packages/client/src/stores/screens.js
+++ b/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) {
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index 8f9746ad17..e70ca70c28 100644
--- a/packages/client/src/utils/grid.js
+++ b/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")

From 1219463162c6fb82f4c7324b76e22f1664c97643 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 1 Aug 2024 11:58:06 +0100
Subject: [PATCH 022/112] Update grid rows and columns settings and add them to
 screen settings

---
 .../_components/Screen/GeneralPanel.svelte    | 178 +++++++++++-------
 .../_components/Screen/index.svelte           |   2 +-
 packages/client/manifest.json                 |   8 +-
 3 files changed, 112 insertions(+), 76 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
index aa54187dfb..00032cb23a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
@@ -6,6 +6,7 @@
     Checkbox,
     Banner,
     Select,
+    Stepper,
     notifications,
   } from "@budibase/bbui"
   import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
@@ -17,9 +18,113 @@
   import BarButtonList from "components/design/settings/controls/BarButtonList.svelte"
 
   $: bindings = getBindableProperties($selectedScreen, null)
+  $: screenSettings = getScreenSettings($selectedScreen)
 
   let errors = {}
 
+  const getScreenSettings = screen => {
+    let settings = [
+      {
+        key: "routing.homeScreen",
+        control: Checkbox,
+        props: {
+          text: "Set as home screen",
+        },
+      },
+      {
+        key: "routing.route",
+        label: "Route",
+        control: Input,
+        parser: val => {
+          if (!val.startsWith("/")) {
+            val = "/" + val
+          }
+          return sanitizeUrl(val)
+        },
+        validate: route => {
+          const existingRoute = screen.routing.route
+          if (route !== existingRoute && routeTaken(route)) {
+            return "That URL is already in use for this role"
+          }
+          return null
+        },
+      },
+      {
+        key: "routing.roleId",
+        label: "Access",
+        control: RoleSelect,
+        validate: role => {
+          const existingRole = screen.routing.roleId
+          if (role !== existingRole && roleTaken(role)) {
+            return "That role is already in use for this URL"
+          }
+          return null
+        },
+      },
+      {
+        key: "onLoad",
+        label: "On screen load",
+        control: ButtonActionEditor,
+      },
+      {
+        key: "width",
+        label: "Width",
+        control: Select,
+        props: {
+          options: ["Extra small", "Small", "Medium", "Large", "Max"],
+          placeholder: "Default",
+          disabled: !!screen.layoutId,
+        },
+      },
+      {
+        key: "props.layout",
+        label: "Layout",
+        defaultValue: "flex",
+        control: BarButtonList,
+        props: {
+          options: [
+            {
+              barIcon: "ModernGridView",
+              value: "flex",
+            },
+            {
+              barIcon: "ViewGrid",
+              value: "grid",
+            },
+          ],
+        },
+      },
+    ]
+
+    // Add grid layout settings if required
+    if (screen.props.layout === "grid") {
+      settings = settings.concat([
+        {
+          key: "props.cols",
+          label: "Columns",
+          control: Stepper,
+          defaultValue: 12,
+          props: {
+            min: 2,
+            max: 50,
+          },
+        },
+        {
+          key: "props.rows",
+          label: "Rows",
+          control: Stepper,
+          defaultValue: 12,
+          props: {
+            min: 2,
+            max: 50,
+          },
+        },
+      ])
+    }
+
+    return settings
+  }
+
   const routeTaken = url => {
     const roleId = get(selectedScreen).routing.roleId || "BASIC"
     return get(screenStore).screens.some(
@@ -72,79 +177,6 @@
     }
   }
 
-  $: screenSettings = [
-    {
-      key: "routing.homeScreen",
-      control: Checkbox,
-      props: {
-        text: "Set as home screen",
-      },
-    },
-    {
-      key: "routing.route",
-      label: "Route",
-      control: Input,
-      parser: val => {
-        if (!val.startsWith("/")) {
-          val = "/" + val
-        }
-        return sanitizeUrl(val)
-      },
-      validate: route => {
-        const existingRoute = get(selectedScreen).routing.route
-        if (route !== existingRoute && routeTaken(route)) {
-          return "That URL is already in use for this role"
-        }
-        return null
-      },
-    },
-    {
-      key: "routing.roleId",
-      label: "Access",
-      control: RoleSelect,
-      validate: role => {
-        const existingRole = get(selectedScreen).routing.roleId
-        if (role !== existingRole && roleTaken(role)) {
-          return "That role is already in use for this URL"
-        }
-        return null
-      },
-    },
-    {
-      key: "onLoad",
-      label: "On screen load",
-      control: ButtonActionEditor,
-    },
-    {
-      key: "width",
-      label: "Width",
-      control: Select,
-      props: {
-        options: ["Extra small", "Small", "Medium", "Large", "Max"],
-        placeholder: "Default",
-        disabled: !!$selectedScreen.layoutId,
-      },
-    },
-    {
-      key: "props.layout",
-      label: "Layout",
-      defaultValue: "flex",
-      control: BarButtonList,
-      props: {
-        options: [
-          {
-            barIcon: "ModernGridView",
-            value: "flex",
-          },
-          {
-            barIcon: "ViewGrid",
-            value: "grid",
-          },
-        ],
-      },
-    },
-  ]
-
   const removeCustomLayout = async () => {
     return screenStore.removeCustomLayout(get(selectedScreen))
   }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte
index 8a544eac86..405b8b0c21 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte
@@ -33,7 +33,7 @@
         {/each}
       </div>
     </div>
-    <Layout gap="S" paddingX="L" paddingY="XL">
+    <Layout gap="XS" paddingX="L" paddingY="XL">
       {#if activeTab === "theme"}
         <ThemePanel />
       {:else}
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 1c18fd4801..39c1213510 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -151,7 +151,9 @@
         "label": "Columns",
         "key": "cols",
         "placeholder": 12,
-        "min": 1,
+        "defaultValue": 12,
+        "min": 2,
+        "max": 50,
         "dependsOn": {
           "setting": "layout",
           "value": "grid"
@@ -162,7 +164,9 @@
         "label": "Rows",
         "key": "rows",
         "placeholder": 12,
-        "min": 1,
+        "defaultValue": 12,
+        "min": 2,
+        "max": 50,
         "dependsOn": {
           "setting": "layout",
           "value": "grid"

From 50a4f75f2b8b19e886fbf028e5b85e2c340e7cd2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 1 Aug 2024 12:02:09 +0100
Subject: [PATCH 023/112] Only allow selecting components via wrappers if
 interactive

---
 packages/client/src/components/Component.svelte | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 852aa30287..6088fb2e9c 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -616,9 +616,6 @@
   }
 
   const handleWrapperClick = e => {
-    if (isBlock) {
-      return
-    }
     e.stopPropagation()
     builderStore.actions.selectComponent(id)
   }
@@ -691,7 +688,7 @@
     data-parent={$component.id}
     style={wrapperCSS}
     {draggable}
-    on:click|self={handleWrapperClick}
+    on:click|self={interactive ? handleWrapperClick : null}
   >
     {#if errorState}
       <ComponentErrorState

From e7dd45a5e985b6ffcd43daad1be15be0241471d3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 1 Aug 2024 12:02:51 +0100
Subject: [PATCH 024/112] Fix typo

---
 packages/client/src/components/preview/IndicatorSet.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index 12ee3ad334..b2ad873005 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -163,7 +163,7 @@
 
   onDestroy(() => {
     clearInterval(interval)
-    document.removeEventListener("scroll", v, true)
+    document.removeEventListener("scroll", debouncedUpdate, true)
     observers.forEach(o => o.disconnect())
   })
 </script>

From 64c182df0f4026faef8de8499ee597accdabb615 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 1 Aug 2024 12:06:22 +0100
Subject: [PATCH 025/112] Fix indicator positioning in preview

---
 packages/client/src/components/preview/IndicatorSet.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index b2ad873005..464be3bb16 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -1,7 +1,7 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import Indicator from "./Indicator.svelte"
-  import { componentStore } from "stores"
+  import { componentStore, builderStore } from "stores"
   import { memo, Utils } from "@budibase/frontend-core"
   import { writable } from "svelte/store"
   import { isGridChild } from "utils/grid"
@@ -13,7 +13,6 @@
   export let allowResizeAnchors = false
 
   // Offset = 6 (clip-root padding) - 1 (half the border thickness)
-  const offset = 6 - 1
   const config = memo($$props)
   const errorColor = "var(--spectrum-global-color-static-red-600)"
   const defaultState = () => ({
@@ -39,6 +38,7 @@
   let observers = []
   let callbackCount = 0
 
+  $: offset = $builderStore.inBuilder ? 5 : -1
   $: visibleIndicators = state.indicators.filter(x => x.visible)
 
   // Update position when any props change

From 1eedb9241be03f7aa229c3ba7c6eed747a8a7f26 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 1 Aug 2024 12:09:44 +0100
Subject: [PATCH 026/112] Fix nested grids not laying out properly

---
 packages/client/src/utils/grid.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index e70ca70c28..8f9746ad17 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -58,10 +58,6 @@ 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")

From 61e24d18bc1325ec070e6e2147b5639fa0b4d39b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 1 Aug 2024 12:22:01 +0100
Subject: [PATCH 027/112] Fix issue with nested grids

---
 packages/client/src/utils/grid.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index 8f9746ad17..d5be908edb 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -66,7 +66,7 @@ export const isGridChild = node => {
 
 // Gets the component ID of the closest parent grid
 export const getGridParentID = node => {
-  return node?.closest(".grid")?.parentNode.dataset.id
+  return node?.parentNode?.closest(".grid")?.parentNode.dataset.id
 }
 
 // Generates the base set of grid CSS vars from a component definition

From 4e9e644e1312723d575cd15db77c4a1f9ce7f0c4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 1 Aug 2024 12:27:19 +0100
Subject: [PATCH 028/112] Prevent cross-grid variable inheritance

---
 .../src/components/app/container/GridContainer.svelte  | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index f9394415be..3ed99c1963 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -68,6 +68,16 @@
     position: relative;
     height: 400px;
     gap: 0;
+
+    /* Prevent cross-grid variable inheritance */
+    --grid-desktop-col-start: initial;
+    --grid-desktop-col-end: initial;
+    --grid-desktop-row-start: initial;
+    --grid-desktop-row-end: initial;
+    --grid-mobile-col-start: initial;
+    --grid-mobile-col-end: initial;
+    --grid-mobile-row-start: initial;
+    --grid-mobile-row-end: initial;
   }
   .grid,
   .underlay {

From 9906ea96a9f8597bf9207a929870bf0d4b5a49d7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 1 Aug 2024 16:23:53 +0100
Subject: [PATCH 029/112] Update some component manifest styles and fix issue
 with default grid vars

---
 packages/client/manifest.json                 | 72 ++++++++++++++-----
 .../client/src/components/Component.svelte    |  2 +
 .../app/container/GridContainer.svelte        | 25 +++++--
 .../components/preview/GridDNDHandler.svelte  | 23 ++----
 .../preview/GridStylesButton.svelte           |  1 +
 .../src/components/preview/SettingsBar.svelte |  5 +-
 packages/client/src/utils/grid.js             | 18 ++---
 7 files changed, 94 insertions(+), 52 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 39c1213510..9b3939854c 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -114,13 +114,12 @@
     "icon": "Selection",
     "hasChildren": true,
     "size": {
-      "width": 400,
+      "width": 500,
       "height": 200
     },
     "grid": {
       "hAlign": "stretch",
-      "vAlign": "stretch",
-      "showControls": false
+      "vAlign": "stretch"
     },
     "styles": ["padding", "size", "background", "border", "shadow"],
     "settings": [
@@ -363,8 +362,12 @@
     "illegalChildren": ["section"],
     "showEmptyState": false,
     "size": {
-      "width": 400,
-      "height": 100
+      "width": 600,
+      "height": 200
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
     },
     "settings": [
       {
@@ -735,8 +738,12 @@
     "illegalChildren": ["section"],
     "hasChildren": true,
     "size": {
-      "width": 400,
-      "height": 100
+      "width": 500,
+      "height": 200
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
     },
     "settings": [
       {
@@ -4963,8 +4970,12 @@
     "hasChildren": true,
     "actions": ["RefreshDatasource"],
     "size": {
-      "width": 400,
-      "height": 100
+      "width": 500,
+      "height": 200
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
     },
     "settings": [
       {
@@ -5281,6 +5292,10 @@
       "width": 100,
       "height": 35
     },
+    "grid": {
+      "hAlign": "center",
+      "vAlign": "center"
+    },
     "settings": [
       {
         "type": "dataProvider",
@@ -5327,6 +5342,14 @@
     "name": "Chart Block",
     "icon": "GraphPie",
     "hasChildren": false,
+    "size": {
+      "width": 600,
+      "height": 400
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
+    },
     "settings": [
       {
         "type": "select",
@@ -6250,6 +6273,10 @@
       "width": 600,
       "height": 400
     },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
+    },
     "settings": [
       {
         "type": "text",
@@ -6459,8 +6486,12 @@
     "illegalChildren": ["section", "rowexplorer"],
     "hasChildren": true,
     "size": {
-      "width": 400,
-      "height": 100
+      "width": 500,
+      "height": 200
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
     },
     "settings": [
       {
@@ -6731,9 +6762,13 @@
     "hasChildren": false,
     "ejectable": false,
     "size": {
-      "width": 400,
+      "width": 600,
       "height": 400
     },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "start"
+    },
     "styles": ["size"],
     "settings": [
       {
@@ -6922,7 +6957,7 @@
     "block": true,
     "info": "Form blocks are only compatible with internal or SQL tables",
     "size": {
-      "width": 400,
+      "width": 600,
       "height": 400
     },
     "grid": {
@@ -7147,8 +7182,12 @@
     "name": "Row Explorer Block",
     "icon": "PersonalizationField",
     "size": {
-      "width": 600,
-      "height": 400
+      "width": 800,
+      "height": 426
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "start"
     },
     "settings": [
       {
@@ -7272,8 +7311,7 @@
     },
     "grid": {
       "hAlign": "stretch",
-      "vAlign": "stretch",
-      "showControls": false
+      "vAlign": "stretch"
     },
     "settings": [
       {
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 6088fb2e9c..d45b320b35 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -634,6 +634,8 @@
   // Generates any required base styles based on the component definition
   const getBaseStyles = definition => {
     return {
+      "--default-width": definition.size?.width || 100,
+      "--default-height": definition.size?.height || 100,
       ...getBaseGridVars(definition),
     }
   }
diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 3ed99c1963..0df7b46f43 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -41,8 +41,8 @@
       ...$component.styles?.normal,
       "--cols": cols,
       "--rows": rows,
-      "--col-size": `${colSize}px`,
-      "--row-size": `${rowSize}px`,
+      "--col-size": colSize,
+      "--row-size": rowSize,
     },
     empty: false,
   }}
@@ -70,14 +70,14 @@
     gap: 0;
 
     /* Prevent cross-grid variable inheritance */
-    --grid-desktop-col-start: initial;
+    /*    --grid-desktop-col-start: initial;
     --grid-desktop-col-end: initial;
     --grid-desktop-row-start: initial;
     --grid-desktop-row-end: initial;
     --grid-mobile-col-start: initial;
     --grid-mobile-col-end: initial;
     --grid-mobile-row-start: initial;
-    --grid-mobile-row-end: initial;
+    --grid-mobile-row-end: initial;*/
   }
   .grid,
   .underlay {
@@ -111,9 +111,22 @@
     /* On desktop, use desktop metadata and fall back to mobile */
     /* Position vars */
     --col-start: var(--grid-desktop-col-start, var(--grid-mobile-col-start, 1));
-    --col-end: var(--grid-desktop-col-end, var(--grid-mobile-col-end, 2));
+    --col-end: var(
+      --grid-desktop-col-end,
+      var(
+        --grid-mobile-col-end,
+        /* Our final*/
+          round(up, calc(var(--default-width) / var(--col-size) + 1))
+      )
+    );
     --row-start: var(--grid-desktop-row-start, var(--grid-mobile-row-start, 1));
-    --row-end: var(--grid-desktop-row-end, var(--grid-mobile-row-end, 2));
+    --row-end: var(
+      --grid-desktop-row-end,
+      var(
+        --grid-mobile-row-end,
+        round(up, calc(var(--default-height) / var(--row-size) + 1))
+      )
+    );
 
     /*  Flex vars */
     --h-align: var(--grid-desktop-h-align, var(--grid-mobile-h-align, stretch));
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 374defe138..7e2cbd50c8 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -1,14 +1,8 @@
 <script>
   import { onMount, onDestroy } from "svelte"
-  import { get } from "svelte/store"
   import { builderStore, componentStore } from "stores"
   import { Utils, memo } from "@budibase/frontend-core"
-  import {
-    isGridEvent,
-    getGridParentID,
-    getGridVar,
-    getGridVarValue,
-  } from "utils/grid"
+  import { isGridEvent, getGridParentID, getGridVar } from "utils/grid"
 
   // Smallest possible 1x1 transparent GIF
   const ghost = new Image(1, 1)
@@ -166,24 +160,21 @@
     }
 
     const { id, gridId } = dragInfo
+    const domComponent = getDOMNode(id)
     const domGrid = getDOMNode(gridId)
     const gridCols = parseInt(domGrid.dataset.cols)
     const gridRows = parseInt(domGrid.dataset.rows)
-    const instance = get(componentStore.actions.getComponentInstance(id))
-    if (!instance) {
-      return
-    }
-    const styles = get(instance.state).styles
+    const styles = getComputedStyle(domComponent.parentNode)
     if (domGrid) {
       dragInfo.grid = {
         startX: e.clientX,
         startY: e.clientY,
 
         // Ensure things are within limits
-        rowStart: minMax(getGridVarValue(styles, vars.rowStart), 1, gridRows),
-        rowEnd: minMax(getGridVarValue(styles, vars.rowEnd), 2, gridRows + 1),
-        colStart: minMax(getGridVarValue(styles, vars.colStart), 1, gridCols),
-        colEnd: minMax(getGridVarValue(styles, vars.colEnd), 2, gridCols + 1),
+        rowStart: minMax(styles["grid-row-start"], 1, gridRows),
+        rowEnd: minMax(styles["grid-row-end"], 2, gridRows + 1),
+        colStart: minMax(styles["grid-column-start"], 1, gridCols),
+        colEnd: minMax(styles["grid-column-end"], 2, gridCols + 1),
       }
       handleEvent(e)
     }
diff --git a/packages/client/src/components/preview/GridStylesButton.svelte b/packages/client/src/components/preview/GridStylesButton.svelte
index e168754f3b..809efd7971 100644
--- a/packages/client/src/components/preview/GridStylesButton.svelte
+++ b/packages/client/src/components/preview/GridStylesButton.svelte
@@ -11,6 +11,7 @@
   export let componentId
 
   $: currentValue = getGridVarValue(gridStyles, style)
+  $: console.log(style, currentValue, value)
   $: active = currentValue === value
 </script>
 
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index c8535899af..6b00221f9e 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -40,7 +40,10 @@
   $: isRoot = componentId === $builderStore.screen?.props?._id
   $: insideGrid =
     parent?._component.endsWith("/container") && parent.layout === "grid"
-  $: showGridStyles = insideGrid && definition?.grid?.showControls !== false
+  $: showGridStyles =
+    insideGrid &&
+    (definition?.grid?.hAlign !== "stretch" ||
+      definition?.grid?.vAlign !== "stretch")
   $: gridHAlignVar = $getGridVar("h-align")
   $: gridVAlignVar = $getGridVar("v-align")
   $: gridStyles = $state?.styles
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index d5be908edb..4fa8a3e49b 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -70,23 +70,17 @@ export const getGridParentID = node => {
 }
 
 // Generates the base set of grid CSS vars from a component definition
-const alignmentToStyleMap = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end",
-  stretch: "stretch",
-}
 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"
   return {
-    ["--grid-desktop-h-align"]: alignmentToStyleMap[gridHAlign],
-    ["--grid-mobile-h-align"]: alignmentToStyleMap[gridHAlign],
-    ["--grid-desktop-v-align"]: alignmentToStyleMap[gridVAlign],
-    ["--grid-mobile-v-align"]: alignmentToStyleMap[gridVAlign],
-    ["--grid-desktop-child-flex"]: flexStyles,
-    ["--grid-mobile-child-flex"]: flexStyles,
+    "--grid-desktop-h-align": gridHAlign,
+    "--grid-mobile-h-align": gridHAlign,
+    "--grid-desktop-v-align": gridVAlign,
+    "--grid-mobile-v-align": gridVAlign,
+    "--grid-desktop-child-flex": flexStyles,
+    "--grid-mobile-child-flex": flexStyles,
   }
 }
 

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 030/112] 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,
   }

From 8dd0658f182f2766e4bf1a575683810ba7f3d51d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 2 Aug 2024 09:23:47 +0100
Subject: [PATCH 031/112] Fix component autosizing not working on mobile grids

---
 .../app/container/GridContainer.svelte        | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 0df7b46f43..2152bdf42f 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -115,8 +115,7 @@
       --grid-desktop-col-end,
       var(
         --grid-mobile-col-end,
-        /* Our final*/
-          round(up, calc(var(--default-width) / var(--col-size) + 1))
+        round(up, calc(var(--default-width) / var(--col-size) + 1))
       )
     );
     --row-start: var(--grid-desktop-row-start, var(--grid-mobile-row-start, 1));
@@ -128,7 +127,7 @@
       )
     );
 
-    /*  Flex vars */
+    /* Flex vars */
     --h-align: var(--grid-desktop-h-align, var(--grid-mobile-h-align, stretch));
     --v-align: var(--grid-desktop-v-align, var(--grid-mobile-v-align, center));
     --child-flex: var(
@@ -153,11 +152,23 @@
 
   /* On mobile, use mobile metadata and fall back to desktop */
   .grid.mobile :global(> .component) {
-    /*   Position vars */
+    /* Position vars */
     --col-start: var(--grid-mobile-col-start, var(--grid-desktop-col-start, 1));
-    --col-end: var(--grid-mobile-col-end, var(--grid-desktop-col-end, 2));
+    --col-end: var(
+      --grid-mobile-col-end,
+      var(
+        --grid-desktop-col-end,
+        round(up, calc(var(--default-width) / var(--col-size) + 1))
+      )
+    );
     --row-start: var(--grid-mobile-row-start, var(--grid-desktop-row-start, 1));
-    --row-end: var(--grid-mobile-row-end, var(--grid-desktop-row-end, 2));
+    --row-end: var(
+      --grid-mobile-row-end,
+      var(
+        --grid-desktop-row-end,
+        round(up, calc(var(--default-height) / var(--row-size) + 1))
+      )
+    );
 
     /* Flex vars */
     --h-align: var(--grid-mobile-h-align, var(--grid-desktop-h-align, stretch));

From 3630c738372f056d692e8082457a1e6eccb9a0c2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 2 Aug 2024 09:40:12 +0100
Subject: [PATCH 032/112] Fix flashing of missing component settings panel when
 deleting components

---
 .../design/[screenId]/_layout.svelte          |  6 +++-
 .../builder/src/stores/builder/components.js  | 29 ++++++++++---------
 .../preview/GridStylesButton.svelte           |  1 -
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
index ac87b53db2..c3f3ef71f5 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
@@ -2,7 +2,11 @@
   import AppPanel from "./_components/AppPanel.svelte"
   import * as routify from "@roxi/routify"
   import { syncURLToState } from "helpers/urlStateSync"
-  import { screenStore, selectedScreen } from "stores/builder"
+  import {
+    screenStore,
+    selectedScreen,
+    selectedComponent,
+  } from "stores/builder"
   import { onDestroy } from "svelte"
   import LeftPanel from "./_components/LeftPanel.svelte"
 
diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js
index c281c73dfe..21ea255b74 100644
--- a/packages/builder/src/stores/builder/components.js
+++ b/packages/builder/src/stores/builder/components.js
@@ -574,15 +574,26 @@ export class ComponentStore extends BudiStore {
       return
     }
 
-    // Determine the next component to select after deletion
+    // Determine the next component to select, and select it before deletion
+    // to avoid an intermediate state of no component selection
     const state = get(this.store)
-    let nextSelectedComponentId
+    let nextId
     if (state.selectedComponentId === component._id) {
-      nextSelectedComponentId = this.getNext()
-      if (!nextSelectedComponentId) {
-        nextSelectedComponentId = this.getPrevious()
+      nextId = this.getNext()
+      if (!nextId) {
+        nextId = this.getPrevious()
       }
     }
+    if (nextId) {
+      // If this is the nav, select the screen instead
+      if (nextId.endsWith("-navigation")) {
+        nextId = nextId.replace("-navigation", "-screen")
+      }
+      this.update(state => {
+        state.selectedComponentId = nextId
+        return state
+      })
+    }
 
     // Patch screen
     await screenStore.patch(screen => {
@@ -601,14 +612,6 @@ export class ComponentStore extends BudiStore {
         child => child._id !== component._id
       )
     })
-
-    // Update selected component if required
-    if (nextSelectedComponentId) {
-      this.update(state => {
-        state.selectedComponentId = nextSelectedComponentId
-        return state
-      })
-    }
   }
 
   copy(component, cut = false, selectParent = true) {
diff --git a/packages/client/src/components/preview/GridStylesButton.svelte b/packages/client/src/components/preview/GridStylesButton.svelte
index 809efd7971..e168754f3b 100644
--- a/packages/client/src/components/preview/GridStylesButton.svelte
+++ b/packages/client/src/components/preview/GridStylesButton.svelte
@@ -11,7 +11,6 @@
   export let componentId
 
   $: currentValue = getGridVarValue(gridStyles, style)
-  $: console.log(style, currentValue, value)
   $: active = currentValue === value
 </script>
 

From 2bc4d3a6da66847aa342afec798230e14eb2f680 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 2 Aug 2024 10:00:49 +0100
Subject: [PATCH 033/112] Improve more component compatibility with grid
 layouts

---
 .../app/[application]/design/[screenId]/_layout.svelte |  6 +-----
 packages/client/manifest.json                          | 10 +++++++++-
 packages/client/src/components/app/ButtonGroup.svelte  |  5 +++++
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
index c3f3ef71f5..ac87b53db2 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
@@ -2,11 +2,7 @@
   import AppPanel from "./_components/AppPanel.svelte"
   import * as routify from "@roxi/routify"
   import { syncURLToState } from "helpers/urlStateSync"
-  import {
-    screenStore,
-    selectedScreen,
-    selectedComponent,
-  } from "stores/builder"
+  import { screenStore, selectedScreen } from "stores/builder"
   import { onDestroy } from "svelte"
   import LeftPanel from "./_components/LeftPanel.svelte"
 
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 46595279b4..f61ed7d1bc 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -388,6 +388,14 @@
     "name": "Button group",
     "icon": "Button",
     "hasChildren": false,
+    "size": {
+      "width": 200,
+      "height": 60
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
+    },
     "settings": [
       {
         "section": true,
@@ -570,7 +578,7 @@
     "icon": "Button",
     "editable": true,
     "size": {
-      "width": 105,
+      "width": 120,
       "height": 32
     },
     "grid": {
diff --git a/packages/client/src/components/app/ButtonGroup.svelte b/packages/client/src/components/app/ButtonGroup.svelte
index 2cf6b3db7d..b3523cdd21 100644
--- a/packages/client/src/components/app/ButtonGroup.svelte
+++ b/packages/client/src/components/app/ButtonGroup.svelte
@@ -19,6 +19,11 @@
       gap,
       wrap: true,
     }}
+    styles={{
+      normal: {
+        height: "100%",
+      },
+    }}
   >
     {#each buttons as { text, type, quiet, disabled, onClick, size, icon, gap }}
       <BlockComponent

From dbfad2cb3ace2fe65bf77fc1f56d0de6286b0a14 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 2 Aug 2024 10:35:35 +0100
Subject: [PATCH 034/112] Fix tag component being totally broken

---
 packages/bbui/package.json                    |   1 +
 packages/client/manifest.json                 |   4 +
 packages/client/src/components/app/Tag.svelte |   3 +
 yarn.lock                                     | 228 ++++++++++++++++--
 4 files changed, 215 insertions(+), 21 deletions(-)

diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index 1b3510cf3b..0830f8ab6f 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -72,6 +72,7 @@
     "@spectrum-css/switch": "1.0.2",
     "@spectrum-css/table": "3.0.1",
     "@spectrum-css/tabs": "3.2.12",
+    "@spectrum-css/tag": "3.0.0",
     "@spectrum-css/tags": "3.0.2",
     "@spectrum-css/textfield": "3.0.1",
     "@spectrum-css/toast": "3.0.1",
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index f61ed7d1bc..533da51f22 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1245,6 +1245,10 @@
       "width": 100,
       "height": 25
     },
+    "grid": {
+      "hAlign": "center",
+      "vAlign": "center"
+    },
     "settings": [
       {
         "type": "text",
diff --git a/packages/client/src/components/app/Tag.svelte b/packages/client/src/components/app/Tag.svelte
index 4644161506..f7d071ac79 100644
--- a/packages/client/src/components/app/Tag.svelte
+++ b/packages/client/src/components/app/Tag.svelte
@@ -57,4 +57,7 @@
   .spectrum-Tag--sizeL {
     padding: 0 var(--spectrum-global-dimension-size-150);
   }
+  .spectrum-Tag-label {
+    height: auto;
+  }
 </style>
diff --git a/yarn.lock b/yarn.lock
index 2d69b37cc6..f04ff376c3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5067,6 +5067,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/tabs/-/tabs-3.2.12.tgz#9b08f23d5aa881b3441af7757800c7173e5685ff"
   integrity sha512-rPFUW9SSW4+3/UJ3UrtY2/l3sQvlqB1fqxHLPDjgykvbfrnMejcCTNV4ZrFNHXpE/6+kGnk+yVViSPtWGwJzkA==
 
+"@spectrum-css/tag@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/tag/-/tag-3.0.0.tgz#b2e335dc526713b83f3e995e8d1d4fc84a3fc4df"
+  integrity sha512-a9z7ZTAWPonkWRNY5kxVaO6bxu9de3qUZWJ9Bl1YBlwWc8Fy1L7XqT4Wq3pW+4sktUbUUqqPYPIXK9xEFDofEw==
+
 "@spectrum-css/tags@3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@spectrum-css/tags/-/tags-3.0.2.tgz#5bf35fb79c97cd9344de485bd4626ad5b9f07757"
@@ -6707,22 +6712,39 @@ acorn-import-assertions@^1.9.0:
   resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz#507276249d684797c84e0734ef84860334cfb1ac"
   integrity sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==
 
-acorn-jsx@^5.3.2:
+acorn-jsx-walk@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/acorn-jsx-walk/-/acorn-jsx-walk-2.0.0.tgz#a5ed648264e68282d7c2aead80216bfdf232573a"
+  integrity sha512-uuo6iJj4D4ygkdzd6jPtcxs8vZgDX9YFIkqczGImoypX2fQ4dVImmu3UzA4ynixCIMTrEOWW+95M2HuBaCEOVA==
+
+acorn-jsx@5.3.2, acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
+acorn-loose@8.4.0:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/acorn-loose/-/acorn-loose-8.4.0.tgz#26d3e219756d1e180d006f5bcc8d261a28530f55"
+  integrity sha512-M0EUka6rb+QC4l9Z3T0nJEzNOO7JcoJlYMrBlyBCiFSXRyxjLKayd4TbQs2FDRWQU1h9FR7QVNHt+PEaoNL5rQ==
+  dependencies:
+    acorn "^8.11.0"
+
+acorn-walk@8.3.3, acorn-walk@^8.0.2, acorn-walk@^8.1.1, acorn-walk@^8.2.0, acorn-walk@^8.3.2:
+  version "8.3.3"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.3.3.tgz#9caeac29eefaa0c41e3d4c65137de4d6f34df43e"
+  integrity sha512-MxXdReSRhGO7VlFe1bRG/oI7/mdLV9B9JJT0N8vZOhF7gFRR5l3M8W9G8JxmKV+JC5mGqJ0QvqfSOLsCPa4nUw==
+  dependencies:
+    acorn "^8.11.0"
+
 acorn-walk@^7.1.1:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
-acorn-walk@^8.0.2, acorn-walk@^8.1.1, acorn-walk@^8.2.0, acorn-walk@^8.3.2:
-  version "8.3.3"
-  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.3.3.tgz#9caeac29eefaa0c41e3d4c65137de4d6f34df43e"
-  integrity sha512-MxXdReSRhGO7VlFe1bRG/oI7/mdLV9B9JJT0N8vZOhF7gFRR5l3M8W9G8JxmKV+JC5mGqJ0QvqfSOLsCPa4nUw==
-  dependencies:
-    acorn "^8.11.0"
+acorn@8.12.1:
+  version "8.12.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.12.1.tgz#71616bdccbe25e27a54439e0046e89ca76df2248"
+  integrity sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==
 
 acorn@^5.2.1, acorn@^5.7.3:
   version "5.7.4"
@@ -6791,6 +6813,16 @@ ajv-formats@^2.0.2:
   dependencies:
     ajv "^8.0.0"
 
+ajv@8.17.1:
+  version "8.17.1"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.17.1.tgz#37d9a5c776af6bc92d7f4f9510eba4c0a60d11a6"
+  integrity sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    fast-uri "^3.0.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+
 ajv@^6.12.3, ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
@@ -8484,6 +8516,11 @@ combos@^0.2.0:
   resolved "https://registry.yarnpkg.com/combos/-/combos-0.2.0.tgz#dc31c5a899b42293d55fe19c064d3e6e207ba4f7"
   integrity sha512-Z6YfvgiTCERWJTj3wQiXamFhssdvz1n4ok447rS330lw3uL72WAx8IvrLU7xiE71uyb5WF8JEP+BWB5KhOoGeg==
 
+commander@12.1.0:
+  version "12.1.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-12.1.0.tgz#01423b36f501259fdaac4d0e4d60c96c991585d3"
+  integrity sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==
+
 commander@6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.0.tgz#b990bfb8ac030aedc6d11bc04d1488ffef56db75"
@@ -9551,6 +9588,34 @@ depd@^1.1.0, depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==
 
+dependency-cruiser@^16.3.7:
+  version "16.3.10"
+  resolved "https://registry.yarnpkg.com/dependency-cruiser/-/dependency-cruiser-16.3.10.tgz#fe26a50d5e10a4496bc2b70d027fca6ded48814f"
+  integrity sha512-WkCnibHBfvaiaQ+S46LZ6h4AR6oj42Vsf5/0Vgtrwdwn7ZekMJdZ/ALoTwNp/RaGlKW+MbV/fhSZOvmhAWVWzQ==
+  dependencies:
+    acorn "8.12.1"
+    acorn-jsx "5.3.2"
+    acorn-jsx-walk "2.0.0"
+    acorn-loose "8.4.0"
+    acorn-walk "8.3.3"
+    ajv "8.17.1"
+    commander "12.1.0"
+    enhanced-resolve "5.17.1"
+    ignore "5.3.1"
+    interpret "^3.1.1"
+    is-installed-globally "1.0.0"
+    json5 "2.2.3"
+    memoize "10.0.0"
+    picocolors "1.0.1"
+    picomatch "4.0.2"
+    prompts "2.4.2"
+    rechoir "^0.8.0"
+    safe-regex "2.1.1"
+    semver "^7.6.3"
+    teamcity-service-messages "0.1.14"
+    tsconfig-paths-webpack-plugin "4.1.0"
+    watskeburt "4.1.0"
+
 dependency-tree@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/dependency-tree/-/dependency-tree-9.0.0.tgz#9288dd6daf35f6510c1ea30d9894b75369aa50a2"
@@ -10221,6 +10286,14 @@ engine.io@~6.5.2:
     engine.io-parser "~5.2.1"
     ws "~8.17.1"
 
+enhanced-resolve@5.17.1, enhanced-resolve@^5.7.0:
+  version "5.17.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz#67bfbbcc2f81d511be77d686a90267ef7f898a15"
+  integrity sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
 enhanced-resolve@^5.8.3:
   version "5.14.1"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.14.1.tgz#de684b6803724477a4af5d74ccae5de52c25f6b3"
@@ -11016,6 +11089,11 @@ fast-text-encoding@^1.0.0:
   resolved "https://registry.yarnpkg.com/fast-text-encoding/-/fast-text-encoding-1.0.6.tgz#0aa25f7f638222e3396d72bf936afcf1d42d6867"
   integrity sha512-VhXlQgj9ioXCqGstD37E/HBeqEGV/qOD/kmbVG8h5xKBYvM1L3lR1Zn4555cQ8GkYbJa8aJSipLPndE1k6zK2w==
 
+fast-uri@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/fast-uri/-/fast-uri-3.0.1.tgz#cddd2eecfc83a71c1be2cc2ef2061331be8a7134"
+  integrity sha512-MWipKbbYiYI0UC7cl8m/i/IWTqfC8YXsqjzybjddLsFjStroQzsHXkc73JutMvBiXmOvapk+axIl79ig5t55Bw==
+
 fast-url-parser@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/fast-url-parser/-/fast-url-parser-1.1.3.tgz#f4af3ea9f34d8a271cf58ad2b3759f431f0b318d"
@@ -11877,6 +11955,13 @@ global-agent@3.0.0:
     semver "^7.3.2"
     serialize-error "^7.0.1"
 
+global-directory@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/global-directory/-/global-directory-4.0.1.tgz#4d7ac7cfd2cb73f304c53b8810891748df5e361e"
+  integrity sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==
+  dependencies:
+    ini "4.1.1"
+
 global-dirs@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-3.0.1.tgz#0c488971f066baceda21447aecb1a8b911d22485"
@@ -12541,6 +12626,11 @@ ignore-walk@^6.0.0:
   dependencies:
     minimatch "^7.4.2"
 
+ignore@5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
+  integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
+
 ignore@^5.0.4, ignore@^5.2.0, ignore@^5.2.4:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.0.tgz#67418ae40d34d6999c95ff56016759c718c82f78"
@@ -12666,6 +12756,11 @@ ini@2.0.0:
   resolved "https://registry.yarnpkg.com/ini/-/ini-2.0.0.tgz#e5fd556ecdd5726be978fa1001862eacb0a94bc5"
   integrity sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==
 
+ini@4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-4.1.1.tgz#d95b3d843b1e906e56d6747d5447904ff50ce7a1"
+  integrity sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==
+
 ini@^1.3.2, ini@^1.3.4, ini@^1.3.8, ini@~1.3.0:
   version "1.3.8"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
@@ -12743,6 +12838,11 @@ interpret@^2.2.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-2.2.0.tgz#1a78a0b5965c40a5416d007ad6f50ad27c417df9"
   integrity sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==
 
+interpret@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-3.1.1.tgz#5be0ceed67ca79c6c4bc5cf0d7ee843dcea110c4"
+  integrity sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==
+
 into-stream@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/into-stream/-/into-stream-3.1.0.tgz#96fb0a936c12babd6ff1752a17d05616abd094c6"
@@ -12973,6 +13073,14 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-installed-globally@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-1.0.0.tgz#08952c43758c33d815692392f7f8437b9e436d5a"
+  integrity sha512-K55T22lfpQ63N4KEN57jZUAaAYqYHEe8veb/TycJRk9DdSCLLcovXz/mL6mOnhQaZsQGwPhuFopdQIlqGSEjiQ==
+  dependencies:
+    global-directory "^4.0.1"
+    is-path-inside "^4.0.0"
+
 is-installed-globally@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.4.0.tgz#9a0fd407949c30f86eb6959ef1b7994ed0b7b520"
@@ -13060,6 +13168,11 @@ is-path-inside@^3.0.2, is-path-inside@^3.0.3:
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
+is-path-inside@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-4.0.0.tgz#805aeb62c47c1b12fc3fd13bfb3ed1e7430071db"
+  integrity sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==
+
 is-plain-obj@^1.0.0, is-plain-obj@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
@@ -14084,6 +14197,11 @@ json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==
 
+json5@2.2.3, json5@^2.2.1, json5@^2.2.2, json5@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
 json5@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
@@ -14091,11 +14209,6 @@ json5@^1.0.2:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.2.1, json5@^2.2.2, json5@^2.2.3:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
-  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
-
 jsonc-parser@3.2.0, jsonc-parser@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz#31ff3f4c2b9793f89c67212627c51c6394f88e76"
@@ -15441,6 +15554,13 @@ memdown@^5.1.0:
     ltgt "~2.2.0"
     safe-buffer "~5.2.0"
 
+memoize@10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/memoize/-/memoize-10.0.0.tgz#43fa66b2022363c7c50cf5dfab732a808a3d7147"
+  integrity sha512-H6cBLgsi6vMWOcCpvVCdFFnl3kerEXbrYh9q+lY6VXvQSmM6CkmV08VOwT+WE2tzIEqRPFfAq3fm4v/UIW6mSA==
+  dependencies:
+    mimic-function "^5.0.0"
+
 memory-pager@^1.0.2:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/memory-pager/-/memory-pager-1.5.0.tgz#d8751655d22d384682741c972f2c3d6dfa3e66b5"
@@ -15549,6 +15669,11 @@ mimic-fn@^4.0.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
   integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
 
+mimic-function@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/mimic-function/-/mimic-function-5.0.1.tgz#acbe2b3349f99b9deaca7fb70e48b83e94e67076"
+  integrity sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==
+
 mimic-response@^1.0.0, mimic-response@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.1.tgz#4923538878eef42063cb8a3e3b0798781487ab1b"
@@ -17412,15 +17537,20 @@ phin@^2.9.1:
   resolved "https://registry.yarnpkg.com/phin/-/phin-2.9.3.tgz#f9b6ac10a035636fb65dfc576aaaa17b8743125c"
   integrity sha512-CzFr90qM24ju5f88quFC/6qohjC144rehe5n6DH900lgXmUe86+xCKc10ev56gRKC4/BkHUoG4uSiQgBiIXwDA==
 
+picocolors@1.0.1, picocolors@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
+  integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
+
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picocolors@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
-  integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
+picomatch@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.2.tgz#77c742931e8f3b8820946c76cd0c1f13730d1dab"
+  integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==
 
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.1:
   version "2.3.1"
@@ -18385,7 +18515,7 @@ promise.series@^0.2.0:
   resolved "https://registry.yarnpkg.com/promise.series/-/promise.series-0.2.0.tgz#2cc7ebe959fc3a6619c04ab4dbdc9e452d864bbd"
   integrity sha512-VWQJyU2bcDTgZw8kpfBpB/ejZASlCrzwz5f2hjb/zlujOEB4oeiAhHygAWq8ubsX2GVkD4kCU5V2dwOTaCY5EQ==
 
-prompts@^2.0.1:
+prompts@2.4.2, prompts@^2.0.1:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
   integrity sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==
@@ -18952,6 +19082,11 @@ regenerator-transform@^0.15.1:
   dependencies:
     "@babel/runtime" "^7.8.4"
 
+regexp-tree@~0.1.1:
+  version "0.1.27"
+  resolved "https://registry.yarnpkg.com/regexp-tree/-/regexp-tree-0.1.27.tgz#2198f0ef54518ffa743fe74d983b56ffd631b6cd"
+  integrity sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==
+
 regexp.prototype.flags@^1.4.3, regexp.prototype.flags@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz#138f644a3350f981a858c44f6bb1a61ff59be334"
@@ -19492,6 +19627,13 @@ safe-regex-test@^1.0.3:
     es-errors "^1.3.0"
     is-regex "^1.1.4"
 
+safe-regex@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-2.1.1.tgz#f7128f00d056e2fe5c11e81a1324dd974aadced2"
+  integrity sha512-rx+x8AMzKb5Q5lQ95Zoi6ZbJqwCLkqi3XuJXp5P3rT8OEc6sZCJG5AE5dU3lsgRr/F4Bs31jSlVN+j5KrsGu9A==
+  dependencies:
+    regexp-tree "~0.1.1"
+
 safe-stable-stringify@^2.1.0, safe-stable-stringify@^2.3.1:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/safe-stable-stringify/-/safe-stable-stringify-2.4.3.tgz#138c84b6f6edb3db5f8ef3ef7115b8f55ccbf886"
@@ -19603,7 +19745,7 @@ semver-diff@^3.1.1:
   dependencies:
     semver "^6.3.0"
 
-"semver@2 || 3 || 4 || 5", semver@7.5.3, semver@^5.5.0, semver@^5.6.0, semver@^5.7.1, semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0, semver@^6.3.1, semver@^7.0.0, semver@^7.1.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8, semver@^7.5.3, semver@^7.5.4, semver@~2.3.1:
+"semver@2 || 3 || 4 || 5", semver@7.5.3, semver@^5.5.0, semver@^5.6.0, semver@^5.7.1, semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0, semver@^6.3.1, semver@^7.0.0, semver@^7.1.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8, semver@^7.5.3, semver@^7.5.4, semver@^7.6.3, semver@~2.3.1:
   version "7.5.3"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.3.tgz#161ce8c2c6b4b3bdca6caadc9fa3317a4c4fe88e"
   integrity sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==
@@ -20287,7 +20429,16 @@ string-similarity@^4.0.4:
   resolved "https://registry.yarnpkg.com/string-similarity/-/string-similarity-4.0.4.tgz#42d01ab0b34660ea8a018da8f56a3309bb8b2a5b"
   integrity sha512-/q/8Q4Bl4ZKAPjj8WerIBJWALKkaPRfrvhfF8k/B23i4nzrlRj2/go1m90In7nG/3XDSbOo0+pu6RvCTM9RGMQ==
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -20378,7 +20529,7 @@ stringify-object@^3.2.1:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -20392,6 +20543,13 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2"
@@ -20867,6 +21025,11 @@ tarn@^3.0.1, tarn@^3.0.2:
   resolved "https://registry.yarnpkg.com/tarn/-/tarn-3.0.2.tgz#73b6140fbb881b71559c4f8bfde3d9a4b3d27693"
   integrity sha512-51LAVKUSZSVfI05vjPESNc5vwqqZpbXCsU+/+wxlOrUjk2SnFTt97v9ZgQrD4YmxYW1Px6w2KjaDitCfkvgxMQ==
 
+teamcity-service-messages@0.1.14:
+  version "0.1.14"
+  resolved "https://registry.yarnpkg.com/teamcity-service-messages/-/teamcity-service-messages-0.1.14.tgz#193d420a5e4aef8e5e50b8c39e7865e08fbb5d8a"
+  integrity sha512-29aQwaHqm8RMX74u2o/h1KbMLP89FjNiMxD9wbF2BbWOnbM+q+d1sCEC+MqCc4QW3NJykn77OMpTFw/xTHIc0w==
+
 tedious@^16.4.0:
   version "16.7.1"
   resolved "https://registry.yarnpkg.com/tedious/-/tedious-16.7.1.tgz#1190f30fd99a413f1dc9250dee4835cf0788b650"
@@ -21258,6 +21421,15 @@ ts-node@10.8.1:
     v8-compile-cache-lib "^3.0.1"
     yn "3.1.1"
 
+tsconfig-paths-webpack-plugin@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-4.1.0.tgz#3c6892c5e7319c146eee1e7302ed9e6f2be4f763"
+  integrity sha512-xWFISjviPydmtmgeUAuXp4N1fky+VCtfhOkDUFIv5ea7p4wuTomI4QTrXvFBX2S4jZsmyTSrStQl+E+4w+RzxA==
+  dependencies:
+    chalk "^4.1.0"
+    enhanced-resolve "^5.7.0"
+    tsconfig-paths "^4.1.2"
+
 tsconfig-paths@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-4.0.0.tgz#1082f5d99fd127b72397eef4809e4dd06d229b64"
@@ -22037,6 +22209,11 @@ walker@^1.0.8:
   dependencies:
     makeerror "1.0.12"
 
+watskeburt@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/watskeburt/-/watskeburt-4.1.0.tgz#3c0227669be646a97424b631164b1afe3d4d5344"
+  integrity sha512-KkY5H51ajqy9HYYI+u9SIURcWnqeVVhdH0I+ab6aXPGHfZYxgRCwnR6Lm3+TYB6jJVt5jFqw4GAKmwf1zHmGQw==
+
 wcwidth@^1.0.0, wcwidth@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
@@ -22282,7 +22459,7 @@ worker-farm@1.7.0:
   dependencies:
     errno "~0.1.7"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -22300,6 +22477,15 @@ wrap-ansi@^5.1.0:
     string-width "^3.0.0"
     strip-ansi "^5.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

From 0ba00a5117b67719d979894a7ba0bf265c0d3a7d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 2 Aug 2024 16:13:49 +0100
Subject: [PATCH 035/112] Move most grid specific logic into a dedicated file
 to avoid polluting rest of the codebase

---
 .../_components/Screen/GeneralPanel.svelte    |   4 +-
 packages/client/manifest.json                 |  16 +++
 .../client/src/components/ClientApp.svelte    |   6 +-
 .../client/src/components/Component.svelte    |  51 ++------
 .../client/src/components/app/Layout.svelte   |   2 +-
 .../app/container/GridContainer.svelte        |  36 ++----
 .../components/preview/GridDNDHandler.svelte  |  15 ++-
 .../src/components/preview/SettingsBar.svelte |   6 +-
 packages/client/src/utils/grid.js             | 122 ++++++++++++++----
 9 files changed, 160 insertions(+), 98 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
index 00032cb23a..2a5211a253 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
@@ -103,7 +103,7 @@
           key: "props.cols",
           label: "Columns",
           control: Stepper,
-          defaultValue: 12,
+          defaultValue: 24,
           props: {
             min: 2,
             max: 50,
@@ -113,7 +113,7 @@
           key: "props.rows",
           label: "Rows",
           control: Stepper,
-          defaultValue: 12,
+          defaultValue: 24,
           props: {
             min: 2,
             max: 50,
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 533da51f22..10503f30ac 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1391,6 +1391,10 @@
       "width": 25,
       "height": 25
     },
+    "grid": {
+      "hAlign": "center",
+      "vAlign": "center"
+    },
     "settings": [
       {
         "type": "icon",
@@ -1704,6 +1708,10 @@
       "width": 260,
       "height": 143
     },
+    "grid": {
+      "hAlign": "center",
+      "vAlign": "center"
+    },
     "settings": [
       {
         "type": "text",
@@ -1737,6 +1745,10 @@
       "width": 400,
       "height": 100
     },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
+    },
     "settings": [
       {
         "type": "text",
@@ -5240,6 +5252,10 @@
       "width": 300,
       "height": 120
     },
+    "grid": {
+      "hAlign": "center",
+      "vAlign": "center"
+    },
     "settings": [
       {
         "type": "text",
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index d0369192a0..118aa483ab 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -284,7 +284,7 @@
     visibility: hidden;
     padding: 0;
     margin: 0;
-    overflow: hidden;
+    overflow: clip;
     width: 100%;
     display: flex;
     flex-direction: row;
@@ -301,7 +301,7 @@
     width: 100%;
     height: 100%;
     position: relative;
-    overflow: hidden;
+    overflow: clip;
     background-color: transparent;
   }
 
@@ -311,7 +311,7 @@
   }
 
   #app-root {
-    overflow: hidden;
+    overflow: clip;
     height: 100%;
     width: 100%;
     display: flex;
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 7aea6ce6b9..6e184bde7e 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -39,8 +39,7 @@
     getActionContextKey,
     getActionDependentContextKeys,
   } from "../utils/buttonActions.js"
-  import { buildStyleString } from "utils/styleable.js"
-  import { getBaseGridVars } from "utils/grid.js"
+  import { gridLayout } from "utils/grid.js"
 
   export let instance = {}
   export let isLayout = false
@@ -198,15 +197,18 @@
   $: currentTheme = $context?.device?.theme
   $: darkMode = !currentTheme?.includes("light")
 
-  // Build up full styles and split them into variables and non-variables
-  $: baseStyles = getBaseStyles(definition, errorState)
-  $: styles = {
-    ...baseStyles,
+  $: normalStyles = {
     ...instance._styles?.normal,
     ...ephemeralStyles,
   }
-  $: parsedStyles = parseStyles(styles)
-  $: wrapperCSS = buildStyleString(parsedStyles.variables)
+  $: gridMetadata = {
+    id,
+    interactive,
+    styles: normalStyles,
+    draggable,
+    definition,
+    errored: errorState,
+  }
 
   // Update component context
   $: store.set({
@@ -214,8 +216,7 @@
     children: children.length,
     styles: {
       ...instance._styles,
-      normal: parsedStyles.nonVariables,
-      variables: parsedStyles.variables,
+      normal: normalStyles,
       custom: customCSS,
       id,
       empty: emptyState,
@@ -615,31 +616,6 @@
     }
   }
 
-  const handleWrapperClick = e => {
-    e.stopPropagation()
-    builderStore.actions.selectComponent(id)
-  }
-
-  // Splits component styles into variables and non-variables
-  const parseStyles = styles => {
-    let variables = {}
-    let nonVariables = {}
-    for (let style of Object.keys(styles || {})) {
-      const group = style.startsWith("--") ? variables : nonVariables
-      group[style] = styles[style]
-    }
-    return { variables, nonVariables }
-  }
-
-  // Generates any required base styles based on the component definition
-  const getBaseStyles = (definition, errored = false) => {
-    return {
-      "--default-width": errored ? 500 : definition.size?.width || 100,
-      "--default-height": errored ? 60 : definition.size?.height || 100,
-      ...getBaseGridVars(definition, errored),
-    }
-  }
-
   onMount(() => {
     // Register this component instance for external access
     if ($appStore.isDevApp) {
@@ -683,14 +659,11 @@
     class:parent={hasChildren}
     class:block={isBlock}
     class:error={errorState}
-    class:fill={definition.grid?.fill}
     data-id={id}
     data-name={name}
     data-icon={icon}
     data-parent={$component.id}
-    style={wrapperCSS}
-    {draggable}
-    on:click|self={interactive ? handleWrapperClick : null}
+    use:gridLayout={gridMetadata}
   >
     {#if errorState}
       <ComponentErrorState
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 3fbe3ed20c..9cfa74cbb0 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -480,7 +480,7 @@
     position: relative;
     padding: 32px;
   }
-  .main:has(> .grid) {
+  .main:has(.screenslot-dom > .component > .grid) {
     padding-top: 0;
     padding-bottom: 0;
   }
diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 2152bdf42f..b16fc88dbf 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -68,16 +68,6 @@
     position: relative;
     height: 400px;
     gap: 0;
-
-    /* Prevent cross-grid variable inheritance */
-    /*    --grid-desktop-col-start: initial;
-    --grid-desktop-col-end: initial;
-    --grid-desktop-row-start: initial;
-    --grid-desktop-row-end: initial;
-    --grid-mobile-col-start: initial;
-    --grid-mobile-col-end: initial;
-    --grid-mobile-row-start: initial;
-    --grid-mobile-row-end: initial;*/
   }
   .grid,
   .underlay {
@@ -128,12 +118,8 @@
     );
 
     /* Flex vars */
-    --h-align: var(--grid-desktop-h-align, var(--grid-mobile-h-align, stretch));
-    --v-align: var(--grid-desktop-v-align, var(--grid-mobile-v-align, center));
-    --child-flex: var(
-      --grid-desktop-child-flex,
-      var(--grid-mobile-child-flex, 0 0 auto)
-    );
+    --h-align: var(--grid-desktop-h-align, var(--grid-mobile-h-align));
+    --v-align: var(--grid-desktop-v-align, var(--grid-mobile-v-align));
 
     /* Ensure grid metadata falls within limits */
     grid-column-start: min(max(1, var(--col-start)), var(--cols)) !important;
@@ -171,16 +157,20 @@
     );
 
     /* Flex vars */
-    --h-align: var(--grid-mobile-h-align, var(--grid-desktop-h-align, stretch));
-    --v-align: var(--grid-mobile-v-align, var(--grid-desktop-v-align, center));
-    --child-flex: var(
-      --grid-mobile-child-flex,
-      var(--grid-desktop-child-flex, 0 0 auto)
-    );
+    --h-align: var(--grid-mobile-h-align, var(--grid-desktop-h-align));
+    --v-align: var(--grid-mobile-v-align, var(--grid-desktop-v-align));
   }
 
   /* Handle grid children which need to fill the outer component wrapper */
   .grid :global(> .component > *) {
-    flex: var(--child-flex) !important;
+    flex: 0 0 auto !important;
+  }
+  .grid:not(.mobile) :global(> .component.grid-desktop-grow > *) {
+    flex: 1 1 0 !important;
+    height: 0 !important;
+  }
+  .grid.mobile :global(> .component.grid-mobile-grow > *) {
+    flex: 1 1 0 !important;
+    height: 0 !important;
   }
 </style>
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 7e2cbd50c8..12631b980a 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -2,7 +2,12 @@
   import { onMount, onDestroy } from "svelte"
   import { builderStore, componentStore } from "stores"
   import { Utils, memo } from "@budibase/frontend-core"
-  import { isGridEvent, getGridParentID, getGridVar } from "utils/grid"
+  import {
+    isGridEvent,
+    getGridParentID,
+    gridCSSVars,
+    GridVars,
+  } from "utils/grid"
 
   // Smallest possible 1x1 transparent GIF
   const ghost = new Image(1, 1)
@@ -15,10 +20,10 @@
 
   // Grid CSS variables
   $: vars = {
-    colStart: $getGridVar("col-start"),
-    colEnd: $getGridVar("col-end"),
-    rowStart: $getGridVar("row-start"),
-    rowEnd: $getGridVar("row-end"),
+    colStart: $gridCSSVars[GridVars.ColStart],
+    colEnd: $gridCSSVars[GridVars.ColEnd],
+    rowStart: $gridCSSVars[GridVars.RowStart],
+    rowEnd: $gridCSSVars[GridVars.RowEnd],
   }
 
   // Some memoisation of primitive types for performance
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index 6b00221f9e..cd11529cfa 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -7,7 +7,7 @@
   import { builderStore, componentStore, dndIsDragging } from "stores"
   import { Utils } from "@budibase/frontend-core"
   import { findComponentParent } from "utils/components"
-  import { getGridVar } from "utils/grid"
+  import { gridCSSVars, GridVars } from "utils/grid"
 
   const verticalOffset = 36
   const horizontalOffset = 2
@@ -44,8 +44,8 @@
     insideGrid &&
     (definition?.grid?.hAlign !== "stretch" ||
       definition?.grid?.vAlign !== "stretch")
-  $: gridHAlignVar = $getGridVar("h-align")
-  $: gridVAlignVar = $getGridVar("v-align")
+  $: gridHAlignVar = $gridCSSVars[GridVars.HAlign]
+  $: gridVAlignVar = $gridCSSVars[GridVars.VAlign]
   $: gridStyles = $state?.styles
 
   const getBarSettings = definition => {
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index 3052199656..d3b16aeafd 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -1,5 +1,6 @@
-import { builderStore, componentStore } from "stores"
-import { derived, get, readable } from "svelte/store"
+import { builderStore } from "stores"
+import { derived } from "svelte/store"
+import { buildStyleString } from "utils/styleable.js"
 
 /**
  * We use CSS variables on components to control positioning and layout of
@@ -12,20 +13,42 @@ import { derived, get, readable } from "svelte/store"
  * `grid.hAlign` and `grid.vAlign` keys in the manifest.
  */
 
+// Enum representing the different CSS variables we use for grid metadata
+export const GridVars = {
+  HAlign: "h-align",
+  VAlign: "v-align",
+  ColStart: "col-start",
+  ColEnd: "col-end",
+  RowStart: "row-start",
+  RowEnd: "row-end",
+}
+
+// Classes used in selectors inside grid containers to control child styles
+export const GridClasses = {
+  DesktopFill: "grid-desktop-grow",
+  MobileFill: "grid-mobile-grow",
+}
+
 // Enum for device preview type, included in grid CSS variables
 const Devices = {
   Desktop: "desktop",
   Mobile: "mobile",
 }
 
-// Generates the CSS variable for a certain grid param suffix, for the current
-// device
+// A derived map of all CSS variables for the current device
 const previewDevice = derived(builderStore, $store => $store.previewDevice)
-export const getGridVar = derived(previewDevice, device => suffix => {
-  const prefix = device === Devices.Mobile ? Devices.Mobile : Devices.Desktop
-  return `--grid-${prefix}-${suffix}`
+export const gridCSSVars = derived(previewDevice, $device => {
+  const device = $device === Devices.Mobile ? Devices.Mobile : Devices.Desktop
+  let vars = {}
+  for (let type of Object.values(GridVars)) {
+    vars[type] = `--grid-${device}-${type}`
+  }
+  return vars
 })
 
+// Builds a CSS variable name for a certain piece of grid metadata
+export const getGridCSSVar = (device, type) => `--grid-${device}-${type}`
+
 // Generates the CSS variable for a certain grid param suffix, for the other
 // device variant than the one included in this variable
 export const getOtherDeviceGridVar = cssVar => {
@@ -69,21 +92,6 @@ export const getGridParentID = node => {
   return node?.parentNode?.closest(".grid")?.parentNode.dataset.id
 }
 
-// Generates the base set of grid CSS vars from a component definition
-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": 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,
-  }
-}
-
 // Gets the current value of a certain grid CSS variable for a component
 export const getGridVarValue = (styles, variable) => {
   // Try the desired variable
@@ -97,3 +105,73 @@ export const getGridVarValue = (styles, variable) => {
   // Otherwise use the default
   return val ? val : getDefaultGridVarValue(variable)
 }
+
+// Svelte action to apply required class names and styles to our component
+// wrappers
+export const gridLayout = (node, metadata) => {
+  let selectComponent
+
+  const applyMetadata = metadata => {
+    const { id, styles, interactive, errored, definition } = metadata
+    consol.log(styles)
+
+    // Callback to select the component when clicking on the wrapper
+    selectComponent = e => {
+      e.preventDefault()
+      builderStore.actions.selectComponent(id)
+    }
+
+    // Generate base set of grid CSS vars based for this component
+    const hAlign = errored ? "stretch" : definition?.grid?.hAlign || "stretch"
+    const vAlign = errored ? "stretch" : definition?.grid?.vAlign || "center"
+    const vars = {
+      "--default-width": errored ? 500 : definition.size?.width || 100,
+      "--default-height": errored ? 60 : definition.size?.height || 100,
+      "--grid-desktop-h-align": hAlign,
+      "--grid-mobile-h-align": hAlign,
+      "--grid-desktop-v-align": vAlign,
+      "--grid-mobile-v-align": vAlign,
+    }
+
+    // Extract any other CSS variables from the saved component styles
+    for (let style of Object.keys(styles)) {
+      if (style.startsWith("--")) {
+        vars[style] = styles[style]
+        delete styles[style]
+      }
+    }
+
+    // Apply all CSS variables to the wrapper
+    node.style = buildStyleString(vars)
+
+    // Toggle classes to specify whether our children should fill
+    const desktopVar = getGridCSSVar(Devices.Desktop, GridVars.VAlign)
+    const mobileVar = getGridCSSVar(Devices.Mobile, GridVars.VAlign)
+    node.classList.toggle(
+      GridClasses.DesktopFill,
+      vars[desktopVar] === "stretch"
+    )
+    node.classList.toggle(GridClasses.MobileFill, vars[mobileVar] === "stretch")
+
+    // Add a listener to select this node on click
+    if (interactive) {
+      node.addEventListener("click", selectComponent, false)
+    }
+  }
+
+  const removeListeners = () => {
+    node.removeEventListener("click", selectComponent)
+  }
+
+  applyMetadata(metadata)
+
+  return {
+    update(newMetadata) {
+      removeListeners()
+      applyMetadata(newMetadata)
+    },
+    destroy() {
+      removeListeners()
+    },
+  }
+}

From 1bce9855d006589b4c6d5a9cf3b03749953f6674 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 2 Aug 2024 16:44:18 +0100
Subject: [PATCH 036/112] More improvements

---
 .../components/preview/GridDNDHandler.svelte  | 13 ++--
 .../preview/GridStylesButton.svelte           | 17 ++++-
 .../src/components/preview/SettingsBar.svelte | 16 ++---
 packages/client/src/utils/grid.js             | 66 ++++---------------
 4 files changed, 38 insertions(+), 74 deletions(-)

diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 12631b980a..114e131eb3 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -5,8 +5,8 @@
   import {
     isGridEvent,
     getGridParentID,
-    gridCSSVars,
-    GridVars,
+    GridParams,
+    getGridVar,
   } from "utils/grid"
 
   // Smallest possible 1x1 transparent GIF
@@ -19,11 +19,12 @@
   let id
 
   // Grid CSS variables
+  $: device = $builderStore.previewDevice
   $: vars = {
-    colStart: $gridCSSVars[GridVars.ColStart],
-    colEnd: $gridCSSVars[GridVars.ColEnd],
-    rowStart: $gridCSSVars[GridVars.RowStart],
-    rowEnd: $gridCSSVars[GridVars.RowEnd],
+    colStart: getGridVar(device, GridParams.ColStart),
+    colEnd: getGridVar(device, GridParams.ColEnd),
+    rowStart: getGridVar(device, GridParams.RowStart),
+    rowEnd: getGridVar(device, GridParams.RowEnd),
   }
 
   // Some memoisation of primitive types for performance
diff --git a/packages/client/src/components/preview/GridStylesButton.svelte b/packages/client/src/components/preview/GridStylesButton.svelte
index e168754f3b..0dff88f23a 100644
--- a/packages/client/src/components/preview/GridStylesButton.svelte
+++ b/packages/client/src/components/preview/GridStylesButton.svelte
@@ -1,17 +1,28 @@
 <script>
   import { Icon } from "@budibase/bbui"
   import { builderStore } from "stores"
-  import { getGridVarValue } from "utils/grid"
 
   export let style
   export let value
   export let icon
   export let title
-  export let gridStyles
   export let componentId
 
-  $: currentValue = getGridVarValue(gridStyles, style)
+  // Needs to update in real time
+
+  let currentValue
+
+  $: fetchCurrentValue(componentId, style)
   $: active = currentValue === value
+
+  const fetchCurrentValue = (id, style) => {
+    const node = document.getElementsByClassName(`${id}-dom`)[0]?.parentNode
+    if (!node) {
+      return null
+    }
+    const styles = getComputedStyle(node)
+    currentValue = styles.getPropertyValue(style)
+  }
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index cd11529cfa..df714681e9 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -7,7 +7,7 @@
   import { builderStore, componentStore, dndIsDragging } from "stores"
   import { Utils } from "@budibase/frontend-core"
   import { findComponentParent } from "utils/components"
-  import { gridCSSVars, GridVars } from "utils/grid"
+  import { getGridVar, GridParams } from "utils/grid"
 
   const verticalOffset = 36
   const horizontalOffset = 2
@@ -44,9 +44,9 @@
     insideGrid &&
     (definition?.grid?.hAlign !== "stretch" ||
       definition?.grid?.vAlign !== "stretch")
-  $: gridHAlignVar = $gridCSSVars[GridVars.HAlign]
-  $: gridVAlignVar = $gridCSSVars[GridVars.VAlign]
-  $: gridStyles = $state?.styles
+  $: device = $builderStore.previewDevice
+  $: gridHAlignVar = getGridVar(device, GridParams.HAlign)
+  $: gridVAlignVar = getGridVar(device, GridParams.VAlign)
 
   const getBarSettings = definition => {
     let allSettings = []
@@ -156,7 +156,6 @@
         value="start"
         icon="AlignLeft"
         title="Align left"
-        {gridStyles}
         {componentId}
       />
       <GridStylesButton
@@ -164,7 +163,6 @@
         value="center"
         icon="AlignCenter"
         title="Align center"
-        {gridStyles}
         {componentId}
       />
       <GridStylesButton
@@ -172,7 +170,6 @@
         value="end"
         icon="AlignRight"
         title="Align right"
-        {gridStyles}
         {componentId}
       />
       <GridStylesButton
@@ -180,7 +177,6 @@
         value="stretch"
         icon="MoveLeftRight"
         title="Stretch horizontally"
-        {gridStyles}
         {componentId}
       />
       <div class="divider" />
@@ -189,7 +185,6 @@
         value="start"
         icon="AlignTop"
         title="Align top"
-        {gridStyles}
         {componentId}
       />
       <GridStylesButton
@@ -197,7 +192,6 @@
         value="center"
         icon="AlignMiddle"
         title="Align middle"
-        {gridStyles}
         {componentId}
       />
       <GridStylesButton
@@ -205,7 +199,6 @@
         value="end"
         icon="AlignBottom"
         title="Align bottom"
-        {gridStyles}
         {componentId}
       />
       <GridStylesButton
@@ -213,7 +206,6 @@
         value="stretch"
         icon="MoveUpDown"
         title="Stretch vertically"
-        {gridStyles}
         {componentId}
       />
       <div class="divider" />
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index d3b16aeafd..88e8477d2d 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -1,5 +1,4 @@
 import { builderStore } from "stores"
-import { derived } from "svelte/store"
 import { buildStyleString } from "utils/styleable.js"
 
 /**
@@ -11,10 +10,13 @@ import { buildStyleString } from "utils/styleable.js"
  *
  * Component definitions define their default layout preference via the
  * `grid.hAlign` and `grid.vAlign` keys in the manifest.
+ *
+ * We also apply grid-[mobile/desktop]-grow CSS classes to component wrapper
+ * DOM nodes to use later in selectors, to control the sizing of children.
  */
 
 // Enum representing the different CSS variables we use for grid metadata
-export const GridVars = {
+export const GridParams = {
   HAlign: "h-align",
   VAlign: "v-align",
   ColStart: "col-start",
@@ -35,38 +37,8 @@ const Devices = {
   Mobile: "mobile",
 }
 
-// A derived map of all CSS variables for the current device
-const previewDevice = derived(builderStore, $store => $store.previewDevice)
-export const gridCSSVars = derived(previewDevice, $device => {
-  const device = $device === Devices.Mobile ? Devices.Mobile : Devices.Desktop
-  let vars = {}
-  for (let type of Object.values(GridVars)) {
-    vars[type] = `--grid-${device}-${type}`
-  }
-  return vars
-})
-
 // Builds a CSS variable name for a certain piece of grid metadata
-export const getGridCSSVar = (device, type) => `--grid-${device}-${type}`
-
-// Generates the CSS variable for a certain grid param suffix, for the other
-// device variant than the one included in this variable
-export const getOtherDeviceGridVar = cssVar => {
-  if (cssVar.includes(Devices.Desktop)) {
-    return cssVar.replace(Devices.Desktop, Devices.Mobile)
-  } else {
-    return cssVar.replace(Devices.Mobile, Devices.Desktop)
-  }
-}
-
-// Gets the default value for a certain grid CSS variable
-export const getDefaultGridVarValue = cssVar => {
-  if (cssVar.includes("align")) {
-    return cssVar.includes("-h-") ? "stretch" : "center"
-  } else {
-    return cssVar.endsWith("-start") ? 1 : 2
-  }
-}
+export const getGridVar = (device, param) => `--grid-${device}-${param}`
 
 // Determines whether a JS event originated from immediately within a grid
 export const isGridEvent = e => {
@@ -92,32 +64,18 @@ export const getGridParentID = node => {
   return node?.parentNode?.closest(".grid")?.parentNode.dataset.id
 }
 
-// Gets the current value of a certain grid CSS variable for a component
-export const getGridVarValue = (styles, variable) => {
-  // Try the desired variable
-  let val = styles?.variables?.[variable]
-
-  // Otherwise try the other device variables
-  if (!val) {
-    val = styles?.[getOtherDeviceGridVar(variable)]
-  }
-
-  // Otherwise use the default
-  return val ? val : getDefaultGridVarValue(variable)
-}
-
 // Svelte action to apply required class names and styles to our component
 // wrappers
 export const gridLayout = (node, metadata) => {
   let selectComponent
 
+  // Applies the required listeners, CSS and classes to a component DOM node
   const applyMetadata = metadata => {
     const { id, styles, interactive, errored, definition } = metadata
-    consol.log(styles)
 
     // Callback to select the component when clicking on the wrapper
     selectComponent = e => {
-      e.preventDefault()
+      e.stopPropagation()
       builderStore.actions.selectComponent(id)
     }
 
@@ -145,13 +103,14 @@ export const gridLayout = (node, metadata) => {
     node.style = buildStyleString(vars)
 
     // Toggle classes to specify whether our children should fill
-    const desktopVar = getGridCSSVar(Devices.Desktop, GridVars.VAlign)
-    const mobileVar = getGridCSSVar(Devices.Mobile, GridVars.VAlign)
     node.classList.toggle(
       GridClasses.DesktopFill,
-      vars[desktopVar] === "stretch"
+      vars[getGridVar(Devices.Desktop, GridParams.VAlign)] === "stretch"
+    )
+    node.classList.toggle(
+      GridClasses.MobileFill,
+      vars[getGridVar(Devices.Mobile, GridParams.VAlign)] === "stretch"
     )
-    node.classList.toggle(GridClasses.MobileFill, vars[mobileVar] === "stretch")
 
     // Add a listener to select this node on click
     if (interactive) {
@@ -159,6 +118,7 @@ export const gridLayout = (node, metadata) => {
     }
   }
 
+  // Removes the previously set up listeners
   const removeListeners = () => {
     node.removeEventListener("click", selectComponent)
   }

From 8a6d4c0bf6f5cb9b36be94b76ce9249d6108e3c1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Sat, 3 Aug 2024 09:44:32 +0100
Subject: [PATCH 037/112] Update remaining components with sizes and grid
 metadata

---
 packages/client/manifest.json                 | 47 ++++++++++++++++---
 .../src/components/app/BackgroundImage.svelte | 17 ++-----
 2 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 10503f30ac..6f665a80d7 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1326,6 +1326,7 @@
     "icon": "Images",
     "hasChildren": true,
     "styles": ["size"],
+    "showEmptyState": false,
     "size": {
       "width": 400,
       "height": 300
@@ -1765,7 +1766,11 @@
     "icon": "GraphBarVertical",
     "size": {
       "width": 600,
-      "height": 400
+      "height": 420
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "center"
     },
     "settings": [
       {
@@ -1934,7 +1939,11 @@
     "icon": "GraphTrend",
     "size": {
       "width": 600,
-      "height": 400
+      "height": 420
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "center"
     },
     "settings": [
       {
@@ -2098,7 +2107,11 @@
     "icon": "GraphAreaStacked",
     "size": {
       "width": 600,
-      "height": 400
+      "height": 420
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "center"
     },
     "settings": [
       {
@@ -2274,7 +2287,11 @@
     "icon": "GraphPie",
     "size": {
       "width": 600,
-      "height": 400
+      "height": 420
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "center"
     },
     "settings": [
       {
@@ -2414,7 +2431,11 @@
     "icon": "GraphDonut",
     "size": {
       "width": 600,
-      "height": 400
+      "height": 420
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "center"
     },
     "settings": [
       {
@@ -2554,7 +2575,11 @@
     "icon": "GraphBarVerticalStacked",
     "size": {
       "width": 600,
-      "height": 400
+      "height": 420
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "center"
     },
     "settings": [
       {
@@ -2671,7 +2696,11 @@
     "icon": "Histogram",
     "size": {
       "width": 600,
-      "height": 400
+      "height": 420
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "center"
     },
     "settings": [
       {
@@ -4425,6 +4454,10 @@
       "width": 400,
       "height": 320
     },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
+    },
     "settings": [
       {
         "type": "dataProvider",
diff --git a/packages/client/src/components/app/BackgroundImage.svelte b/packages/client/src/components/app/BackgroundImage.svelte
index df6459c417..07216bf9ca 100644
--- a/packages/client/src/components/app/BackgroundImage.svelte
+++ b/packages/client/src/components/app/BackgroundImage.svelte
@@ -19,20 +19,11 @@
   }
 </script>
 
-{#if url}
-  <div class="outer" use:styleable={$component.styles}>
-    <div class="inner" {style}>
-      <slot />
-    </div>
+<div class="outer" use:styleable={$component.styles}>
+  <div class="inner" {style}>
+    <slot />
   </div>
-{:else if $builderStore.inBuilder}
-  <div
-    class="placeholder"
-    use:styleable={{ ...$component.styles, empty: true }}
-  >
-    <Placeholder />
-  </div>
-{/if}
+</div>
 
 <style>
   .outer {

From 4bdb408a39cefde67acf926355e440fb885b9353 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Sat, 3 Aug 2024 11:15:10 +0100
Subject: [PATCH 038/112] Add reactivity to settings bar grid style buttons

---
 .../client/src/components/Component.svelte    |  1 +
 .../preview/GridStylesButton.svelte           | 17 ++----------
 .../src/components/preview/SettingsBar.svelte | 27 +++++++++++++++++++
 packages/client/src/utils/grid.js             |  5 +++-
 4 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 6e184bde7e..662dc9cd6d 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -208,6 +208,7 @@
     draggable,
     definition,
     errored: errorState,
+    draggable,
   }
 
   // Update component context
diff --git a/packages/client/src/components/preview/GridStylesButton.svelte b/packages/client/src/components/preview/GridStylesButton.svelte
index 0dff88f23a..a87652d338 100644
--- a/packages/client/src/components/preview/GridStylesButton.svelte
+++ b/packages/client/src/components/preview/GridStylesButton.svelte
@@ -7,22 +7,9 @@
   export let icon
   export let title
   export let componentId
+  export let computedStyles
 
-  // Needs to update in real time
-
-  let currentValue
-
-  $: fetchCurrentValue(componentId, style)
-  $: active = currentValue === value
-
-  const fetchCurrentValue = (id, style) => {
-    const node = document.getElementsByClassName(`${id}-dom`)[0]?.parentNode
-    if (!node) {
-      return null
-    }
-    const styles = getComputedStyle(node)
-    currentValue = styles.getPropertyValue(style)
-  }
+  $: active = computedStyles?.getPropertyValue(style) === value
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index df714681e9..03dd28381c 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -17,10 +17,13 @@
   let interval
   let self
   let measured = false
+  let observer
+  let computedStyles
 
   // TODO: respect dependsOn keys
 
   $: componentId = $builderStore.selectedComponentId
+  $: measured, observeComputedStyles(componentId)
   $: component = $componentStore.selectedComponent
   $: definition = $componentStore.selectedComponentDefinition
   $: parent = findComponentParent($builderStore.screen.props, componentId)
@@ -131,6 +134,21 @@
   }
   const debouncedUpdate = Utils.domDebounce(updatePosition)
 
+  const observeComputedStyles = id => {
+    observer?.disconnect()
+    const node = document.getElementsByClassName(`${id}-dom`)[0]?.parentNode
+    if (node) {
+      observer = new MutationObserver(() => {
+        computedStyles = getComputedStyle(node)
+      })
+      observer.observe(node, {
+        attributes: true,
+        attributeFilter: ["style"],
+      })
+      computedStyles = getComputedStyle(node)
+    }
+  }
+
   onMount(() => {
     debouncedUpdate()
     interval = setInterval(debouncedUpdate, 100)
@@ -140,6 +158,7 @@
   onDestroy(() => {
     clearInterval(interval)
     document.removeEventListener("scroll", debouncedUpdate, true)
+    observer?.disconnect()
   })
 </script>
 
@@ -157,6 +176,7 @@
         icon="AlignLeft"
         title="Align left"
         {componentId}
+        {computedStyles}
       />
       <GridStylesButton
         style={gridHAlignVar}
@@ -164,6 +184,7 @@
         icon="AlignCenter"
         title="Align center"
         {componentId}
+        {computedStyles}
       />
       <GridStylesButton
         style={gridHAlignVar}
@@ -171,6 +192,7 @@
         icon="AlignRight"
         title="Align right"
         {componentId}
+        {computedStyles}
       />
       <GridStylesButton
         style={gridHAlignVar}
@@ -178,6 +200,7 @@
         icon="MoveLeftRight"
         title="Stretch horizontally"
         {componentId}
+        {computedStyles}
       />
       <div class="divider" />
       <GridStylesButton
@@ -186,6 +209,7 @@
         icon="AlignTop"
         title="Align top"
         {componentId}
+        {computedStyles}
       />
       <GridStylesButton
         style={gridVAlignVar}
@@ -193,6 +217,7 @@
         icon="AlignMiddle"
         title="Align middle"
         {componentId}
+        {computedStyles}
       />
       <GridStylesButton
         style={gridVAlignVar}
@@ -200,6 +225,7 @@
         icon="AlignBottom"
         title="Align bottom"
         {componentId}
+        {computedStyles}
       />
       <GridStylesButton
         style={gridVAlignVar}
@@ -207,6 +233,7 @@
         icon="MoveUpDown"
         title="Stretch vertically"
         {componentId}
+        {computedStyles}
       />
       <div class="divider" />
     {/if}
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index 88e8477d2d..4628300c9f 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -71,7 +71,7 @@ export const gridLayout = (node, metadata) => {
 
   // Applies the required listeners, CSS and classes to a component DOM node
   const applyMetadata = metadata => {
-    const { id, styles, interactive, errored, definition } = metadata
+    const { id, styles, interactive, errored, definition, draggable } = metadata
 
     // Callback to select the component when clicking on the wrapper
     selectComponent = e => {
@@ -116,6 +116,9 @@ export const gridLayout = (node, metadata) => {
     if (interactive) {
       node.addEventListener("click", selectComponent, false)
     }
+
+    // Add draggable attribute
+    node.setAttribute("draggable", !!draggable)
   }
 
   // Removes the previously set up listeners

From 1ff0c99764215c1ee4b3e858c669cacc74f3a8d0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Sat, 3 Aug 2024 11:21:56 +0100
Subject: [PATCH 039/112] Fix component preview border in tablet and mobile
 when on small screens

---
 .../design/[screenId]/_components/AppPreview.svelte       | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 0e2eb2ceac..aed959b9ba 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -321,13 +321,13 @@
   }
   .tablet .loading,
   .tablet .underlay {
-    width: 1024px;
-    height: 768px;
+    max-width: 1024px;
+    max-height: 768px;
   }
   .mobile .loading,
   .mobile .underlay {
-    width: 390px;
-    height: 844px;
+    max-width: 390px;
+    max-height: 844px;
   }
 
   .underlay {

From e3f4e5525e3d75a4518387b118f0717a4425414f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 5 Aug 2024 13:34:38 +0100
Subject: [PATCH 040/112] Fix background color on grid underlay and ensure
 screens with grids default to 24x24

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

diff --git a/packages/client/src/components/Screen.svelte b/packages/client/src/components/Screen.svelte
index ac0af9f3b2..3c8fcf97e3 100644
--- a/packages/client/src/components/Screen.svelte
+++ b/packages/client/src/components/Screen.svelte
@@ -13,8 +13,9 @@
   const onLoadActions = memo()
 
   // Get the screen definition for the current route
-  $: screenDefinition = $screenStore.activeScreen?.props
-  $: onLoadActions.set($screenStore.activeScreen?.onLoad)
+  $: screen = $screenStore.activeScreen
+  $: screenDefinition = { cols: 24, rows: 24, ...screen?.props }
+  $: onLoadActions.set(screen?.onLoad)
   $: runOnLoadActions($onLoadActions, params)
 
   // Enrich and execute any on load actions.
diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index b16fc88dbf..e625cff834 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -81,15 +81,16 @@
     left: 0;
     width: 100%;
     height: 100%;
-    grid-gap: 2px;
-    background-color: var(--spectrum-global-color-gray-200);
-    border: 2px solid var(--spectrum-global-color-gray-200);
+    /*    grid-gap: 2px;*/
+    /*    background-color: var(--spectrum-global-color-gray-200);*/
+    border: 1px solid var(--spectrum-global-color-gray-200);
   }
   .underlay {
     z-index: -1;
   }
   .placeholder {
-    background-color: var(--spectrum-global-color-gray-100);
+    /*    background-color: var(--spectrum-global-color-gray-100);*/
+    border: 1px solid var(--spectrum-global-color-gray-200);
   }
 
   /* Ensure all top level children have grid styles applied */

From c6cb267b30567f13933478c88fd790394aceb141 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 5 Aug 2024 16:42:34 +0100
Subject: [PATCH 041/112] Fix settings bar values not working with default
 values

---
 packages/client/src/components/preview/SettingsBar.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index 03dd28381c..de234d20ea 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -254,6 +254,7 @@
             prop={setting.key}
             options={setting.options}
             label={setting.label}
+            {component}
           />
         {/if}
       {:else if setting.type === "boolean"}
@@ -262,9 +263,10 @@
           icon={setting.barIcon}
           title={setting.barTitle || setting.label}
           bool
+          {component}
         />
       {:else if setting.type === "color"}
-        <SettingsColorPicker prop={setting.key} />
+        <SettingsColorPicker prop={setting.key} {component} />
       {/if}
       {#if setting.barSeparator !== false && (settings.length != idx + 1 || !isRoot)}
         <div class="divider" />

From 22cda514b426081821af1165fed6d7c9dcfcd616 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 5 Aug 2024 16:53:10 +0100
Subject: [PATCH 042/112] Update component settings bar to respect dependsOn
 metadata

---
 .../Component/ComponentSettingsSection.svelte | 46 ++-----------------
 .../src/components/preview/SettingsBar.svelte | 15 ++++--
 packages/frontend-core/src/utils/index.js     |  1 +
 packages/frontend-core/src/utils/settings.js  | 43 +++++++++++++++++
 4 files changed, 57 insertions(+), 48 deletions(-)
 create mode 100644 packages/frontend-core/src/utils/settings.js

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
index 54241ea1cc..d5a696c6bf 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { helpers } from "@budibase/shared-core"
   import { DetailSummary, notifications } from "@budibase/bbui"
   import { componentStore, builderStore } from "stores/builder"
   import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
@@ -8,6 +7,7 @@
   import { getComponentForSetting } from "components/design/settings/componentSettings"
   import InfoDisplay from "./InfoDisplay.svelte"
   import analytics, { Events } from "analytics"
+  import { shouldDisplaySetting } from "@budibase/frontend-core"
 
   export let componentDefinition
   export let componentInstance
@@ -48,7 +48,7 @@
 
     // Filter out settings which shouldn't be rendered
     sections.forEach(section => {
-      section.visible = shouldDisplay(instance, section)
+      section.visible = shouldDisplaySetting(instance, section)
       if (!section.visible) {
         return
       }
@@ -88,46 +88,6 @@
     }
   }
 
-  const shouldDisplay = (instance, setting) => {
-    let dependsOn = setting.dependsOn
-    if (dependsOn && !Array.isArray(dependsOn)) {
-      dependsOn = [dependsOn]
-    }
-    if (!dependsOn?.length) {
-      return true
-    }
-
-    // Ensure all conditions are met
-    return dependsOn.every(condition => {
-      let dependantSetting = condition
-      let dependantValues = null
-      let invert = !!condition.invert
-      if (typeof condition === "object") {
-        dependantSetting = condition.setting
-        dependantValues = condition.value
-      }
-      if (!dependantSetting) {
-        return false
-      }
-
-      // Ensure values is an array
-      if (!Array.isArray(dependantValues)) {
-        dependantValues = [dependantValues]
-      }
-
-      // If inverting, we want to ensure that we don't have any matches.
-      // If not inverting, we want to ensure that we do have any matches.
-      const currentVal = helpers.deepGet(instance, dependantSetting)
-      const anyMatches = dependantValues.some(dependantVal => {
-        if (dependantVal == null) {
-          return currentVal != null && currentVal !== false && currentVal !== ""
-        }
-        return dependantVal === currentVal
-      })
-      return anyMatches !== invert
-    })
-  }
-
   const canRenderControl = (instance, setting, isScreen, includeHidden) => {
     // Prevent rendering on click setting for screens
     if (setting?.type === "event" && isScreen) {
@@ -142,7 +102,7 @@
     if (setting.hidden && !includeHidden) {
       return false
     }
-    return shouldDisplay(instance, setting)
+    return shouldDisplaySetting(instance, setting)
   }
 </script>
 
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index de234d20ea..52f5c04538 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -5,7 +5,7 @@
   import SettingsColorPicker from "./SettingsColorPicker.svelte"
   import SettingsPicker from "./SettingsPicker.svelte"
   import { builderStore, componentStore, dndIsDragging } from "stores"
-  import { Utils } from "@budibase/frontend-core"
+  import { Utils, shouldDisplaySetting } from "@budibase/frontend-core"
   import { findComponentParent } from "utils/components"
   import { getGridVar, GridParams } from "utils/grid"
 
@@ -39,7 +39,7 @@
       measured = false
     }
   }
-  $: settings = getBarSettings(definition)
+  $: settings = getBarSettings(component, definition)
   $: isRoot = componentId === $builderStore.screen?.props?._id
   $: insideGrid =
     parent?._component.endsWith("/container") && parent.layout === "grid"
@@ -51,16 +51,21 @@
   $: gridHAlignVar = getGridVar(device, GridParams.HAlign)
   $: gridVAlignVar = getGridVar(device, GridParams.VAlign)
 
-  const getBarSettings = definition => {
+  const getBarSettings = (component, definition) => {
     let allSettings = []
     definition?.settings?.forEach(setting => {
-      if (setting.section) {
+      if (setting.section && shouldDisplaySetting(component, setting)) {
         allSettings = allSettings.concat(setting.settings || [])
       } else {
         allSettings.push(setting)
       }
     })
-    return allSettings.filter(setting => setting.showInBar && !setting.hidden)
+    return allSettings.filter(
+      setting =>
+        setting.showInBar &&
+        !setting.hidden &&
+        shouldDisplaySetting(component, setting)
+    )
   }
 
   const updatePosition = () => {
diff --git a/packages/frontend-core/src/utils/index.js b/packages/frontend-core/src/utils/index.js
index 9eb7206012..5f21e7db99 100644
--- a/packages/frontend-core/src/utils/index.js
+++ b/packages/frontend-core/src/utils/index.js
@@ -9,3 +9,4 @@ export { memo, derivedMemo } from "./memo"
 export { createWebsocket } from "./websocket"
 export * from "./download"
 export * from "./theme"
+export * from "./settings"
diff --git a/packages/frontend-core/src/utils/settings.js b/packages/frontend-core/src/utils/settings.js
new file mode 100644
index 0000000000..0e312c70e6
--- /dev/null
+++ b/packages/frontend-core/src/utils/settings.js
@@ -0,0 +1,43 @@
+import { helpers } from "@budibase/shared-core"
+
+// Util to check if a setting can be rendered for a certain instance, based on
+// the "dependsOn" metadata in the manifest
+export const shouldDisplaySetting = (instance, setting) => {
+  let dependsOn = setting.dependsOn
+  if (dependsOn && !Array.isArray(dependsOn)) {
+    dependsOn = [dependsOn]
+  }
+  if (!dependsOn?.length) {
+    return true
+  }
+
+  // Ensure all conditions are met
+  return dependsOn.every(condition => {
+    let dependantSetting = condition
+    let dependantValues = null
+    let invert = !!condition.invert
+    if (typeof condition === "object") {
+      dependantSetting = condition.setting
+      dependantValues = condition.value
+    }
+    if (!dependantSetting) {
+      return false
+    }
+
+    // Ensure values is an array
+    if (!Array.isArray(dependantValues)) {
+      dependantValues = [dependantValues]
+    }
+
+    // If inverting, we want to ensure that we don't have any matches.
+    // If not inverting, we want to ensure that we do have any matches.
+    const currentVal = helpers.deepGet(instance, dependantSetting)
+    const anyMatches = dependantValues.some(dependantVal => {
+      if (dependantVal == null) {
+        return currentVal != null && currentVal !== false && currentVal !== ""
+      }
+      return dependantVal === currentVal
+    })
+    return anyMatches !== invert
+  })
+}

From e91607acb12f731544f5725047ded9248c9f259b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 5 Aug 2024 18:50:19 +0100
Subject: [PATCH 043/112] Update background colour and styles of grid lines to
 work with user specified background colours

---
 .../components/app/container/GridContainer.svelte | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index e625cff834..620f254c0a 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -33,6 +33,7 @@
 <div
   class="grid"
   class:mobile
+  class:builder={$builderStore.inBuilder}
   bind:clientWidth={width}
   bind:clientHeight={height}
   use:styleable={{
@@ -69,6 +70,9 @@
     height: 400px;
     gap: 0;
   }
+  .grid.builder {
+    background: var(--spectrum-alias-background-color-secondary);
+  }
   .grid,
   .underlay {
     display: grid;
@@ -81,16 +85,15 @@
     left: 0;
     width: 100%;
     height: 100%;
-    /*    grid-gap: 2px;*/
-    /*    background-color: var(--spectrum-global-color-gray-200);*/
-    border: 1px solid var(--spectrum-global-color-gray-200);
+    border: 1px solid var(--spectrum-global-color-gray-900);
+    opacity: 0.07;
+    pointer-events: none;
   }
   .underlay {
-    z-index: -1;
+    z-index: 0;
   }
   .placeholder {
-    /*    background-color: var(--spectrum-global-color-gray-100);*/
-    border: 1px solid var(--spectrum-global-color-gray-200);
+    border: 1px solid var(--spectrum-global-color-gray-900);
   }
 
   /* Ensure all top level children have grid styles applied */

From 5101cca197643fa04b7da5bef43546dbbd035eda Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 5 Aug 2024 19:31:35 +0100
Subject: [PATCH 044/112] Update default grid size to 200x200

---
 packages/client/src/utils/grid.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index 4628300c9f..1d80e49696 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -83,8 +83,8 @@ export const gridLayout = (node, metadata) => {
     const hAlign = errored ? "stretch" : definition?.grid?.hAlign || "stretch"
     const vAlign = errored ? "stretch" : definition?.grid?.vAlign || "center"
     const vars = {
-      "--default-width": errored ? 500 : definition.size?.width || 100,
-      "--default-height": errored ? 60 : definition.size?.height || 100,
+      "--default-width": errored ? 500 : definition.size?.width || 200,
+      "--default-height": errored ? 60 : definition.size?.height || 200,
       "--grid-desktop-h-align": hAlign,
       "--grid-mobile-h-align": hAlign,
       "--grid-desktop-v-align": vAlign,

From 5127a90e5d29b188dabf3235fcff7153b112b78f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 5 Aug 2024 19:42:24 +0100
Subject: [PATCH 045/112] Remove old code

---
 .../components/app/container/GridContainer.svelte   | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 620f254c0a..cfe6f7d7bf 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -13,21 +13,10 @@
 
   $: cols = cols || 12
   $: rows = rows || 12
-  $: coords = generateCoords(rows, cols)
   $: mobile = $context.device.mobile
   $: empty = $component.empty
   $: colSize = width / cols
   $: rowSize = height / rows
-
-  const generateCoords = (rows, cols) => {
-    let grid = []
-    for (let row = 0; row < rows; row++) {
-      for (let col = 0; col < cols; col++) {
-        grid.push({ row, col })
-      }
-    }
-    return grid
-  }
 </script>
 
 <div
@@ -52,7 +41,7 @@
 >
   {#if $builderStore.inBuilder}
     <div class="underlay">
-      {#each coords as _}
+      {#each { length: cols * rows } as _}
         <div class="placeholder" />
       {/each}
     </div>

From 5071f3915367c630f2acd84f0773e52e56afcacd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 5 Aug 2024 19:45:10 +0100
Subject: [PATCH 046/112] Lint

---
 packages/client/src/components/Component.svelte           | 3 ---
 packages/client/src/components/app/BackgroundImage.svelte | 8 +-------
 .../client/src/components/preview/GridDNDHandler.svelte   | 2 +-
 3 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 662dc9cd6d..0a216bd675 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -208,7 +208,6 @@
     draggable,
     definition,
     errored: errorState,
-    draggable,
   }
 
   // Update component context
@@ -647,8 +646,6 @@
 {#if constructor && initialSettings && (visible || inSelectedPath) && !builderHidden}
   <!-- The ID is used as a class because getElementsByClassName is O(1) -->
   <!-- and the performance matters for the selection indicators -->
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     class={`component ${id}`}
     class:draggable
diff --git a/packages/client/src/components/app/BackgroundImage.svelte b/packages/client/src/components/app/BackgroundImage.svelte
index 07216bf9ca..5e522252e6 100644
--- a/packages/client/src/components/app/BackgroundImage.svelte
+++ b/packages/client/src/components/app/BackgroundImage.svelte
@@ -1,8 +1,7 @@
 <script>
   import { getContext } from "svelte"
-  import Placeholder from "./Placeholder.svelte"
 
-  const { styleable, builderStore } = getContext("sdk")
+  const { styleable } = getContext("sdk")
   const component = getContext("component")
 
   export let url
@@ -40,9 +39,4 @@
     background-size: cover;
     background-position: center center;
   }
-
-  .placeholder {
-    display: grid;
-    place-items: center;
-  }
 </style>
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 114e131eb3..f723d9ad29 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -41,7 +41,7 @@
   // Util to get the inner DOM node by a component ID
   const getDOMNode = id => {
     const component = document.getElementsByClassName(id)[0]
-    return [...component?.children][0]
+    return Array.from(component?.children || [])[0]
   }
 
   const getComponentStyles = gridStyles => {

From df77aa3f83515f3c2d1d4728d57235a1907a3d4a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 6 Aug 2024 11:07:20 +0100
Subject: [PATCH 047/112] Update when grid lines are shown, show sibling
 borders, add component padding, remove row and column settings

---
 .../_components/Screen/GeneralPanel.svelte    | 26 ------
 packages/client/manifest.json                 | 26 ------
 .../client/src/components/app/Layout.svelte   |  4 +-
 .../app/container/GridContainer.svelte        | 88 ++++++++++++++-----
 .../components/preview/GridDNDHandler.svelte  | 59 ++++++++-----
 packages/client/src/utils/grid.js             |  4 +-
 6 files changed, 107 insertions(+), 100 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
index 2a5211a253..020dc11ae8 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
@@ -96,32 +96,6 @@
       },
     ]
 
-    // Add grid layout settings if required
-    if (screen.props.layout === "grid") {
-      settings = settings.concat([
-        {
-          key: "props.cols",
-          label: "Columns",
-          control: Stepper,
-          defaultValue: 24,
-          props: {
-            min: 2,
-            max: 50,
-          },
-        },
-        {
-          key: "props.rows",
-          label: "Rows",
-          control: Stepper,
-          defaultValue: 24,
-          props: {
-            min: 2,
-            max: 50,
-          },
-        },
-      ])
-    }
-
     return settings
   }
 
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 6f665a80d7..8ca9698bcf 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -145,32 +145,6 @@
         ],
         "defaultValue": "flex"
       },
-      {
-        "type": "number",
-        "label": "Columns",
-        "key": "cols",
-        "placeholder": 12,
-        "defaultValue": 12,
-        "min": 2,
-        "max": 50,
-        "dependsOn": {
-          "setting": "layout",
-          "value": "grid"
-        }
-      },
-      {
-        "type": "number",
-        "label": "Rows",
-        "key": "rows",
-        "placeholder": 12,
-        "defaultValue": 12,
-        "min": 2,
-        "max": 50,
-        "dependsOn": {
-          "setting": "layout",
-          "value": "grid"
-        }
-      },
       {
         "type": "select",
         "label": "Direction",
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 9cfa74cbb0..34de8122c8 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -480,10 +480,10 @@
     position: relative;
     padding: 32px;
   }
-  .main:has(.screenslot-dom > .component > .grid) {
+  /*  .main:has(.screenslot-dom > .component > .grid) {
     padding-top: 0;
     padding-bottom: 0;
-  }
+  }*/
   .layout--none .main {
     padding: 0;
   }
diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index cfe6f7d7bf..b46e763277 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -2,19 +2,18 @@
   import { getContext } from "svelte"
 
   const component = getContext("component")
-  const { styleable, builderStore } = getContext("sdk")
+  const { styleable } = getContext("sdk")
   const context = getContext("context")
 
-  export let cols = 12
-  export let rows = 12
+  const cols = 12
+  const rowHeight = 24
 
   let width
   let height
 
-  $: cols = cols || 12
-  $: rows = rows || 12
   $: mobile = $context.device.mobile
   $: empty = $component.empty
+  $: rows = Math.max(1, Math.floor(height / rowHeight))
   $: colSize = width / cols
   $: rowSize = height / rows
 </script>
@@ -22,7 +21,6 @@
 <div
   class="grid"
   class:mobile
-  class:builder={$builderStore.inBuilder}
   bind:clientWidth={width}
   bind:clientHeight={height}
   use:styleable={{
@@ -39,13 +37,11 @@
   data-rows={rows}
   data-cols={cols}
 >
-  {#if $builderStore.inBuilder}
-    <div class="underlay">
-      {#each { length: cols * rows } as _}
-        <div class="placeholder" />
-      {/each}
-    </div>
-  {/if}
+  <div class="underlay">
+    {#each { length: cols * rows } as _}
+      <div class="placeholder" />
+    {/each}
+  </div>
 
   <!-- Only render the slot if not empty, as we don't want the placeholder -->
   {#if !empty}
@@ -57,32 +53,53 @@
   .grid {
     position: relative;
     height: 400px;
-    gap: 0;
-  }
-  .grid.builder {
-    background: var(--spectrum-alias-background-color-secondary);
+    --spacing: 10;
   }
+
   .grid,
   .underlay {
     display: grid;
     grid-template-rows: repeat(var(--rows), 1fr);
     grid-template-columns: repeat(var(--cols), 1fr);
+    gap: 0;
   }
   .underlay {
+    display: none;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    border: 1px solid var(--spectrum-global-color-gray-900);
-    opacity: 0.07;
+    border-top: 1px solid var(--spectrum-global-color-gray-900);
+    border-left: 1px solid var(--spectrum-global-color-gray-900);
+    opacity: 0.1;
     pointer-events: none;
   }
   .underlay {
     z-index: 0;
   }
   .placeholder {
-    border: 1px solid var(--spectrum-global-color-gray-900);
+    border-bottom: 1px solid var(--spectrum-global-color-gray-900);
+    border-right: 1px solid var(--spectrum-global-color-gray-900);
+  }
+
+  /* Highlight grid lines when resizing children */
+  :global(.grid.highlight > .underlay) {
+    display: grid;
+  }
+
+  /* Highlight sibling borders when resizing childern */
+  :global(.grid.highlight > .component:not(.dragging):after) {
+    content: "";
+    display: block;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    border: 1px solid var(--spectrum-global-color-static-blue-200);
+    pointer-events: none;
+    z-index: 1;
+    top: 0;
+    left: 0;
   }
 
   /* Ensure all top level children have grid styles applied */
@@ -90,6 +107,9 @@
     display: flex;
     overflow: auto;
     pointer-events: all;
+    position: relative;
+    padding: 5px;
+    margin: 5px;
 
     /* On desktop, use desktop metadata and fall back to mobile */
     /* Position vars */
@@ -98,7 +118,12 @@
       --grid-desktop-col-end,
       var(
         --grid-mobile-col-end,
-        round(up, calc(var(--default-width) / var(--col-size) + 1))
+        round(
+          up,
+          calc(
+            (var(--spacing) * 2 + var(--default-width)) / var(--col-size) + 1
+          )
+        )
       )
     );
     --row-start: var(--grid-desktop-row-start, var(--grid-mobile-row-start, 1));
@@ -106,7 +131,12 @@
       --grid-desktop-row-end,
       var(
         --grid-mobile-row-end,
-        round(up, calc(var(--default-height) / var(--row-size) + 1))
+        round(
+          up,
+          calc(
+            (var(--spacing) * 2 + var(--default-height)) / var(--row-size) + 1
+          )
+        )
       )
     );
 
@@ -137,7 +167,12 @@
       --grid-mobile-col-end,
       var(
         --grid-desktop-col-end,
-        round(up, calc(var(--default-width) / var(--col-size) + 1))
+        round(
+          up,
+          calc(
+            (var(--spacing) * 2 + var(--default-width)) / var(--col-size) + 1
+          )
+        )
       )
     );
     --row-start: var(--grid-mobile-row-start, var(--grid-desktop-row-start, 1));
@@ -145,7 +180,12 @@
       --grid-mobile-row-end,
       var(
         --grid-desktop-row-end,
-        round(up, calc(var(--default-height) / var(--row-size) + 1))
+        round(
+          up,
+          calc(
+            (var(--spacing) * 2 + var(--default-height)) / var(--row-size) + 1
+          )
+        )
       )
     );
 
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index f723d9ad29..fe004982d3 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -4,7 +4,7 @@
   import { Utils, memo } from "@budibase/frontend-core"
   import {
     isGridEvent,
-    getGridParentID,
+    getGridParent,
     GridParams,
     getGridVar,
   } from "utils/grid"
@@ -62,6 +62,9 @@
     const { startX, startY, rowStart, rowEnd, colStart, colEnd } = grid
 
     const domGrid = getDOMNode(gridId)
+    if (!domGrid) {
+      return
+    }
     const cols = parseInt(domGrid.dataset.cols)
     const rows = parseInt(domGrid.dataset.rows)
     const { width, height } = domGrid.getBoundingClientRect()
@@ -107,7 +110,7 @@
       }
       gridStyles.set(newStyles)
     }
-  }, 100)
+  }, 10)
 
   const handleEvent = e => {
     e.preventDefault()
@@ -140,16 +143,20 @@
 
     // Find grid parent
     const domComponent = getDOMNode(id)
-    const gridId = getGridParentID(domComponent)
-    if (!gridId) {
+    const domGrid = getGridParent(domComponent)
+    if (!domGrid) {
       return
     }
 
+    // Apply active class to grid
+    domComponent.parentNode.classList.add("dragging")
+    domGrid.classList.add("highlight")
+
     // Update state
     dragInfo = {
       domTarget: e.target,
       id,
-      gridId,
+      gridId: domGrid.parentNode.dataset.id,
       mode,
       side,
     }
@@ -168,22 +175,23 @@
     const { id, gridId } = dragInfo
     const domComponent = getDOMNode(id)
     const domGrid = getDOMNode(gridId)
+    if (!domComponent || !domGrid) {
+      return
+    }
     const gridCols = parseInt(domGrid.dataset.cols)
     const gridRows = parseInt(domGrid.dataset.rows)
     const styles = getComputedStyle(domComponent.parentNode)
-    if (domGrid) {
-      dragInfo.grid = {
-        startX: e.clientX,
-        startY: e.clientY,
+    dragInfo.grid = {
+      startX: e.clientX,
+      startY: e.clientY,
 
-        // Ensure things are within limits
-        rowStart: minMax(styles["grid-row-start"], 1, gridRows),
-        rowEnd: minMax(styles["grid-row-end"], 2, gridRows + 1),
-        colStart: minMax(styles["grid-column-start"], 1, gridCols),
-        colEnd: minMax(styles["grid-column-end"], 2, gridCols + 1),
-      }
-      handleEvent(e)
+      // Ensure things are within limits
+      rowStart: minMax(styles["grid-row-start"], 1, gridRows),
+      rowEnd: minMax(styles["grid-row-end"], 2, gridRows + 1),
+      colStart: minMax(styles["grid-column-start"], 1, gridCols),
+      colEnd: minMax(styles["grid-column-end"], 2, gridCols + 1),
     }
+    handleEvent(e)
   }
 
   const onDragOver = e => {
@@ -195,15 +203,26 @@
 
   // Callback when drag stops (whether dropped or not)
   const stopDragging = async () => {
+    if (!dragInfo) {
+      return
+    }
+    const { id, gridId, domTarget } = dragInfo
+
     // Save changes
     if ($gridStyles) {
-      await builderStore.actions.updateStyles($gridStyles, dragInfo.id)
+      await builderStore.actions.updateStyles($gridStyles, id)
     }
 
-    // Reset listener
-    if (dragInfo?.domTarget) {
-      dragInfo.domTarget.removeEventListener("dragend", stopDragging)
+    // Reset DOM
+    const domComponent = getDOMNode(id)
+    if (domComponent) {
+      domComponent.parentNode.classList.remove("dragging")
     }
+    const domGrid = getDOMNode(gridId)
+    if (domGrid) {
+      domGrid.classList.remove("highlight")
+    }
+    domTarget.removeEventListener("dragend", stopDragging)
 
     // Reset state
     dragInfo = null
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index 1d80e49696..54c5e2c24f 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -60,8 +60,8 @@ export const isGridChild = node => {
 }
 
 // Gets the component ID of the closest parent grid
-export const getGridParentID = node => {
-  return node?.parentNode?.closest(".grid")?.parentNode.dataset.id
+export const getGridParent = node => {
+  return node?.parentNode?.closest(".grid")
 }
 
 // Svelte action to apply required class names and styles to our component

From d3b7a06871c5ac959ba24437aff3a131ffa537af Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 6 Aug 2024 11:17:01 +0100
Subject: [PATCH 048/112] Ensure nav accounts for grid layout padding

---
 packages/client/src/components/app/Layout.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 34de8122c8..4a49dabbe9 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -414,6 +414,9 @@
     color: var(--navTextColor);
     opacity: 1;
   }
+  .layout:has(.screenslot-dom > .component > .grid) .nav {
+    padding: 24px 42px 20px 42px;
+  }
 
   .nav :global(h1) {
     color: var(--navTextColor);
@@ -480,10 +483,7 @@
     position: relative;
     padding: 32px;
   }
-  /*  .main:has(.screenslot-dom > .component > .grid) {
-    padding-top: 0;
-    padding-bottom: 0;
-  }*/
+
   .layout--none .main {
     padding: 0;
   }

From cacc2ab087e73e59922e33b5abacd1818ebe6f18 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 6 Aug 2024 11:28:58 +0100
Subject: [PATCH 049/112] Fix issues with nesting grids inside grids

---
 .../components/app/container/GridContainer.svelte  | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index b46e763277..89e39394ce 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -54,6 +54,20 @@
     position: relative;
     height: 400px;
     --spacing: 10;
+
+    /*
+      Prevent cross-grid variable inheritance. The other variables for alignment
+      are always set on each component, so we don't need to worry about
+      inheritance.
+    */
+    --grid-desktop-col-start: initial;
+    --grid-desktop-col-end: initial;
+    --grid-desktop-row-start: initial;
+    --grid-desktop-row-end: initial;
+    --grid-mobile-col-start: initial;
+    --grid-mobile-col-end: initial;
+    --grid-mobile-row-start: initial;
+    --grid-mobile-row-end: initial;
   }
 
   .grid,

From 73079e44175f45f15a8f3b1accb3cec934d1851b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 6 Aug 2024 11:43:22 +0100
Subject: [PATCH 050/112] Fix some layout edge cases

---
 packages/client/src/components/app/Layout.svelte | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 4a49dabbe9..72121640a6 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -406,6 +406,9 @@
     max-width: 100%;
     gap: var(--spacing-xl);
   }
+  .nav.size--max {
+    padding: 10px;
+  }
   .nav :global(.spectrum-Icon) {
     color: var(--navTextColor);
     opacity: 0.75;
@@ -414,10 +417,6 @@
     color: var(--navTextColor);
     opacity: 1;
   }
-  .layout:has(.screenslot-dom > .component > .grid) .nav {
-    padding: 24px 42px 20px 42px;
-  }
-
   .nav :global(h1) {
     color: var(--navTextColor);
   }
@@ -483,6 +482,9 @@
     position: relative;
     padding: 32px;
   }
+  .main:not(.size--max):has(.screenslot-dom > .component > .grid) {
+    padding: 22px;
+  }
 
   .layout--none .main {
     padding: 0;
@@ -614,6 +616,10 @@
   .mobile:not(.layout--none) .main {
     padding: 16px;
   }
+  .mobile:not(.layout--none)
+    .main:not(.size--max):has(.screenslot-dom > .component > .grid) {
+    padding: 6px;
+  }
   .mobile .main.size--max {
     padding: 0;
   }

From 4c7f65a811e9bf302d2128d166e047e901e6f07f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 6 Aug 2024 11:48:00 +0100
Subject: [PATCH 051/112] Add more styles to forms

---
 packages/client/manifest.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 8ca9698bcf..f232318c53 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2825,7 +2825,7 @@
       "UpdateFieldValue",
       "ScrollTo"
     ],
-    "styles": ["size"],
+    "styles": ["padding", "size", "background", "border", "shadow"],
     "size": {
       "width": 400,
       "height": 400
@@ -6804,7 +6804,7 @@
       "hAlign": "stretch",
       "vAlign": "start"
     },
-    "styles": ["size"],
+    "styles": ["padding", "size", "background", "border", "shadow"],
     "settings": [
       {
         "type": "table",
@@ -6988,7 +6988,7 @@
   "formblock": {
     "name": "Form Block",
     "icon": "Form",
-    "styles": ["size"],
+    "styles": ["padding", "size", "background", "border", "shadow"],
     "block": true,
     "info": "Form blocks are only compatible with internal or SQL tables",
     "size": {

From 8e04e85df2cdf07cb9389c6cc9145acbdd95be04 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 6 Aug 2024 11:48:47 +0100
Subject: [PATCH 052/112] Lint

---
 .../[componentId]/_components/Screen/GeneralPanel.svelte         | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
index 020dc11ae8..62fe593602 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
@@ -6,7 +6,6 @@
     Checkbox,
     Banner,
     Select,
-    Stepper,
     notifications,
   } from "@budibase/bbui"
   import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"

From 5eebbd56f6110ba0f2090ba0bfc918731504f1c2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 8 Aug 2024 16:15:05 +0100
Subject: [PATCH 053/112] Reduce spacing between components in grids to 16px
 from 20px

---
 .../src/components/app/container/GridContainer.svelte       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 89e39394ce..cb2c285b84 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -53,7 +53,7 @@
   .grid {
     position: relative;
     height: 400px;
-    --spacing: 10;
+    --spacing: 8;
 
     /*
       Prevent cross-grid variable inheritance. The other variables for alignment
@@ -122,8 +122,8 @@
     overflow: auto;
     pointer-events: all;
     position: relative;
-    padding: 5px;
-    margin: 5px;
+    padding: 4px;
+    margin: 4px;
 
     /* On desktop, use desktop metadata and fall back to mobile */
     /* Position vars */

From 618b65e3faf6e6f89edc2e568da9438233b38cf9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 8 Aug 2024 16:23:55 +0100
Subject: [PATCH 054/112] Use outline rather than pseudo elements for
 highlighting grid children

---
 .../components/app/container/GridContainer.svelte   | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index cb2c285b84..f3682179c4 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -103,17 +103,8 @@
   }
 
   /* Highlight sibling borders when resizing childern */
-  :global(.grid.highlight > .component:not(.dragging):after) {
-    content: "";
-    display: block;
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    border: 1px solid var(--spectrum-global-color-static-blue-200);
-    pointer-events: none;
-    z-index: 1;
-    top: 0;
-    left: 0;
+  :global(.grid.highlight > .component:not(.dragging)) {
+    outline: 1px solid var(--spectrum-global-color-static-blue-200);
   }
 
   /* Ensure all top level children have grid styles applied */

From cdc2092264aed0672dc92136fae570fce4a126b6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 8 Aug 2024 16:30:31 +0100
Subject: [PATCH 055/112] Only apply grid action when component is an immediate
 child of a grid container

---
 packages/client/src/components/Component.svelte | 9 ++++++++-
 packages/client/src/utils/grid.js               | 6 +++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 0a216bd675..8083678482 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -42,6 +42,7 @@
   import { gridLayout } from "utils/grid.js"
 
   export let instance = {}
+  export let parent = null
   export let isLayout = false
   export let isRoot = false
   export let isBlock = false
@@ -194,14 +195,20 @@
   $: pad = pad || (interactive && hasChildren && inDndPath)
   $: $dndIsDragging, (pad = false)
 
+  // Themes
   $: currentTheme = $context?.device?.theme
   $: darkMode = !currentTheme?.includes("light")
 
+  // Apply ephemeral styles (such as when resizing grid components)
   $: normalStyles = {
     ...instance._styles?.normal,
     ...ephemeralStyles,
   }
+
+  // Metadata to pass into grid action to apply CSS
   $: gridMetadata = {
+    active:
+      parent?._component.endsWith("/container") && parent?.layout === "grid",
     id,
     interactive,
     styles: normalStyles,
@@ -672,7 +679,7 @@
       <svelte:component this={constructor} bind:this={ref} {...initialSettings}>
         {#if children.length}
           {#each children as child (child._id)}
-            <svelte:self instance={child} />
+            <svelte:self instance={child} parent={instance} />
           {/each}
         {:else if emptyState}
           {#if isRoot}
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index 54c5e2c24f..d974e31899 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -71,7 +71,11 @@ export const gridLayout = (node, metadata) => {
 
   // Applies the required listeners, CSS and classes to a component DOM node
   const applyMetadata = metadata => {
-    const { id, styles, interactive, errored, definition, draggable } = metadata
+    const { id, styles, interactive, errored, definition, draggable, active } =
+      metadata
+    if (!active) {
+      return
+    }
 
     // Callback to select the component when clicking on the wrapper
     selectComponent = e => {

From 8a022bb21e33ba9ada656024fa0c840f494273a8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 9 Aug 2024 08:48:32 +0100
Subject: [PATCH 056/112] Use single CSS variable for grid spacing to reduce
 duplication

---
 packages/client/src/components/app/Layout.svelte      |  7 +++++--
 .../src/components/app/container/GridContainer.svelte | 11 ++++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 72121640a6..a1ce77df72 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -352,6 +352,9 @@
     z-index: 1;
     overflow: hidden;
     position: relative;
+
+    /* Deliberately unitless as we need to do unitless calculations in grids */
+    --grid-spacing: 4;
   }
   .component {
     display: contents;
@@ -407,7 +410,7 @@
     gap: var(--spacing-xl);
   }
   .nav.size--max {
-    padding: 10px;
+    padding: calc(var(--grid-spacing) * 2px);
   }
   .nav :global(.spectrum-Icon) {
     color: var(--navTextColor);
@@ -483,7 +486,7 @@
     padding: 32px;
   }
   .main:not(.size--max):has(.screenslot-dom > .component > .grid) {
-    padding: 22px;
+    padding: calc(32px - var(--grid-spacing) * 2px);
   }
 
   .layout--none .main {
diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index f3682179c4..6df0fdd2d4 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -53,7 +53,6 @@
   .grid {
     position: relative;
     height: 400px;
-    --spacing: 8;
 
     /*
       Prevent cross-grid variable inheritance. The other variables for alignment
@@ -113,8 +112,8 @@
     overflow: auto;
     pointer-events: all;
     position: relative;
-    padding: 4px;
-    margin: 4px;
+    padding: calc(var(--grid-spacing) * 1px);
+    margin: calc(var(--grid-spacing) * 1px);
 
     /* On desktop, use desktop metadata and fall back to mobile */
     /* Position vars */
@@ -126,7 +125,8 @@
         round(
           up,
           calc(
-            (var(--spacing) * 2 + var(--default-width)) / var(--col-size) + 1
+            (var(--grid-spacing) * 2 + var(--default-width)) / var(--col-size) +
+              1
           )
         )
       )
@@ -139,7 +139,8 @@
         round(
           up,
           calc(
-            (var(--spacing) * 2 + var(--default-height)) / var(--row-size) + 1
+            (var(--grid-spacing) * 2 + var(--default-height)) / var(--row-size) +
+              1
           )
         )
       )

From 86061543dde386888bfb60474ec818bc36875248 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 9 Aug 2024 08:52:03 +0100
Subject: [PATCH 057/112] Slightly improve the look and behaviour of working
 with grid components

---
 .../client/src/components/app/container/GridContainer.svelte    | 2 +-
 packages/client/src/components/preview/GridDNDHandler.svelte    | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 6df0fdd2d4..8e8621c1a6 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -103,7 +103,7 @@
 
   /* Highlight sibling borders when resizing childern */
   :global(.grid.highlight > .component:not(.dragging)) {
-    outline: 1px solid var(--spectrum-global-color-static-blue-200);
+    outline: 2px solid var(--spectrum-global-color-static-blue-200);
   }
 
   /* Ensure all top level children have grid styles applied */
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index fe004982d3..0a3ecad72c 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -147,6 +147,7 @@
     if (!domGrid) {
       return
     }
+    builderStore.actions.selectComponent(id)
 
     // Apply active class to grid
     domComponent.parentNode.classList.add("dragging")

From 46beead098feffdefc546eb3796b6f839d8c8feb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 9 Aug 2024 09:14:53 +0100
Subject: [PATCH 058/112] Update the style of edge anchors

---
 .../src/components/preview/Indicator.svelte   | 56 +++++++++++++------
 1 file changed, 39 insertions(+), 17 deletions(-)

diff --git a/packages/client/src/components/preview/Indicator.svelte b/packages/client/src/components/preview/Indicator.svelte
index d93ecaa02b..605611d3a1 100644
--- a/packages/client/src/components/preview/Indicator.svelte
+++ b/packages/client/src/components/preview/Indicator.svelte
@@ -131,6 +131,7 @@
     display: grid;
     place-items: center;
     border-radius: 50%;
+    transform: translateX(-50%) translateY(-50%);
   }
   .anchor-inner {
     width: calc(var(--size) / 2);
@@ -140,45 +141,66 @@
     pointer-events: none;
     border-radius: 2px;
   }
+
+  /* Thinner anchors for each edge */
+  .anchor.right,
+  .anchor.left {
+    height: calc(var(--size) * 2);
+  }
+  .anchor.top,
+  .anchor.bottom {
+    width: calc(var(--size) * 2);
+  }
+  .anchor.right .anchor-inner,
+  .anchor.left .anchor-inner {
+    height: calc(var(--size) * 1.4);
+    width: calc(var(--size) * 0.3);
+  }
+  .anchor.top .anchor-inner,
+  .anchor.bottom .anchor-inner {
+    width: calc(var(--size) * 1.4);
+    height: calc(var(--size) * 0.3);
+  }
+
+  /* Anchor positions */
   .anchor.right {
-    right: calc(var(--size) / -2 - 1px);
-    top: calc(50% - var(--size) / 2);
+    left: calc(100% + 1px);
+    top: 50%;
     cursor: e-resize;
   }
   .anchor.left {
-    left: calc(var(--size) / -2 - 1px);
-    top: calc(50% - var(--size) / 2);
+    left: -1px;
+    top: 50%;
     cursor: w-resize;
   }
   .anchor.bottom {
-    left: calc(50% - var(--size) / 2 + 1px);
-    bottom: calc(var(--size) / -2 - 1px);
+    left: 50%;
+    top: calc(100% + 1px);
     cursor: s-resize;
   }
   .anchor.top {
-    left: calc(50% - var(--size) / 2 + 1px);
-    top: calc(var(--size) / -2 - 1px);
+    left: 50%;
+    top: -1px;
     cursor: n-resize;
   }
-
   .anchor.bottom-right {
-    right: calc(var(--size) / -2 - 1px);
-    bottom: calc(var(--size) / -2 - 1px);
+    top: 100%;
+    left: 100%;
     cursor: se-resize;
   }
   .anchor.bottom-left {
-    left: calc(var(--size) / -2 - 1px);
-    bottom: calc(var(--size) / -2 - 1px);
+    left: 0;
+    top: 100%;
     cursor: sw-resize;
   }
   .anchor.top-right {
-    right: calc(var(--size) / -2 - 1px);
-    top: calc(var(--size) / -2 - 1px);
+    left: 100%;
+    top: 0;
     cursor: ne-resize;
   }
   .anchor.top-left {
-    left: calc(var(--size) / -2 - 1px);
-    top: calc(var(--size) / -2 - 1px);
+    left: 0;
+    top: 0;
     cursor: nw-resize;
   }
 </style>

From aaa33acc1c2ada8c44412e872ab42cc33497856a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 9 Aug 2024 18:04:23 +0100
Subject: [PATCH 059/112] Rework grid layouts to automatically grow as required

---
 .../app/container/GridContainer.svelte        | 169 ++++++++++++------
 .../components/preview/GridDNDHandler.svelte  |  66 ++++---
 packages/client/src/constants.js              |   3 +
 packages/client/src/utils/grid.js             |  24 ++-
 4 files changed, 183 insertions(+), 79 deletions(-)

diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 8e8621c1a6..d97e7ceafb 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -1,50 +1,136 @@
 <script>
-  import { getContext } from "svelte"
+  import { getContext, onMount } from "svelte"
+  import { writable } from "svelte/store"
+  import { GridRowHeight, GridColumns } from "constants"
 
   const component = getContext("component")
-  const { styleable } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
   const context = getContext("context")
 
-  const cols = 12
-  const rowHeight = 24
-
   let width
-  let height
+  let ref
+  let rows = 1
+  let children = writable({})
+  let mounted = false
 
+  $: rows = calculateRequiredRows($children, mobile)
   $: mobile = $context.device.mobile
   $: empty = $component.empty
-  $: rows = Math.max(1, Math.floor(height / rowHeight))
-  $: colSize = width / cols
-  $: rowSize = height / rows
+  $: colSize = width / GridColumns
+  $: height = rows * GridRowHeight
+
+  // Calculates the minimum number of rows required to render all child
+  // components, on a certain device type
+  const calculateRequiredRows = (children, mobile) => {
+    const key = mobile ? "mobileRowEnd" : "desktopRowEnd"
+    let max = 2
+    for (let id of Object.keys(children)) {
+      if (children[id][key] > max) {
+        max = children[id][key]
+      }
+    }
+    return max - 1
+  }
+
+  // Stores metadata about a child node as constraints for determining grid size
+  const storeChild = node => {
+    children.update(state => ({
+      ...state,
+      [node.dataset.id]: {
+        desktopRowEnd: parseInt(node.dataset.gridDesktopRowEnd),
+        mobileRowEnd: parseInt(node.dataset.gridMobileRowEnd),
+      },
+    }))
+  }
+
+  // Removes constraint metadata for a certain child node
+  const removeChild = node => {
+    children.update(state => {
+      delete state[node.dataset.id]
+      return { ...state }
+    })
+  }
+
+  onMount(() => {
+    let observer
+    if ($builderStore.inBuilder) {
+      // Set up an observer to watch for changes in metadata attributes of child
+      // components, as well as child addition and deletion
+      observer = new MutationObserver(mutations => {
+        for (let mutation of mutations) {
+          const { target, type, addedNodes, removedNodes } = mutation
+          if (target === ref) {
+            if (addedNodes[0]?.classList?.contains("component")) {
+              // We've added a new child component inside the grid, so we need
+              // to consider it when determining required rows
+              storeChild(addedNodes[0])
+            } else if (removedNodes[0]?.classList?.contains("component")) {
+              // We've removed a child component inside the grid, so we need
+              // to stop considering it when determining required rows
+              removeChild(removedNodes[0])
+            }
+          } else if (
+            type === "attributes" &&
+            target.parentNode === ref &&
+            target.classList.contains("component")
+          ) {
+            // We've updated the size or position of a child
+            storeChild(target)
+          }
+        }
+      })
+      observer.observe(ref, {
+        childList: true,
+        attributes: true,
+        subtree: true,
+        attributeFilter: [
+          "data-grid-desktop-row-end",
+          "data-grid-mobile-row-end",
+        ],
+      })
+    }
+
+    // Now that the observer is set up, we mark the grid as mounted to mount
+    // our child components
+    mounted = true
+
+    // Cleanup our observer
+    return () => {
+      observer?.disconnect()
+    }
+  })
 </script>
 
 <div
+  bind:this={ref}
   class="grid"
   class:mobile
   bind:clientWidth={width}
-  bind:clientHeight={height}
   use:styleable={{
     ...$component.styles,
     normal: {
       ...$component.styles?.normal,
-      "--cols": cols,
+      "--height": `${height}px`,
+      "--cols": GridColumns,
       "--rows": rows,
       "--col-size": colSize,
-      "--row-size": rowSize,
+      "--row-size": GridRowHeight,
     },
     empty: false,
   }}
-  data-rows={rows}
-  data-cols={cols}
+  data-cols={GridColumns}
+  data-col-size={colSize}
 >
-  <div class="underlay">
-    {#each { length: cols * rows } as _}
-      <div class="placeholder" />
-    {/each}
-  </div>
+  {#if $builderStore.inBuilder}
+    <div class="underlay">
+      {#each { length: GridColumns * rows } as _, idx}
+        <div class="placeholder" class:first-col={idx % GridColumns === 0} />
+      {/each}
+    </div>
+  {/if}
 
   <!-- Only render the slot if not empty, as we don't want the placeholder -->
-  {#if !empty}
+  {#if !empty && mounted}
     <slot />
   {/if}
 </div>
@@ -52,7 +138,6 @@
 <style>
   .grid {
     position: relative;
-    height: 400px;
 
     /*
       Prevent cross-grid variable inheritance. The other variables for alignment
@@ -71,8 +156,11 @@
 
   .grid,
   .underlay {
+    height: var(--height) !important;
+    min-height: none !important;
+    max-height: none !important;
     display: grid;
-    grid-template-rows: repeat(var(--rows), 1fr);
+    grid-template-rows: repeat(var(--rows), calc(var(--row-size) * 1px));
     grid-template-columns: repeat(var(--cols), 1fr);
     gap: 0;
   }
@@ -84,7 +172,6 @@
     width: 100%;
     height: 100%;
     border-top: 1px solid var(--spectrum-global-color-gray-900);
-    border-left: 1px solid var(--spectrum-global-color-gray-900);
     opacity: 0.1;
     pointer-events: none;
   }
@@ -95,6 +182,9 @@
     border-bottom: 1px solid var(--spectrum-global-color-gray-900);
     border-right: 1px solid var(--spectrum-global-color-gray-900);
   }
+  .placeholder.first-col {
+    border-left: 1px solid var(--spectrum-global-color-gray-900);
+  }
 
   /* Highlight grid lines when resizing children */
   :global(.grid.highlight > .underlay) {
@@ -131,20 +221,10 @@
         )
       )
     );
+
+    /* Row end is always provided by the gridLayout action */
     --row-start: var(--grid-desktop-row-start, var(--grid-mobile-row-start, 1));
-    --row-end: var(
-      --grid-desktop-row-end,
-      var(
-        --grid-mobile-row-end,
-        round(
-          up,
-          calc(
-            (var(--grid-spacing) * 2 + var(--default-height)) / var(--row-size) +
-              1
-          )
-        )
-      )
-    );
+    --row-end: var(--grid-desktop-row-end, var(--grid-mobile-row-end));
 
     /* Flex vars */
     --h-align: var(--grid-desktop-h-align, var(--grid-mobile-h-align));
@@ -156,8 +236,8 @@
       max(2, var(--col-end)),
       calc(var(--cols) + 1)
     ) !important;
-    grid-row-start: min(max(1, var(--row-start)), var(--rows)) !important;
-    grid-row-end: min(max(2, var(--row-end)), calc(var(--rows) + 1)) !important;
+    grid-row-start: max(1, var(--row-start)) !important;
+    grid-row-end: max(2, var(--row-end)) !important;
 
     /* Flex container styles */
     flex-direction: column;
@@ -182,18 +262,7 @@
       )
     );
     --row-start: var(--grid-mobile-row-start, var(--grid-desktop-row-start, 1));
-    --row-end: var(
-      --grid-mobile-row-end,
-      var(
-        --grid-desktop-row-end,
-        round(
-          up,
-          calc(
-            (var(--spacing) * 2 + var(--default-height)) / var(--row-size) + 1
-          )
-        )
-      )
-    );
+    --row-end: var(--grid-mobile-row-end, var(--grid-desktop-row-end));
 
     /* Flex vars */
     --h-align: var(--grid-mobile-h-align, var(--grid-desktop-h-align));
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 0a3ecad72c..f7d0ba5437 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -2,6 +2,7 @@
   import { onMount, onDestroy } from "svelte"
   import { builderStore, componentStore } from "stores"
   import { Utils, memo } from "@budibase/frontend-core"
+  import { GridRowHeight } from "constants"
   import {
     isGridEvent,
     getGridParent,
@@ -15,8 +16,8 @@
     "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
 
   let dragInfo
+  let styles = memo()
   let gridStyles = memo()
-  let id
 
   // Grid CSS variables
   $: device = $builderStore.previewDevice
@@ -28,12 +29,14 @@
   }
 
   // Some memoisation of primitive types for performance
-  $: id = dragInfo?.id || id
+  $: id = dragInfo?.id
+  $: gridId = dragInfo?.gridId
 
-  // Set ephemeral grid styles on the dragged component
+  // Set ephemeral styles
   $: instance = componentStore.actions.getComponentInstance(id)
-  $: componentStyles = getComponentStyles($gridStyles)
-  $: $instance?.setEphemeralStyles(componentStyles)
+  $: gridInstance = componentStore.actions.getComponentInstance(gridId)
+  $: $instance?.setEphemeralStyles(enrichComponentStyles($styles))
+  $: $gridInstance?.setEphemeralStyles($gridStyles)
 
   // Sugar for a combination of both min and max
   const minMax = (value, min, max) => Math.min(max, Math.max(min, value))
@@ -44,47 +47,41 @@
     return Array.from(component?.children || [])[0]
   }
 
-  const getComponentStyles = gridStyles => {
-    let styles = { ...gridStyles }
-    if (gridStyles) {
-      styles["z-index"] = 999
-      styles["pointer-events"] = "none"
+  const enrichComponentStyles = styles => {
+    let clone = { ...styles }
+    if (styles) {
+      clone["z-index"] = 999
+      clone["pointer-events"] = "none"
     }
-    return styles
+    return clone
   }
 
   const processEvent = Utils.throttle((mouseX, mouseY) => {
     if (!dragInfo?.grid) {
       return
     }
-
     const { mode, side, gridId, grid } = dragInfo
     const { startX, startY, rowStart, rowEnd, colStart, colEnd } = grid
-
     const domGrid = getDOMNode(gridId)
     if (!domGrid) {
       return
     }
     const cols = parseInt(domGrid.dataset.cols)
-    const rows = parseInt(domGrid.dataset.rows)
-    const { width, height } = domGrid.getBoundingClientRect()
-
-    const colWidth = width / cols
+    const colSize = parseInt(domGrid.dataset.colSize)
     const diffX = mouseX - startX
-    let deltaX = Math.round(diffX / colWidth)
-    const rowHeight = height / rows
+    let deltaX = Math.round(diffX / colSize)
     const diffY = mouseY - startY
-    let deltaY = Math.round(diffY / rowHeight)
+    let deltaY = Math.round(diffY / GridRowHeight)
     if (mode === "move") {
       deltaX = minMax(deltaX, 1 - colStart, cols + 1 - colEnd)
-      deltaY = minMax(deltaY, 1 - rowStart, rows + 1 - rowEnd)
+      deltaY = Math.max(deltaY, 1 - rowStart)
       const newStyles = {
         [vars.colStart]: colStart + deltaX,
         [vars.colEnd]: colEnd + deltaX,
         [vars.rowStart]: rowStart + deltaY,
         [vars.rowEnd]: rowEnd + deltaY,
       }
-      gridStyles.set(newStyles)
+      styles.set(newStyles)
     } else if (mode === "resize") {
       let newStyles = {}
       if (side === "right") {
@@ -108,7 +105,7 @@
         newStyles[vars.colStart] = Math.min(colStart + deltaX, colEnd - 1)
         newStyles[vars.rowStart] = Math.min(rowStart + deltaY, rowEnd - 1)
       }
-      gridStyles.set(newStyles)
+      styles.set(newStyles)
     }
   }, 10)
 
@@ -180,15 +177,14 @@
       return
     }
     const gridCols = parseInt(domGrid.dataset.cols)
-    const gridRows = parseInt(domGrid.dataset.rows)
     const styles = getComputedStyle(domComponent.parentNode)
     dragInfo.grid = {
       startX: e.clientX,
       startY: e.clientY,
 
       // Ensure things are within limits
-      rowStart: minMax(styles["grid-row-start"], 1, gridRows),
-      rowEnd: minMax(styles["grid-row-end"], 2, gridRows + 1),
+      rowStart: Math.max(styles["grid-row-start"], 1),
+      rowEnd: Math.max(styles["grid-row-end"], 2),
       colStart: minMax(styles["grid-column-start"], 1, gridCols),
       colEnd: minMax(styles["grid-column-end"], 2, gridCols + 1),
     }
@@ -210,8 +206,11 @@
     const { id, gridId, domTarget } = dragInfo
 
     // Save changes
+    if ($styles) {
+      await builderStore.actions.updateStyles($styles, id)
+    }
     if ($gridStyles) {
-      await builderStore.actions.updateStyles($gridStyles, id)
+      await builderStore.actions.updateStyles($gridStyles, gridId)
     }
 
     // Reset DOM
@@ -227,9 +226,22 @@
 
     // Reset state
     dragInfo = null
+    styles.set(null)
     gridStyles.set(null)
   }
 
+  const calculateRequiredRows = () => {
+    let required = 1
+    const children = document.querySelectorAll(`.${gridId}-dom > .component`)
+    for (let child of children) {
+      const rowEnd = child.dataset.grid_desktop_col_end
+      if (rowEnd > required) {
+        required = rowEnd
+      }
+    }
+    return required - 1
+  }
+
   onMount(() => {
     document.addEventListener("dragstart", onDragStart, false)
     document.addEventListener("dragenter", onDragEnter, false)
diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js
index d3f1ab8be9..f7e3e86d40 100644
--- a/packages/client/src/constants.js
+++ b/packages/client/src/constants.js
@@ -15,3 +15,6 @@ export const ActionTypes = {
 
 export const DNDPlaceholderID = "dnd-placeholder"
 export const ScreenslotType = "screenslot"
+export const GridRowHeight = 24
+export const GridColumns = 12
+export const GridSpacing = 4
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index d974e31899..72381d498d 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -1,3 +1,5 @@
+import { GridSpacing } from "constants"
+import { GridRowHeight } from "constants"
 import { builderStore } from "stores"
 import { buildStyleString } from "utils/styleable.js"
 
@@ -84,15 +86,23 @@ export const gridLayout = (node, metadata) => {
     }
 
     // Generate base set of grid CSS vars based for this component
+    let width = errored ? 500 : definition.size?.width || 200
+    let height = errored ? 60 : definition.size?.height || 200
+    width += 2 * GridSpacing
+    height += 2 * GridSpacing
     const hAlign = errored ? "stretch" : definition?.grid?.hAlign || "stretch"
     const vAlign = errored ? "stretch" : definition?.grid?.vAlign || "center"
     const vars = {
-      "--default-width": errored ? 500 : definition.size?.width || 200,
-      "--default-height": errored ? 60 : definition.size?.height || 200,
+      "--default-width": width,
+      "--default-height": height,
       "--grid-desktop-h-align": hAlign,
       "--grid-mobile-h-align": hAlign,
       "--grid-desktop-v-align": vAlign,
       "--grid-mobile-v-align": vAlign,
+
+      // Variables for automatically determining grid height
+      "--grid-desktop-row-end": Math.ceil(height / GridRowHeight) + 1,
+      "--grid-mobile-row-end": Math.ceil(height / GridRowHeight) + 1,
     }
 
     // Extract any other CSS variables from the saved component styles
@@ -103,6 +113,16 @@ export const gridLayout = (node, metadata) => {
       }
     }
 
+    // Apply some metadata to data attributes to speed up lookups
+    const desktopRowEnd = `${vars["--grid-desktop-row-end"]}`
+    const mobileRowEnd = `${vars["--grid-mobile-row-end"]}`
+    if (node.dataset.gridDesktopRowEnd !== desktopRowEnd) {
+      node.dataset.gridDesktopRowEnd = desktopRowEnd
+    }
+    if (node.dataset.gridMobileRowEnd !== mobileRowEnd) {
+      node.dataset.gridMobileRowEnd = mobileRowEnd
+    }
+
     // Apply all CSS variables to the wrapper
     node.style = buildStyleString(vars)
 

From 8aa040723676b20f5da504822e9a293bf0eb35e7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 9 Aug 2024 19:09:32 +0100
Subject: [PATCH 060/112] Hide resize indicators when they don't fit

---
 .../client/src/components/preview/Indicator.svelte | 14 ++++++++++++--
 .../src/components/preview/IndicatorSet.svelte     | 12 ++----------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/components/preview/Indicator.svelte b/packages/client/src/components/preview/Indicator.svelte
index 605611d3a1..112d392354 100644
--- a/packages/client/src/components/preview/Indicator.svelte
+++ b/packages/client/src/components/preview/Indicator.svelte
@@ -34,6 +34,8 @@
   class:line
   style="top: {top}px; left: {left}px; width: {width}px; height: {height}px; --color: {color}; --zIndex: {zIndex};"
   class:withText={!!text}
+  class:vCompact={height < 40}
+  class:hCompact={width < 40}
 >
   {#if text || icon}
     <div class="label" class:flipped class:line class:right={alignRight}>
@@ -153,15 +155,23 @@
   }
   .anchor.right .anchor-inner,
   .anchor.left .anchor-inner {
-    height: calc(var(--size) * 1.4);
+    height: calc(var(--size) * 1.2);
     width: calc(var(--size) * 0.3);
   }
   .anchor.top .anchor-inner,
   .anchor.bottom .anchor-inner {
-    width: calc(var(--size) * 1.4);
+    width: calc(var(--size) * 1.2);
     height: calc(var(--size) * 0.3);
   }
 
+  /* Hide side indicators when they don't fit */
+  .indicator.hCompact .anchor.top,
+  .indicator.hCompact .anchor.bottom,
+  .indicator.vCompact .anchor.left,
+  .indicator.vCompact .anchor.right {
+    display: none;
+  }
+
   /* Anchor positions */
   .anchor.right {
     left: calc(100% + 1px);
diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index 464be3bb16..57821b4da4 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -1,9 +1,8 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import Indicator from "./Indicator.svelte"
-  import { componentStore, builderStore } from "stores"
+  import { builderStore } from "stores"
   import { memo, Utils } from "@budibase/frontend-core"
-  import { writable } from "svelte/store"
   import { isGridChild } from "utils/grid"
 
   export let componentId = null
@@ -51,15 +50,8 @@
   })
   $: $config, debouncedUpdate()
 
-  // Update position when component state changes
-  $: instance = componentStore.actions.getComponentInstance(componentId)
-  $: componentState = $instance?.state || writable()
-  $: $componentState, debouncedUpdate()
-
   const checkInsideGrid = id => {
-    const component = document.getElementsByClassName(id)[0]
-    const domNode = component?.children[0]
-    return isGridChild(domNode)
+    return isGridChild(document.getElementsByClassName(id)[0])
   }
 
   const createIntersectionCallback = idx => entries => {

From 376192e85a2581051449d6366469f02829d02880 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 9 Aug 2024 20:18:30 +0100
Subject: [PATCH 061/112] Improve performance of grid DND handler

---
 .../components/preview/GridDNDHandler.svelte  | 89 ++++++-------------
 1 file changed, 27 insertions(+), 62 deletions(-)

diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index f7d0ba5437..3217d735ba 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -56,13 +56,12 @@
     return clone
   }
 
-  const processEvent = Utils.throttle((mouseX, mouseY) => {
+  const processEvent = Utils.domDebounce((mouseX, mouseY) => {
     if (!dragInfo?.grid) {
       return
     }
-    const { mode, side, gridId, grid } = dragInfo
+    const { mode, side, grid, domGrid } = dragInfo
     const { startX, startY, rowStart, rowEnd, colStart, colEnd } = grid
-    const domGrid = getDOMNode(gridId)
     if (!domGrid) {
       return
     }
@@ -107,7 +106,7 @@
       }
       styles.set(newStyles)
     }
-  }, 10)
+  })
 
   const handleEvent = e => {
     e.preventDefault()
@@ -138,61 +137,47 @@
       id = component.dataset.id
     }
 
-    // Find grid parent
+    // Find grid parent and read from DOM
     const domComponent = getDOMNode(id)
     const domGrid = getGridParent(domComponent)
     if (!domGrid) {
       return
     }
-    builderStore.actions.selectComponent(id)
+    const gridCols = parseInt(domGrid.dataset.cols)
+    const styles = getComputedStyle(domComponent.parentNode)
 
-    // Apply active class to grid
+    // Show as active
+    builderStore.actions.selectComponent(id)
     domComponent.parentNode.classList.add("dragging")
     domGrid.classList.add("highlight")
 
     // Update state
     dragInfo = {
       domTarget: e.target,
+      domComponent,
+      domGrid,
       id,
       gridId: domGrid.parentNode.dataset.id,
       mode,
       side,
+      grid: {
+        startX: e.clientX,
+        startY: e.clientY,
+
+        // Ensure things are within limits
+        rowStart: Math.max(styles["grid-row-start"], 1),
+        rowEnd: Math.max(styles["grid-row-end"], 2),
+        colStart: minMax(styles["grid-column-start"], 1, gridCols),
+        colEnd: minMax(styles["grid-column-end"], 2, gridCols + 1),
+      },
     }
 
     // Add event handler to clear all drag state when dragging ends
     dragInfo.domTarget.addEventListener("dragend", stopDragging)
   }
 
-  // Callback when entering a potential drop target
-  const onDragEnter = e => {
-    // Skip if we aren't validly dragging currently
-    if (!dragInfo || dragInfo.grid) {
-      return
-    }
-
-    const { id, gridId } = dragInfo
-    const domComponent = getDOMNode(id)
-    const domGrid = getDOMNode(gridId)
-    if (!domComponent || !domGrid) {
-      return
-    }
-    const gridCols = parseInt(domGrid.dataset.cols)
-    const styles = getComputedStyle(domComponent.parentNode)
-    dragInfo.grid = {
-      startX: e.clientX,
-      startY: e.clientY,
-
-      // Ensure things are within limits
-      rowStart: Math.max(styles["grid-row-start"], 1),
-      rowEnd: Math.max(styles["grid-row-end"], 2),
-      colStart: minMax(styles["grid-column-start"], 1, gridCols),
-      colEnd: minMax(styles["grid-column-end"], 2, gridCols + 1),
-    }
-    handleEvent(e)
-  }
-
   const onDragOver = e => {
-    if (!dragInfo?.grid) {
+    if (!dragInfo) {
       return
     }
     handleEvent(e)
@@ -203,7 +188,12 @@
     if (!dragInfo) {
       return
     }
-    const { id, gridId, domTarget } = dragInfo
+    const { id, gridId, domTarget, domGrid, domComponent } = dragInfo
+
+    // Reset DOM
+    domComponent.parentNode.classList.remove("dragging")
+    domGrid.classList.remove("highlight")
+    domTarget.removeEventListener("dragend", stopDragging)
 
     // Save changes
     if ($styles) {
@@ -213,44 +203,19 @@
       await builderStore.actions.updateStyles($gridStyles, gridId)
     }
 
-    // Reset DOM
-    const domComponent = getDOMNode(id)
-    if (domComponent) {
-      domComponent.parentNode.classList.remove("dragging")
-    }
-    const domGrid = getDOMNode(gridId)
-    if (domGrid) {
-      domGrid.classList.remove("highlight")
-    }
-    domTarget.removeEventListener("dragend", stopDragging)
-
     // Reset state
     dragInfo = null
     styles.set(null)
     gridStyles.set(null)
   }
 
-  const calculateRequiredRows = () => {
-    let required = 1
-    const children = document.querySelectorAll(`.${gridId}-dom > .component`)
-    for (let child of children) {
-      const rowEnd = child.dataset.grid_desktop_col_end
-      if (rowEnd > required) {
-        required = rowEnd
-      }
-    }
-    return required - 1
-  }
-
   onMount(() => {
     document.addEventListener("dragstart", onDragStart, false)
-    document.addEventListener("dragenter", onDragEnter, false)
     document.addEventListener("dragover", onDragOver, false)
   })
 
   onDestroy(() => {
     document.removeEventListener("dragstart", onDragStart, false)
-    document.removeEventListener("dragenter", onDragEnter, false)
     document.removeEventListener("dragover", onDragOver, false)
   })
 </script>

From 863fafa1d05eb6a12ae8fc74a7a8f92e995511b9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 9 Aug 2024 21:21:59 +0100
Subject: [PATCH 062/112] Simply and improve performance of indicators

---
 .../components/preview/IndicatorSet.svelte    | 59 +++----------------
 1 file changed, 9 insertions(+), 50 deletions(-)

diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index 57821b4da4..070d6fa292 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -32,15 +32,8 @@
 
   let interval
   let state = defaultState()
-  let nextState = null
-  let updating = false
-  let observers = []
-  let callbackCount = 0
 
   $: offset = $builderStore.inBuilder ? 5 : -1
-  $: visibleIndicators = state.indicators.filter(x => x.visible)
-
-  // Update position when any props change
   $: config.set({
     componentId,
     color,
@@ -48,43 +41,21 @@
     prefix,
     allowResizeAnchors,
   })
+
+  // Update position when any props change
   $: $config, debouncedUpdate()
 
   const checkInsideGrid = id => {
     return isGridChild(document.getElementsByClassName(id)[0])
   }
 
-  const createIntersectionCallback = idx => entries => {
-    if (callbackCount >= observers.length) {
-      return
-    }
-    nextState.indicators[idx].visible =
-      nextState.indicators[idx].insideModal ||
-      nextState.indicators[idx].insideSidePanel ||
-      entries[0].isIntersecting
-    if (++callbackCount === observers.length) {
-      state = nextState
-      updating = false
-    }
-  }
-
   const updatePosition = () => {
-    if (updating) {
-      return
-    }
-
     // Sanity check
     if (!componentId) {
       state = defaultState()
       return
     }
-
-    // Reset state
-    updating = true
-    callbackCount = 0
-    observers.forEach(o => o.disconnect())
-    observers = []
-    nextState = defaultState()
+    let nextState = defaultState()
 
     // Check if we're inside a grid
     if (allowResizeAnchors) {
@@ -109,7 +80,7 @@
     const scrollY = window.scrollY
 
     // Extract valid children
-    // Sanity limit of 100 active indicators
+    // Sanity limit of active indicators
     const className = nextState.insideGrid ? componentId : `${componentId}-dom`
     const children = Array.from(document.getElementsByClassName(className))
       .filter(x => x != null)
@@ -118,32 +89,21 @@
     // If there aren't any nodes then reset
     if (!children.length) {
       state = defaultState()
-      updating = false
       return
     }
 
     const device = document.getElementById("app-root")
     const deviceBounds = device.getBoundingClientRect()
-    children.forEach((child, idx) => {
-      const callback = createIntersectionCallback(idx)
-      const threshold = children.length > 1 ? 1 : 0
-      const observer = new IntersectionObserver(callback, {
-        threshold,
-        root: device,
-      })
-      observer.observe(child)
-      observers.push(observer)
+    nextState.indicators = children.map(child => {
       const elBounds = child.getBoundingClientRect()
-      nextState.indicators.push({
+      return {
         top: Math.round(elBounds.top + scrollY - deviceBounds.top + offset),
         left: Math.round(elBounds.left + scrollX - deviceBounds.left + offset),
         width: Math.round(elBounds.width + 2),
         height: Math.round(elBounds.height + 2),
-        visible: false,
-        insideSidePanel: !!child.closest(".side-panel"),
-        insideModal: !!child.closest(".modal-content"),
-      })
+      }
     })
+    state = nextState
   }
   const debouncedUpdate = Utils.domDebounce(updatePosition)
 
@@ -156,11 +116,10 @@
   onDestroy(() => {
     clearInterval(interval)
     document.removeEventListener("scroll", debouncedUpdate, true)
-    observers.forEach(o => o.disconnect())
   })
 </script>
 
-{#each visibleIndicators as indicator, idx}
+{#each state.indicators as indicator, idx}
   <Indicator
     top={indicator.top}
     left={indicator.left}

From f87035aa9b89bc88f2084eb50d4f6cdd2519b4b4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 9 Aug 2024 21:22:48 +0100
Subject: [PATCH 063/112] Simplify some DOM queries

---
 packages/client/src/utils/grid.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index 72381d498d..386dcc7846 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -55,10 +55,7 @@ export const isGridEvent = e => {
 
 // Determines whether a DOM element is an immediate child of a grid
 export const isGridChild = node => {
-  return node
-    ?.closest(".component")
-    ?.parentNode.closest(".component")
-    ?.childNodes[0]?.classList?.contains("grid")
+  return node?.parentNode.classList.contains("grid")
 }
 
 // Gets the component ID of the closest parent grid

From 933942ef26374a235fd57f936f545fc921fe25cc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 9 Aug 2024 22:20:25 +0100
Subject: [PATCH 064/112] Make indicators more responsive

---
 .../components/preview/IndicatorSet.svelte    | 52 +++++++++++++++----
 1 file changed, 41 insertions(+), 11 deletions(-)

diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index 070d6fa292..6c899cb4fd 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -32,6 +32,7 @@
 
   let interval
   let state = defaultState()
+  let observing = false
 
   $: offset = $builderStore.inBuilder ? 5 : -1
   $: config.set({
@@ -45,6 +46,26 @@
   // Update position when any props change
   $: $config, debouncedUpdate()
 
+  // Observe style changes
+  $: observeChanges(componentId)
+
+  const observer = new MutationObserver(() => debouncedUpdate())
+
+  const observeChanges = id => {
+    observer.disconnect()
+    observing = false
+    const node = document.getElementsByClassName(id)[0]
+    if (node) {
+      observer.observe(node, {
+        attributes: true,
+        attributeFilter: ["style"],
+        childList: false,
+        subtree: false,
+      })
+      observing = true
+    }
+  }
+
   const checkInsideGrid = id => {
     return isGridChild(document.getElementsByClassName(id)[0])
   }
@@ -55,6 +76,17 @@
       state = defaultState()
       return
     }
+    const parents = document.getElementsByClassName(componentId)
+    if (!parents.length) {
+      state = defaultState()
+      return
+    }
+
+    // Start observing if this is the first time we've seen our component
+    // in the DOM
+    if (!observing) {
+      observeChanges(componentId)
+    }
     let nextState = defaultState()
 
     // Check if we're inside a grid
@@ -62,18 +94,15 @@
       nextState.insideGrid = checkInsideGrid(componentId)
     }
 
-    // Determine next set of indicators
-    const parents = document.getElementsByClassName(componentId)
-    if (parents.length) {
-      nextState.text = parents[0].dataset.name
-      if (nextState.prefix) {
-        nextState.text = `${nextState.prefix} ${nextState.text}`
-      }
-      if (parents[0].dataset.icon) {
-        nextState.icon = parents[0].dataset.icon
-      }
+    // Get text to display
+    nextState.text = parents[0].dataset.name
+    if (nextState.prefix) {
+      nextState.text = `${nextState.prefix} ${nextState.text}`
     }
-    nextState.error = parents?.[0]?.classList.contains("error")
+    if (parents[0].dataset.icon) {
+      nextState.icon = parents[0].dataset.icon
+    }
+    nextState.error = parents[0].classList.contains("error")
 
     // Batch reads to minimize reflow
     const scrollX = window.scrollX
@@ -114,6 +143,7 @@
   })
 
   onDestroy(() => {
+    observer.disconnect()
     clearInterval(interval)
     document.removeEventListener("scroll", debouncedUpdate, true)
   })

From a6fd2ceb47bbd4cf106613ff781b3415010e1c2e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Sat, 10 Aug 2024 10:42:54 +0100
Subject: [PATCH 065/112] Improve responsiveness of settings bar

---
 packages/client/src/components/preview/SettingsBar.svelte | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index 52f5c04538..3b781a3899 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -144,11 +144,15 @@
     const node = document.getElementsByClassName(`${id}-dom`)[0]?.parentNode
     if (node) {
       observer = new MutationObserver(() => {
+        console.log("get computed")
         computedStyles = getComputedStyle(node)
+        updatePosition()
       })
       observer.observe(node, {
         attributes: true,
         attributeFilter: ["style"],
+        childList: false,
+        subtree: false,
       })
       computedStyles = getComputedStyle(node)
     }

From 781a749a0774344aff395c24c2e29f3231911bf3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Sat, 10 Aug 2024 14:16:41 +0100
Subject: [PATCH 066/112] Update grid layout action to provide explicit values
 for all variables and simplify inheritance logic

---
 .../app/container/GridContainer.svelte        | 131 ++++++------------
 packages/client/src/utils/grid.js             |  75 +++++-----
 2 files changed, 82 insertions(+), 124 deletions(-)

diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index d97e7ceafb..0f51c209ce 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -53,42 +53,40 @@
 
   onMount(() => {
     let observer
-    if ($builderStore.inBuilder) {
-      // Set up an observer to watch for changes in metadata attributes of child
-      // components, as well as child addition and deletion
-      observer = new MutationObserver(mutations => {
-        for (let mutation of mutations) {
-          const { target, type, addedNodes, removedNodes } = mutation
-          if (target === ref) {
-            if (addedNodes[0]?.classList?.contains("component")) {
-              // We've added a new child component inside the grid, so we need
-              // to consider it when determining required rows
-              storeChild(addedNodes[0])
-            } else if (removedNodes[0]?.classList?.contains("component")) {
-              // We've removed a child component inside the grid, so we need
-              // to stop considering it when determining required rows
-              removeChild(removedNodes[0])
-            }
-          } else if (
-            type === "attributes" &&
-            target.parentNode === ref &&
-            target.classList.contains("component")
-          ) {
-            // We've updated the size or position of a child
-            storeChild(target)
+    // Set up an observer to watch for changes in metadata attributes of child
+    // components, as well as child addition and deletion
+    observer = new MutationObserver(mutations => {
+      for (let mutation of mutations) {
+        const { target, type, addedNodes, removedNodes } = mutation
+        if (target === ref) {
+          if (addedNodes[0]?.classList?.contains("component")) {
+            // We've added a new child component inside the grid, so we need
+            // to consider it when determining required rows
+            storeChild(addedNodes[0])
+          } else if (removedNodes[0]?.classList?.contains("component")) {
+            // We've removed a child component inside the grid, so we need
+            // to stop considering it when determining required rows
+            removeChild(removedNodes[0])
           }
+        } else if (
+          type === "attributes" &&
+          target.parentNode === ref &&
+          target.classList.contains("component")
+        ) {
+          // We've updated the size or position of a child
+          storeChild(target)
         }
-      })
-      observer.observe(ref, {
-        childList: true,
-        attributes: true,
-        subtree: true,
-        attributeFilter: [
-          "data-grid-desktop-row-end",
-          "data-grid-mobile-row-end",
-        ],
-      })
-    }
+      }
+    })
+    observer.observe(ref, {
+      childList: true,
+      attributes: true,
+      subtree: true,
+      attributeFilter: [
+        "data-grid-desktop-row-end",
+        "data-grid-mobile-row-end",
+      ],
+    })
 
     // Now that the observer is set up, we mark the grid as mounted to mount
     // our child components
@@ -138,26 +136,11 @@
 <style>
   .grid {
     position: relative;
-
-    /*
-      Prevent cross-grid variable inheritance. The other variables for alignment
-      are always set on each component, so we don't need to worry about
-      inheritance.
-    */
-    --grid-desktop-col-start: initial;
-    --grid-desktop-col-end: initial;
-    --grid-desktop-row-start: initial;
-    --grid-desktop-row-end: initial;
-    --grid-mobile-col-start: initial;
-    --grid-mobile-col-end: initial;
-    --grid-mobile-row-start: initial;
-    --grid-mobile-row-end: initial;
   }
-
   .grid,
   .underlay {
     height: var(--height) !important;
-    min-height: none !important;
+    min-height: 0 !important;
     max-height: none !important;
     display: grid;
     grid-template-rows: repeat(var(--rows), calc(var(--row-size) * 1px));
@@ -206,27 +189,10 @@
     margin: calc(var(--grid-spacing) * 1px);
 
     /* On desktop, use desktop metadata and fall back to mobile */
-    /* Position vars */
-    --col-start: var(--grid-desktop-col-start, var(--grid-mobile-col-start, 1));
-    --col-end: var(
-      --grid-desktop-col-end,
-      var(
-        --grid-mobile-col-end,
-        round(
-          up,
-          calc(
-            (var(--grid-spacing) * 2 + var(--default-width)) / var(--col-size) +
-              1
-          )
-        )
-      )
-    );
-
-    /* Row end is always provided by the gridLayout action */
-    --row-start: var(--grid-desktop-row-start, var(--grid-mobile-row-start, 1));
+    --col-start: var(--grid-desktop-col-start, var(--grid-mobile-col-start));
+    --col-end: var(--grid-desktop-col-end, var(--grid-mobile-col-end));
+    --row-start: var(--grid-desktop-row-start, var(--grid-mobile-row-start));
     --row-end: var(--grid-desktop-row-end, var(--grid-mobile-row-end));
-
-    /* Flex vars */
     --h-align: var(--grid-desktop-h-align, var(--grid-mobile-h-align));
     --v-align: var(--grid-desktop-v-align, var(--grid-mobile-v-align));
 
@@ -247,24 +213,10 @@
 
   /* On mobile, use mobile metadata and fall back to desktop */
   .grid.mobile :global(> .component) {
-    /* Position vars */
-    --col-start: var(--grid-mobile-col-start, var(--grid-desktop-col-start, 1));
-    --col-end: var(
-      --grid-mobile-col-end,
-      var(
-        --grid-desktop-col-end,
-        round(
-          up,
-          calc(
-            (var(--spacing) * 2 + var(--default-width)) / var(--col-size) + 1
-          )
-        )
-      )
-    );
-    --row-start: var(--grid-mobile-row-start, var(--grid-desktop-row-start, 1));
+    --col-start: var(--grid-mobile-col-start, var(--grid-desktop-col-start));
+    --col-end: var(--grid-mobile-col-end, var(--grid-desktop-col-end));
+    --row-start: var(--grid-mobile-row-start, var(--grid-desktop-row-start));
     --row-end: var(--grid-mobile-row-end, var(--grid-desktop-row-end));
-
-    /* Flex vars */
     --h-align: var(--grid-mobile-h-align, var(--grid-desktop-h-align));
     --v-align: var(--grid-mobile-v-align, var(--grid-desktop-v-align));
   }
@@ -273,11 +225,12 @@
   .grid :global(> .component > *) {
     flex: 0 0 auto !important;
   }
-  .grid:not(.mobile) :global(> .component.grid-desktop-grow > *) {
+  .grid:not(.mobile)
+    :global(> .component[data-grid-desktop-v-align="stretch"] > *) {
     flex: 1 1 0 !important;
     height: 0 !important;
   }
-  .grid.mobile :global(> .component.grid-mobile-grow > *) {
+  .grid.mobile :global(> .component[data-grid-mobile-v-align="stretch"] > *) {
     flex: 1 1 0 !important;
     height: 0 !important;
   }
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index 386dcc7846..72c1cb0a78 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -82,57 +82,62 @@ export const gridLayout = (node, metadata) => {
       builderStore.actions.selectComponent(id)
     }
 
-    // Generate base set of grid CSS vars based for this component
+    // Determine default width and height of component
     let width = errored ? 500 : definition.size?.width || 200
     let height = errored ? 60 : definition.size?.height || 200
     width += 2 * GridSpacing
     height += 2 * GridSpacing
-    const hAlign = errored ? "stretch" : definition?.grid?.hAlign || "stretch"
-    const vAlign = errored ? "stretch" : definition?.grid?.vAlign || "center"
-    const vars = {
+    let vars = {
       "--default-width": width,
       "--default-height": height,
-      "--grid-desktop-h-align": hAlign,
-      "--grid-mobile-h-align": hAlign,
-      "--grid-desktop-v-align": vAlign,
-      "--grid-mobile-v-align": vAlign,
-
-      // Variables for automatically determining grid height
-      "--grid-desktop-row-end": Math.ceil(height / GridRowHeight) + 1,
-      "--grid-mobile-row-end": Math.ceil(height / GridRowHeight) + 1,
     }
 
-    // Extract any other CSS variables from the saved component styles
-    for (let style of Object.keys(styles)) {
-      if (style.startsWith("--")) {
-        vars[style] = styles[style]
-        delete styles[style]
-      }
+    // Generate defaults for all grid params
+    const defaults = {
+      [GridParams.HAlign]: definition?.grid?.hAlign || "stretch",
+      [GridParams.VAlign]: definition?.grid?.vAlign || "center",
+      [GridParams.ColStart]: 1,
+      [GridParams.ColEnd]:
+        "round(up, calc((var(--grid-spacing) * 2 + var(--default-width)) / var(--col-size) + 1))",
+      [GridParams.RowStart]: 1,
+      [GridParams.RowEnd]: Math.ceil(height / GridRowHeight) + 1,
+    }
+
+    // Specify values for all grid params for all devices, and strip these CSS
+    // variables from the styles being applied to the inner component, as we
+    // want to apply these to the wrapper instead
+    for (let param of Object.values(GridParams)) {
+      let dVar = getGridVar(Devices.Desktop, param)
+      let mVar = getGridVar(Devices.Mobile, param)
+      vars[dVar] = styles[dVar] || styles[mVar] || defaults[param]
+      vars[mVar] = styles[mVar] || styles[dVar] || defaults[param]
+      delete styles[dVar]
+      delete styles[mVar]
+    }
+
+    // Apply some overrides depending on component state
+    if (errored) {
+      vars[getGridVar(Devices.Desktop, GridParams.HAlign)] = "stretch"
+      vars[getGridVar(Devices.Mobile, GridParams.HAlign)] = "stretch"
+      vars[getGridVar(Devices.Desktop, GridParams.VAlign)] = "stretch"
+      vars[getGridVar(Devices.Mobile, GridParams.VAlign)] = "stretch"
     }
 
     // Apply some metadata to data attributes to speed up lookups
-    const desktopRowEnd = `${vars["--grid-desktop-row-end"]}`
-    const mobileRowEnd = `${vars["--grid-mobile-row-end"]}`
-    if (node.dataset.gridDesktopRowEnd !== desktopRowEnd) {
-      node.dataset.gridDesktopRowEnd = desktopRowEnd
-    }
-    if (node.dataset.gridMobileRowEnd !== mobileRowEnd) {
-      node.dataset.gridMobileRowEnd = mobileRowEnd
+    const addDataTag = (tagName, device, param) => {
+      const val = `${vars[getGridVar(device, param)]}`
+      if (node.dataset[tagName] !== val) {
+        node.dataset[tagName] = val
+      }
     }
+    addDataTag("gridDesktopRowEnd", Devices.Desktop, GridParams.RowEnd)
+    addDataTag("gridMobileRowEnd", Devices.Mobile, GridParams.RowEnd)
+    addDataTag("gridDesktopVAlign", Devices.Desktop, GridParams.VAlign)
+    addDataTag("gridMobileVAlign", Devices.Mobile, GridParams.VAlign)
 
     // Apply all CSS variables to the wrapper
     node.style = buildStyleString(vars)
 
-    // Toggle classes to specify whether our children should fill
-    node.classList.toggle(
-      GridClasses.DesktopFill,
-      vars[getGridVar(Devices.Desktop, GridParams.VAlign)] === "stretch"
-    )
-    node.classList.toggle(
-      GridClasses.MobileFill,
-      vars[getGridVar(Devices.Mobile, GridParams.VAlign)] === "stretch"
-    )
-
     // Add a listener to select this node on click
     if (interactive) {
       node.addEventListener("click", selectComponent, false)

From 34448cfca2dbf58922635091756e7cd3ef9c2dad Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Sat, 10 Aug 2024 14:40:32 +0100
Subject: [PATCH 067/112] Fix dragging on tablet preview

---
 .../components/preview/GridDNDHandler.svelte   | 18 +++++++++---------
 packages/client/src/utils/grid.js              |  4 ++--
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 3217d735ba..f72fbb07f8 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onMount, onDestroy } from "svelte"
+  import { onMount, onDestroy, getContext } from "svelte"
   import { builderStore, componentStore } from "stores"
   import { Utils, memo } from "@budibase/frontend-core"
   import { GridRowHeight } from "constants"
@@ -8,8 +8,11 @@
     getGridParent,
     GridParams,
     getGridVar,
+    Devices,
   } from "utils/grid"
 
+  const context = getContext("context")
+
   // Smallest possible 1x1 transparent GIF
   const ghost = new Image(1, 1)
   ghost.src =
@@ -20,7 +23,7 @@
   let gridStyles = memo()
 
   // Grid CSS variables
-  $: device = $builderStore.previewDevice
+  $: device = $context.device.mobile ? Devices.Mobile : Devices.Desktop
   $: vars = {
     colStart: getGridVar(device, GridParams.ColStart),
     colEnd: getGridVar(device, GridParams.ColEnd),
@@ -143,7 +146,6 @@
     if (!domGrid) {
       return
     }
-    const gridCols = parseInt(domGrid.dataset.cols)
     const styles = getComputedStyle(domComponent.parentNode)
 
     // Show as active
@@ -163,12 +165,10 @@
       grid: {
         startX: e.clientX,
         startY: e.clientY,
-
-        // Ensure things are within limits
-        rowStart: Math.max(styles["grid-row-start"], 1),
-        rowEnd: Math.max(styles["grid-row-end"], 2),
-        colStart: minMax(styles["grid-column-start"], 1, gridCols),
-        colEnd: minMax(styles["grid-column-end"], 2, gridCols + 1),
+        rowStart: parseInt(styles["grid-row-start"]),
+        rowEnd: parseInt(styles["grid-row-end"]),
+        colStart: parseInt(styles["grid-column-start"]),
+        colEnd: parseInt(styles["grid-column-end"]),
       },
     }
 
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index 72c1cb0a78..99a5832987 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -34,7 +34,7 @@ export const GridClasses = {
 }
 
 // Enum for device preview type, included in grid CSS variables
-const Devices = {
+export const Devices = {
   Desktop: "desktop",
   Mobile: "mobile",
 }
@@ -100,7 +100,7 @@ export const gridLayout = (node, metadata) => {
       [GridParams.ColEnd]:
         "round(up, calc((var(--grid-spacing) * 2 + var(--default-width)) / var(--col-size) + 1))",
       [GridParams.RowStart]: 1,
-      [GridParams.RowEnd]: Math.ceil(height / GridRowHeight) + 1,
+      [GridParams.RowEnd]: Math.max(2, Math.ceil(height / GridRowHeight) + 1),
     }
 
     // Specify values for all grid params for all devices, and strip these CSS

From 533a597a0b08c7460c9aff8e244590d416d67362 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Sat, 10 Aug 2024 18:52:24 +0100
Subject: [PATCH 068/112] Performance improvements

---
 .../client/src/components/Component.svelte    | 10 ++--
 .../app/container/GridContainer.svelte        | 30 +++++-----
 .../components/preview/GridDNDHandler.svelte  | 11 +---
 .../preview/GridStylesButton.svelte           |  4 +-
 .../src/components/preview/SettingsBar.svelte | 59 ++++++++++---------
 packages/client/src/utils/grid.js             |  4 +-
 6 files changed, 59 insertions(+), 59 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 8083678482..b9ff2ed1d8 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -40,6 +40,7 @@
     getActionDependentContextKeys,
   } from "../utils/buttonActions.js"
   import { gridLayout } from "utils/grid.js"
+  import { memo } from "@budibase/frontend-core"
 
   export let instance = {}
   export let parent = null
@@ -53,7 +54,7 @@
   const component = getContext("component")
 
   // Create component context
-  const store = writable({})
+  const store = memo({})
   setContext("component", store)
 
   // Ref to the svelte component
@@ -206,7 +207,8 @@
   }
 
   // Metadata to pass into grid action to apply CSS
-  $: gridMetadata = {
+  let gridMetadata = memo()
+  $: gridMetadata.set({
     active:
       parent?._component.endsWith("/container") && parent?.layout === "grid",
     id,
@@ -215,7 +217,7 @@
     draggable,
     definition,
     errored: errorState,
-  }
+  })
 
   // Update component context
   $: store.set({
@@ -668,7 +670,7 @@
     data-name={name}
     data-icon={icon}
     data-parent={$component.id}
-    use:gridLayout={gridMetadata}
+    use:gridLayout={$gridMetadata}
   >
     {#if errorState}
       <ComponentErrorState
diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 0f51c209ce..981a321e14 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -2,6 +2,7 @@
   import { getContext, onMount } from "svelte"
   import { writable } from "svelte/store"
   import { GridRowHeight, GridColumns } from "constants"
+  import { memo } from "@budibase/frontend-core"
 
   const component = getContext("component")
   const { styleable, builderStore } = getContext("sdk")
@@ -12,12 +13,25 @@
   let rows = 1
   let children = writable({})
   let mounted = false
+  let styles = memo({})
 
   $: rows = calculateRequiredRows($children, mobile)
   $: mobile = $context.device.mobile
   $: empty = $component.empty
   $: colSize = width / GridColumns
   $: height = rows * GridRowHeight
+  $: styles.set({
+    ...$component.styles,
+    normal: {
+      ...$component.styles?.normal,
+      "--height": `${height}px`,
+      "--cols": GridColumns,
+      "--rows": rows,
+      "--col-size": colSize,
+      "--row-size": GridRowHeight,
+    },
+    empty: false,
+  })
 
   // Calculates the minimum number of rows required to render all child
   // components, on a certain device type
@@ -104,18 +118,7 @@
   class="grid"
   class:mobile
   bind:clientWidth={width}
-  use:styleable={{
-    ...$component.styles,
-    normal: {
-      ...$component.styles?.normal,
-      "--height": `${height}px`,
-      "--cols": GridColumns,
-      "--rows": rows,
-      "--col-size": colSize,
-      "--row-size": GridRowHeight,
-    },
-    empty: false,
-  }}
+  use:styleable={$styles}
   data-cols={GridColumns}
   data-col-size={colSize}
 >
@@ -134,9 +137,6 @@
 </div>
 
 <style>
-  .grid {
-    position: relative;
-  }
   .grid,
   .underlay {
     height: var(--height) !important;
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index f72fbb07f8..0caee53953 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -20,7 +20,6 @@
 
   let dragInfo
   let styles = memo()
-  let gridStyles = memo()
 
   // Grid CSS variables
   $: device = $context.device.mobile ? Devices.Mobile : Devices.Desktop
@@ -33,13 +32,11 @@
 
   // Some memoisation of primitive types for performance
   $: id = dragInfo?.id
-  $: gridId = dragInfo?.gridId
 
   // Set ephemeral styles
   $: instance = componentStore.actions.getComponentInstance(id)
-  $: gridInstance = componentStore.actions.getComponentInstance(gridId)
   $: $instance?.setEphemeralStyles(enrichComponentStyles($styles))
-  $: $gridInstance?.setEphemeralStyles($gridStyles)
+  $: $styles, console.log("new styles")
 
   // Sugar for a combination of both min and max
   const minMax = (value, min, max) => Math.min(max, Math.max(min, value))
@@ -188,7 +185,7 @@
     if (!dragInfo) {
       return
     }
-    const { id, gridId, domTarget, domGrid, domComponent } = dragInfo
+    const { id, domTarget, domGrid, domComponent } = dragInfo
 
     // Reset DOM
     domComponent.parentNode.classList.remove("dragging")
@@ -199,14 +196,10 @@
     if ($styles) {
       await builderStore.actions.updateStyles($styles, id)
     }
-    if ($gridStyles) {
-      await builderStore.actions.updateStyles($gridStyles, gridId)
-    }
 
     // Reset state
     dragInfo = null
     styles.set(null)
-    gridStyles.set(null)
   }
 
   onMount(() => {
diff --git a/packages/client/src/components/preview/GridStylesButton.svelte b/packages/client/src/components/preview/GridStylesButton.svelte
index a87652d338..430a0659ec 100644
--- a/packages/client/src/components/preview/GridStylesButton.svelte
+++ b/packages/client/src/components/preview/GridStylesButton.svelte
@@ -7,9 +7,7 @@
   export let icon
   export let title
   export let componentId
-  export let computedStyles
-
-  $: active = computedStyles?.getPropertyValue(style) === value
+  export let active
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index 3b781a3899..a415d9b11b 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -1,14 +1,14 @@
 <script>
-  import { onMount, onDestroy } from "svelte"
+  import { onMount, onDestroy, getContext } from "svelte"
   import SettingsButton from "./SettingsButton.svelte"
   import GridStylesButton from "./GridStylesButton.svelte"
   import SettingsColorPicker from "./SettingsColorPicker.svelte"
   import SettingsPicker from "./SettingsPicker.svelte"
   import { builderStore, componentStore, dndIsDragging } from "stores"
   import { Utils, shouldDisplaySetting } from "@budibase/frontend-core"
-  import { findComponentParent } from "utils/components"
-  import { getGridVar, GridParams } from "utils/grid"
+  import { getGridVar, GridParams, Devices } from "utils/grid"
 
+  const context = getContext("context")
   const verticalOffset = 36
   const horizontalOffset = 2
 
@@ -18,7 +18,10 @@
   let self
   let measured = false
   let observer
-  let computedStyles
+
+  let insideGrid = false
+  let gridHAlign
+  let gridVAlign
 
   // TODO: respect dependsOn keys
 
@@ -26,7 +29,6 @@
   $: measured, observeComputedStyles(componentId)
   $: component = $componentStore.selectedComponent
   $: definition = $componentStore.selectedComponentDefinition
-  $: parent = findComponentParent($builderStore.screen.props, componentId)
   $: instance = componentStore.actions.getComponentInstance(componentId)
   $: state = $instance?.state
   $: showBar =
@@ -34,20 +36,14 @@
     !$dndIsDragging &&
     definition &&
     !$state?.errorState
-  $: {
-    if (!showBar) {
-      measured = false
-    }
-  }
   $: settings = getBarSettings(component, definition)
   $: isRoot = componentId === $builderStore.screen?.props?._id
-  $: insideGrid =
-    parent?._component.endsWith("/container") && parent.layout === "grid"
   $: showGridStyles =
     insideGrid &&
     (definition?.grid?.hAlign !== "stretch" ||
       definition?.grid?.vAlign !== "stretch")
-  $: device = $builderStore.previewDevice
+  $: mobile = $context.device.mobile
+  $: device = mobile ? Devices.Mobile : Devices.Desktop
   $: gridHAlignVar = getGridVar(device, GridParams.HAlign)
   $: gridVAlignVar = getGridVar(device, GridParams.VAlign)
 
@@ -74,6 +70,9 @@
     }
     const id = $builderStore.selectedComponentId
     let element = document.getElementsByClassName(id)?.[0]
+
+    // Check if we're inside a grid
+    insideGrid = element.parentNode.classList.contains("grid")
     if (!insideGrid) {
       element = element?.children?.[0]
     }
@@ -92,6 +91,17 @@
       const height = self.offsetHeight
       const { scrollX, scrollY, innerWidth } = window
 
+      // Read grid metadata from data attributes
+      if (insideGrid) {
+        if (mobile) {
+          gridHAlign = element.dataset.gridMobileHAlign
+          gridVAlign = element.dataset.gridMobileVAlign
+        } else {
+          gridHAlign = element.dataset.gridDesktopHAlign
+          gridVAlign = element.dataset.gridDesktopVAlign
+        }
+      }
+
       // Vertically, always render above unless no room, then render inside
       let newTop = elBounds.top + scrollY - verticalOffset - height
       if (newTop < deviceBounds.top - 50) {
@@ -143,18 +153,13 @@
     observer?.disconnect()
     const node = document.getElementsByClassName(`${id}-dom`)[0]?.parentNode
     if (node) {
-      observer = new MutationObserver(() => {
-        console.log("get computed")
-        computedStyles = getComputedStyle(node)
-        updatePosition()
-      })
+      observer = new MutationObserver(updatePosition)
       observer.observe(node, {
         attributes: true,
         attributeFilter: ["style"],
         childList: false,
         subtree: false,
       })
-      computedStyles = getComputedStyle(node)
     }
   }
 
@@ -184,32 +189,32 @@
         value="start"
         icon="AlignLeft"
         title="Align left"
+        active={gridHAlign === "start"}
         {componentId}
-        {computedStyles}
       />
       <GridStylesButton
         style={gridHAlignVar}
         value="center"
         icon="AlignCenter"
         title="Align center"
+        active={gridHAlign === "center"}
         {componentId}
-        {computedStyles}
       />
       <GridStylesButton
         style={gridHAlignVar}
         value="end"
         icon="AlignRight"
         title="Align right"
+        active={gridHAlign === "end"}
         {componentId}
-        {computedStyles}
       />
       <GridStylesButton
         style={gridHAlignVar}
         value="stretch"
         icon="MoveLeftRight"
         title="Stretch horizontally"
+        active={gridHAlign === "stretch"}
         {componentId}
-        {computedStyles}
       />
       <div class="divider" />
       <GridStylesButton
@@ -217,32 +222,32 @@
         value="start"
         icon="AlignTop"
         title="Align top"
+        active={gridVAlign === "start"}
         {componentId}
-        {computedStyles}
       />
       <GridStylesButton
         style={gridVAlignVar}
         value="center"
         icon="AlignMiddle"
         title="Align middle"
+        active={gridVAlign === "center"}
         {componentId}
-        {computedStyles}
       />
       <GridStylesButton
         style={gridVAlignVar}
         value="end"
         icon="AlignBottom"
         title="Align bottom"
+        active={gridVAlign === "end"}
         {componentId}
-        {computedStyles}
       />
       <GridStylesButton
         style={gridVAlignVar}
         value="stretch"
         icon="MoveUpDown"
         title="Stretch vertically"
+        active={gridVAlign === "stretch"}
         {componentId}
-        {computedStyles}
       />
       <div class="divider" />
     {/if}
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index 99a5832987..3f2336f1cf 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -132,6 +132,8 @@ export const gridLayout = (node, metadata) => {
     }
     addDataTag("gridDesktopRowEnd", Devices.Desktop, GridParams.RowEnd)
     addDataTag("gridMobileRowEnd", Devices.Mobile, GridParams.RowEnd)
+    addDataTag("gridDesktopHAlign", Devices.Desktop, GridParams.HAlign)
+    addDataTag("gridMobileHAlign", Devices.Mobile, GridParams.HAlign)
     addDataTag("gridDesktopVAlign", Devices.Desktop, GridParams.VAlign)
     addDataTag("gridMobileVAlign", Devices.Mobile, GridParams.VAlign)
 
@@ -149,7 +151,7 @@ export const gridLayout = (node, metadata) => {
 
   // Removes the previously set up listeners
   const removeListeners = () => {
-    node.removeEventListener("click", selectComponent)
+    node.removeEventListener("click", selectComponent, false)
   }
 
   applyMetadata(metadata)

From 304c244943e008b53140fd8c2c81ecdedaf1fa9c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Sat, 10 Aug 2024 20:08:49 +0100
Subject: [PATCH 069/112] Tidy up and remove old code and simplify some
 selectors

---
 packages/client/src/components/Component.svelte              | 4 ++--
 packages/client/src/components/app/GridBlock.svelte          | 4 ++--
 packages/client/src/components/preview/GridDNDHandler.svelte | 1 -
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index b9ff2ed1d8..7a8188864f 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -708,7 +708,7 @@
     border-radius: 4px !important;
     transition: padding 260ms ease-out, border 260ms ease-out;
   }
-  .interactive :global(*) {
-    cursor: default;
+  .interactive {
+    cursor: default !important;
   }
 </style>
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index e86f163dba..357e9ff084 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -198,7 +198,7 @@
     overflow: hidden;
     height: 410px;
   }
-  div.in-builder :global(*) {
-    pointer-events: none;
+  div.in-builder {
+    pointer-events: none !important;
   }
 </style>
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 0caee53953..a5ff8e0c27 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -36,7 +36,6 @@
   // Set ephemeral styles
   $: instance = componentStore.actions.getComponentInstance(id)
   $: $instance?.setEphemeralStyles(enrichComponentStyles($styles))
-  $: $styles, console.log("new styles")
 
   // Sugar for a combination of both min and max
   const minMax = (value, min, max) => Math.min(max, Math.max(min, value))

From d77e4381cc84892b964a3e667d8b7a0f127d982a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 12 Aug 2024 09:55:12 +0100
Subject: [PATCH 070/112] Speed up memo stores

---
 packages/frontend-core/src/utils/memo.js | 25 ++++++++----------------
 1 file changed, 8 insertions(+), 17 deletions(-)

diff --git a/packages/frontend-core/src/utils/memo.js b/packages/frontend-core/src/utils/memo.js
index ba0e3f3490..b99af15c2c 100644
--- a/packages/frontend-core/src/utils/memo.js
+++ b/packages/frontend-core/src/utils/memo.js
@@ -4,32 +4,23 @@ import { writable, get, derived } from "svelte/store"
 // subscribed children will only fire when a new value is actually set
 export const memo = initialValue => {
   const store = writable(initialValue)
+  let currentJSON = null
 
-  const tryUpdateValue = (newValue, currentValue) => {
-    // Sanity check for primitive equality
-    if (currentValue === newValue) {
-      return
-    }
-
-    // Otherwise deep compare via JSON stringify
-    const currentString = JSON.stringify(currentValue)
-    const newString = JSON.stringify(newValue)
-    if (currentString !== newString) {
+  const tryUpdateValue = newValue => {
+    const newJSON = JSON.stringify(newValue)
+    if (newJSON !== currentJSON) {
       store.set(newValue)
+      currentJSON = newJSON
     }
   }
 
   return {
     subscribe: store.subscribe,
-    set: newValue => {
-      const currentValue = get(store)
-      tryUpdateValue(newValue, currentValue)
-    },
+    set: tryUpdateValue,
     update: updateFn => {
-      const currentValue = get(store)
-      let mutableCurrentValue = JSON.parse(JSON.stringify(currentValue))
+      let mutableCurrentValue = JSON.parse(currentJSON)
       const newValue = updateFn(mutableCurrentValue)
-      tryUpdateValue(newValue, currentValue)
+      tryUpdateValue(newValue)
     },
   }
 }

From 5b8846208b441b8331c8859a6bd984ef8f3d7cf6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 12 Aug 2024 09:55:45 +0100
Subject: [PATCH 071/112] Prevent pointer events on non-dragged grid children
 to reduce hit test load

---
 .../client/src/components/app/container/GridContainer.svelte     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 981a321e14..09fd15d599 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -177,6 +177,7 @@
   /* Highlight sibling borders when resizing childern */
   :global(.grid.highlight > .component:not(.dragging)) {
     outline: 2px solid var(--spectrum-global-color-static-blue-200);
+    pointer-events: none !important;
   }
 
   /* Ensure all top level children have grid styles applied */

From 9f951bab20b16e491fe5ad45cc9a561a2142a2c4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 12 Aug 2024 10:24:14 +0100
Subject: [PATCH 072/112] Revert indicator sets to use IntersectionObservers
 when multiple indicators are required

---
 .../components/preview/IndicatorSet.svelte    | 61 +++++++++++++++++--
 .../src/components/preview/SettingsBar.svelte |  2 +-
 2 files changed, 57 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index 6c899cb4fd..3c34d0de5d 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -33,7 +33,12 @@
   let interval
   let state = defaultState()
   let observing = false
+  let updating = false
+  let observers = []
+  let callbackCount = 0
+  let nextState
 
+  $: visibleIndicators = state.indicators.filter(x => x.visible)
   $: offset = $builderStore.inBuilder ? 5 : -1
   $: config.set({
     componentId,
@@ -70,7 +75,25 @@
     return isGridChild(document.getElementsByClassName(id)[0])
   }
 
+  const createIntersectionCallback = idx => entries => {
+    if (callbackCount >= observers.length) {
+      return
+    }
+    nextState.indicators[idx].visible =
+      nextState.indicators[idx].insideModal ||
+      nextState.indicators[idx].insideSidePanel ||
+      entries[0].isIntersecting
+    if (++callbackCount === observers.length) {
+      state = nextState
+      updating = false
+    }
+  }
+
   const updatePosition = () => {
+    if (updating) {
+      return
+    }
+
     // Sanity check
     if (!componentId) {
       state = defaultState()
@@ -81,13 +104,17 @@
       state = defaultState()
       return
     }
+    updating = true
+    callbackCount = 0
+    observers.forEach(o => o.disconnect())
+    observers = []
+    nextState = defaultState()
 
     // Start observing if this is the first time we've seen our component
     // in the DOM
     if (!observing) {
       observeChanges(componentId)
     }
-    let nextState = defaultState()
 
     // Check if we're inside a grid
     if (allowResizeAnchors) {
@@ -114,6 +141,7 @@
     const children = Array.from(document.getElementsByClassName(className))
       .filter(x => x != null)
       .slice(0, 100)
+    const multi = children.length > 1
 
     // If there aren't any nodes then reset
     if (!children.length) {
@@ -123,16 +151,39 @@
 
     const device = document.getElementById("app-root")
     const deviceBounds = device.getBoundingClientRect()
-    nextState.indicators = children.map(child => {
+    nextState.indicators = children.map((child, idx) => {
       const elBounds = child.getBoundingClientRect()
-      return {
+      let indicator = {
         top: Math.round(elBounds.top + scrollY - deviceBounds.top + offset),
         left: Math.round(elBounds.left + scrollX - deviceBounds.left + offset),
         width: Math.round(elBounds.width + 2),
         height: Math.round(elBounds.height + 2),
+        visible: true,
       }
+
+      // If observing more than one node then we need to use an intersection
+      // observer to determine whether each indicator should be visible
+      if (multi) {
+        const callback = createIntersectionCallback(idx)
+        const observer = new IntersectionObserver(callback, {
+          threshold: 1,
+          root: device,
+        })
+        observer.observe(child)
+        observers.push(observer)
+        indicator.visible = false
+        indicator.insideSidePanel = !!child.closest(".side-panel")
+        indicator.insideModal = !!child.closest(".modal-content")
+      }
+
+      return indicator
     })
-    state = nextState
+
+    // Immediately apply the update if we're just observing a single node
+    if (!multi) {
+      state = nextState
+      updating = false
+    }
   }
   const debouncedUpdate = Utils.domDebounce(updatePosition)
 
@@ -149,7 +200,7 @@
   })
 </script>
 
-{#each state.indicators as indicator, idx}
+{#each visibleIndicators as indicator, idx}
   <Indicator
     top={indicator.top}
     left={indicator.left}
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index a415d9b11b..b0c8cfcc82 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -72,7 +72,7 @@
     let element = document.getElementsByClassName(id)?.[0]
 
     // Check if we're inside a grid
-    insideGrid = element.parentNode.classList.contains("grid")
+    insideGrid = element?.parentNode.classList.contains("grid")
     if (!insideGrid) {
       element = element?.children?.[0]
     }

From aeb8a0f117b2f7d0f47ddf91285557a497d7460f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 12 Aug 2024 10:48:38 +0100
Subject: [PATCH 073/112] Allow grid containers to use their natural height as
 a min height

---
 .../app/container/GridContainer.svelte           | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 09fd15d599..39358484a6 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -9,22 +9,26 @@
   const context = getContext("context")
 
   let width
+  let height
   let ref
   let rows = 1
   let children = writable({})
   let mounted = false
   let styles = memo({})
 
-  $: rows = calculateRequiredRows($children, mobile)
+  $: requiredRows = calculateRequiredRows($children, mobile)
+  $: requiredHeight = requiredRows * GridRowHeight
+  $: availableRows = Math.floor(height / GridRowHeight)
+  $: rows = Math.max(requiredRows, availableRows)
   $: mobile = $context.device.mobile
   $: empty = $component.empty
   $: colSize = width / GridColumns
-  $: height = rows * GridRowHeight
   $: styles.set({
     ...$component.styles,
     normal: {
       ...$component.styles?.normal,
-      "--height": `${height}px`,
+      "--height": `${requiredHeight}px`,
+      "--min-height": $component.styles?.normal?.height || 0,
       "--cols": GridColumns,
       "--rows": rows,
       "--col-size": colSize,
@@ -118,6 +122,7 @@
   class="grid"
   class:mobile
   bind:clientWidth={width}
+  bind:clientHeight={height}
   use:styleable={$styles}
   data-cols={GridColumns}
   data-col-size={colSize}
@@ -140,12 +145,13 @@
   .grid,
   .underlay {
     height: var(--height) !important;
-    min-height: 0 !important;
+    min-height: var(--min-height) !important;
     max-height: none !important;
     display: grid;
+    gap: 0;
     grid-template-rows: repeat(var(--rows), calc(var(--row-size) * 1px));
     grid-template-columns: repeat(var(--cols), 1fr);
-    gap: 0;
+    position: relative;
   }
   .underlay {
     display: none;

From 51db5ac9a993864fa6f936e2be7271b0c5350b3c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 12 Aug 2024 11:00:59 +0100
Subject: [PATCH 074/112] Lint

---
 packages/client/src/components/Component.svelte | 2 +-
 packages/client/src/utils/grid.js               | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 7a8188864f..3d081f5a61 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -54,7 +54,7 @@
   const component = getContext("component")
 
   // Create component context
-  const store = memo({})
+  const store = writable({})
   setContext("component", store)
 
   // Ref to the svelte component
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index 3f2336f1cf..4e474b4d50 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -1,5 +1,4 @@
-import { GridSpacing } from "constants"
-import { GridRowHeight } from "constants"
+import { GridSpacing, GridRowHeight } from "constants"
 import { builderStore } from "stores"
 import { buildStyleString } from "utils/styleable.js"
 

From 47e4c668eccb20882e911a6a364deaada596ebd3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 12 Aug 2024 14:01:33 +0100
Subject: [PATCH 075/112] Tidy up

---
 .../client/src/components/app/container/GridContainer.svelte  | 4 ++--
 packages/client/src/components/preview/IndicatorSet.svelte    | 3 +--
 packages/client/src/utils/grid.js                             | 3 +++
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 39358484a6..b1d00e6c07 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -5,7 +5,7 @@
   import { memo } from "@budibase/frontend-core"
 
   const component = getContext("component")
-  const { styleable, builderStore } = getContext("sdk")
+  const { styleable } = getContext("sdk")
   const context = getContext("context")
 
   let width
@@ -127,7 +127,7 @@
   data-cols={GridColumns}
   data-col-size={colSize}
 >
-  {#if $builderStore.inBuilder}
+  {#if inBuilder}
     <div class="underlay">
       {#each { length: GridColumns * rows } as _, idx}
         <div class="placeholder" class:first-col={idx % GridColumns === 0} />
diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index 3c34d0de5d..de7fc0f66c 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -14,6 +14,7 @@
   // Offset = 6 (clip-root padding) - 1 (half the border thickness)
   const config = memo($$props)
   const errorColor = "var(--spectrum-global-color-static-red-600)"
+  const observer = new MutationObserver(() => debouncedUpdate())
   const defaultState = () => ({
     // Cached props
     componentId,
@@ -54,8 +55,6 @@
   // Observe style changes
   $: observeChanges(componentId)
 
-  const observer = new MutationObserver(() => debouncedUpdate())
-
   const observeChanges = id => {
     observer.disconnect()
     observing = false
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index 4e474b4d50..a7ca3e5286 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -135,6 +135,9 @@ export const gridLayout = (node, metadata) => {
     addDataTag("gridMobileHAlign", Devices.Mobile, GridParams.HAlign)
     addDataTag("gridDesktopVAlign", Devices.Desktop, GridParams.VAlign)
     addDataTag("gridMobileVAlign", Devices.Mobile, GridParams.VAlign)
+    if (node.dataset.insideGrid !== true) {
+      node.dataset.insideGrid = true
+    }
 
     // Apply all CSS variables to the wrapper
     node.style = buildStyleString(vars)

From 1f99ecc5291edff974c1b2aa72c58b5e0d25320c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 12 Aug 2024 14:03:31 +0100
Subject: [PATCH 076/112] Fix missing reference

---
 .../client/src/components/app/container/GridContainer.svelte  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index b1d00e6c07..39358484a6 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -5,7 +5,7 @@
   import { memo } from "@budibase/frontend-core"
 
   const component = getContext("component")
-  const { styleable } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
   const context = getContext("context")
 
   let width
@@ -127,7 +127,7 @@
   data-cols={GridColumns}
   data-col-size={colSize}
 >
-  {#if inBuilder}
+  {#if $builderStore.inBuilder}
     <div class="underlay">
       {#each { length: GridColumns * rows } as _, idx}
         <div class="placeholder" class:first-col={idx % GridColumns === 0} />

From d423d530e417e80943be330b74d76e55e3055f19 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 12 Aug 2024 14:45:17 +0100
Subject: [PATCH 077/112] Rewrite settings bar updates to improve performance

---
 .../src/components/app/GridBlock.svelte       |   2 +-
 .../src/components/preview/SettingsBar.svelte | 204 ++++++++++--------
 2 files changed, 110 insertions(+), 96 deletions(-)

diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index 357e9ff084..30a35b0713 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -198,7 +198,7 @@
     overflow: hidden;
     height: 410px;
   }
-  div.in-builder {
+  div.in-builder :global(> *) {
     pointer-events: none !important;
   }
 </style>
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index b0c8cfcc82..09706726bb 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -11,25 +11,24 @@
   const context = getContext("context")
   const verticalOffset = 36
   const horizontalOffset = 2
+  const observer = new MutationObserver(() => debouncedUpdate())
 
   let top = 0
   let left = 0
   let interval
   let self
   let measured = false
-  let observer
-
+  let observing = false
   let insideGrid = false
   let gridHAlign
   let gridVAlign
+  let deviceEl
 
-  // TODO: respect dependsOn keys
-
-  $: componentId = $builderStore.selectedComponentId
-  $: measured, observeComputedStyles(componentId)
+  $: id = $builderStore.selectedComponentId
+  $: id, reset()
   $: component = $componentStore.selectedComponent
   $: definition = $componentStore.selectedComponentDefinition
-  $: instance = componentStore.actions.getComponentInstance(componentId)
+  $: instance = componentStore.actions.getComponentInstance(id)
   $: state = $instance?.state
   $: showBar =
     definition?.showSettingsBar !== false &&
@@ -37,7 +36,7 @@
     definition &&
     !$state?.errorState
   $: settings = getBarSettings(component, definition)
-  $: isRoot = componentId === $builderStore.screen?.props?._id
+  $: isRoot = id === $builderStore.screen?.props?._id
   $: showGridStyles =
     insideGrid &&
     (definition?.grid?.hAlign !== "stretch" ||
@@ -47,6 +46,21 @@
   $: gridHAlignVar = getGridVar(device, GridParams.HAlign)
   $: gridVAlignVar = getGridVar(device, GridParams.VAlign)
 
+  const reset = () => {
+    observer.disconnect()
+    measured = false
+    observing = false
+    insideGrid = false
+  }
+
+  const startObserving = domBoundary => {
+    observer.observe(domBoundary, {
+      attributes: true,
+      attributeFilter: ["style"],
+    })
+    observing = true
+  }
+
   const getBarSettings = (component, definition) => {
     let allSettings = []
     definition?.settings?.forEach(setting => {
@@ -68,102 +82,102 @@
     if (!showBar) {
       return
     }
-    const id = $builderStore.selectedComponentId
-    let element = document.getElementsByClassName(id)?.[0]
 
-    // Check if we're inside a grid
-    insideGrid = element?.parentNode.classList.contains("grid")
+    // Find DOM boundary and ensure it is valid
+    let domBoundary = document.getElementsByClassName(id)[0]
+    if (!domBoundary) {
+      return reset()
+    }
+
+    // If we're inside a grid, allow time for buttons to render
+    const nextInsideGrid = domBoundary.dataset.insideGrid === "true"
+    if (nextInsideGrid && !insideGrid) {
+      insideGrid = true
+      return
+    } else {
+      insideGrid = nextInsideGrid
+    }
+
+    // Get the correct DOM boundary depending if we're inside a grid or not
     if (!insideGrid) {
-      element = element?.children?.[0]
+      domBoundary =
+        domBoundary.getElementsByClassName(`${id}-dom`)[0] ||
+        domBoundary.children?.[0]
+    }
+    if (!domBoundary || !self) {
+      return reset()
     }
 
-    // The settings bar is higher in the dom tree than the selection indicators
-    // as we want to be able to render the settings bar wider than the screen,
-    // or outside the screen.
-    // Therefore we use the clip root rather than the app root to determine
-    // its position.
-    const device = document.getElementById("clip-root")
-    if (element && self) {
-      // Batch reads to minimize reflow
-      const deviceBounds = device.getBoundingClientRect()
-      const elBounds = element.getBoundingClientRect()
-      const width = self.offsetWidth
-      const height = self.offsetHeight
-      const { scrollX, scrollY, innerWidth } = window
+    // Start observing if required
+    if (!observing) {
+      startObserving(domBoundary)
+    }
 
-      // Read grid metadata from data attributes
-      if (insideGrid) {
-        if (mobile) {
-          gridHAlign = element.dataset.gridMobileHAlign
-          gridVAlign = element.dataset.gridMobileVAlign
-        } else {
-          gridHAlign = element.dataset.gridDesktopHAlign
-          gridVAlign = element.dataset.gridDesktopVAlign
-        }
-      }
+    // Batch reads to minimize reflow
+    const deviceBounds = deviceEl.getBoundingClientRect()
+    const elBounds = domBoundary.getBoundingClientRect()
+    const width = self.offsetWidth
+    const height = self.offsetHeight
+    const { scrollX, scrollY, innerWidth } = window
 
-      // Vertically, always render above unless no room, then render inside
-      let newTop = elBounds.top + scrollY - verticalOffset - height
-      if (newTop < deviceBounds.top - 50) {
-        newTop = deviceBounds.top - 50
-      }
-      if (newTop < 0) {
-        newTop = 0
-      }
-      const deviceBottom = deviceBounds.top + deviceBounds.height
-      if (newTop > deviceBottom - 44) {
-        newTop = deviceBottom - 44
+    // Read grid metadata from data attributes
+    if (insideGrid) {
+      if (mobile) {
+        gridHAlign = domBoundary.dataset.gridMobileHAlign
+        gridVAlign = domBoundary.dataset.gridMobileVAlign
+      } else {
+        gridHAlign = domBoundary.dataset.gridDesktopHAlign
+        gridVAlign = domBoundary.dataset.gridDesktopVAlign
       }
+    }
 
-      //If element is at the very top of the screen, put the bar below the element
-      if (elBounds.top < elBounds.height && elBounds.height < 80) {
-        newTop = elBounds.bottom + verticalOffset
-      }
+    // Vertically, always render above unless no room, then render inside
+    let newTop = elBounds.top + scrollY - verticalOffset - height
+    if (newTop < deviceBounds.top - 50) {
+      newTop = deviceBounds.top - 50
+    }
+    if (newTop < 0) {
+      newTop = 0
+    }
+    const deviceBottom = deviceBounds.top + deviceBounds.height
+    if (newTop > deviceBottom - 44) {
+      newTop = deviceBottom - 44
+    }
 
-      // Horizontally, try to center first.
-      // Failing that, render to left edge of component.
-      // Failing that, render to right edge of component,
-      // Failing that, render to window left edge and accept defeat.
-      let elCenter = elBounds.left + scrollX + elBounds.width / 2
-      let newLeft = elCenter - width / 2
+    //If element is at the very top of the screen, put the bar below the element
+    if (elBounds.top < elBounds.height && elBounds.height < 80) {
+      newTop = elBounds.bottom + verticalOffset
+    }
+
+    // Horizontally, try to center first.
+    // Failing that, render to left edge of component.
+    // Failing that, render to right edge of component,
+    // Failing that, render to window left edge and accept defeat.
+    let elCenter = elBounds.left + scrollX + elBounds.width / 2
+    let newLeft = elCenter - width / 2
+    if (newLeft < 0 || newLeft + width > innerWidth) {
+      newLeft = elBounds.left + scrollX - horizontalOffset
       if (newLeft < 0 || newLeft + width > innerWidth) {
-        newLeft = elBounds.left + scrollX - horizontalOffset
+        newLeft = elBounds.right + scrollX - width + horizontalOffset
         if (newLeft < 0 || newLeft + width > innerWidth) {
-          newLeft = elBounds.right + scrollX - width + horizontalOffset
-          if (newLeft < 0 || newLeft + width > innerWidth) {
-            newLeft = horizontalOffset
-          }
+          newLeft = horizontalOffset
         }
       }
-
-      // Only update state when things changes to minimize renders
-      if (Math.round(newTop) !== Math.round(top)) {
-        top = newTop
-      }
-      if (Math.round(newLeft) !== Math.round(left)) {
-        left = newLeft
-      }
-
-      measured = true
     }
+
+    // Only update state when things changes to minimize renders
+    if (Math.round(newTop) !== Math.round(top)) {
+      top = newTop
+    }
+    if (Math.round(newLeft) !== Math.round(left)) {
+      left = newLeft
+    }
+    measured = true
   }
   const debouncedUpdate = Utils.domDebounce(updatePosition)
 
-  const observeComputedStyles = id => {
-    observer?.disconnect()
-    const node = document.getElementsByClassName(`${id}-dom`)[0]?.parentNode
-    if (node) {
-      observer = new MutationObserver(updatePosition)
-      observer.observe(node, {
-        attributes: true,
-        attributeFilter: ["style"],
-        childList: false,
-        subtree: false,
-      })
-    }
-  }
-
   onMount(() => {
+    deviceEl = document.getElementById("clip-root")
     debouncedUpdate()
     interval = setInterval(debouncedUpdate, 100)
     document.addEventListener("scroll", debouncedUpdate, true)
@@ -172,7 +186,7 @@
   onDestroy(() => {
     clearInterval(interval)
     document.removeEventListener("scroll", debouncedUpdate, true)
-    observer?.disconnect()
+    reset()
   })
 </script>
 
@@ -190,7 +204,7 @@
         icon="AlignLeft"
         title="Align left"
         active={gridHAlign === "start"}
-        {componentId}
+        componentId={id}
       />
       <GridStylesButton
         style={gridHAlignVar}
@@ -198,7 +212,7 @@
         icon="AlignCenter"
         title="Align center"
         active={gridHAlign === "center"}
-        {componentId}
+        componentId={id}
       />
       <GridStylesButton
         style={gridHAlignVar}
@@ -206,7 +220,7 @@
         icon="AlignRight"
         title="Align right"
         active={gridHAlign === "end"}
-        {componentId}
+        componentId={id}
       />
       <GridStylesButton
         style={gridHAlignVar}
@@ -214,7 +228,7 @@
         icon="MoveLeftRight"
         title="Stretch horizontally"
         active={gridHAlign === "stretch"}
-        {componentId}
+        componentId={id}
       />
       <div class="divider" />
       <GridStylesButton
@@ -223,7 +237,7 @@
         icon="AlignTop"
         title="Align top"
         active={gridVAlign === "start"}
-        {componentId}
+        componentId={id}
       />
       <GridStylesButton
         style={gridVAlignVar}
@@ -231,7 +245,7 @@
         icon="AlignMiddle"
         title="Align middle"
         active={gridVAlign === "center"}
-        {componentId}
+        componentId={id}
       />
       <GridStylesButton
         style={gridVAlignVar}
@@ -239,7 +253,7 @@
         icon="AlignBottom"
         title="Align bottom"
         active={gridVAlign === "end"}
-        {componentId}
+        componentId={id}
       />
       <GridStylesButton
         style={gridVAlignVar}
@@ -247,7 +261,7 @@
         icon="MoveUpDown"
         title="Stretch vertically"
         active={gridVAlign === "stretch"}
-        {componentId}
+        componentId={id}
       />
       <div class="divider" />
     {/if}

From 25ff092da291c50da31f0e72d94eff9956ee7c57 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 12 Aug 2024 14:54:39 +0100
Subject: [PATCH 078/112] Simplify some utils

---
 .../src/components/preview/GridDNDHandler.svelte | 16 +++++-----------
 .../src/components/preview/IndicatorSet.svelte   |  6 +-----
 packages/client/src/utils/grid.js                | 10 ----------
 3 files changed, 6 insertions(+), 26 deletions(-)

diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index a5ff8e0c27..cfcc2892af 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -40,12 +40,6 @@
   // Sugar for a combination of both min and max
   const minMax = (value, min, max) => Math.min(max, Math.max(min, value))
 
-  // Util to get the inner DOM node by a component ID
-  const getDOMNode = id => {
-    const component = document.getElementsByClassName(id)[0]
-    return Array.from(component?.children || [])[0]
-  }
-
   const enrichComponentStyles = styles => {
     let clone = { ...styles }
     if (styles) {
@@ -137,16 +131,16 @@
     }
 
     // Find grid parent and read from DOM
-    const domComponent = getDOMNode(id)
-    const domGrid = getGridParent(domComponent)
+    const domComponent = document.getElementsByClassName(id)[0]
+    const domGrid = domComponent?.closest(".grid")
     if (!domGrid) {
       return
     }
-    const styles = getComputedStyle(domComponent.parentNode)
+    const styles = getComputedStyle(domComponent)
 
     // Show as active
     builderStore.actions.selectComponent(id)
-    domComponent.parentNode.classList.add("dragging")
+    domComponent.classList.add("dragging")
     domGrid.classList.add("highlight")
 
     // Update state
@@ -187,7 +181,7 @@
     const { id, domTarget, domGrid, domComponent } = dragInfo
 
     // Reset DOM
-    domComponent.parentNode.classList.remove("dragging")
+    domComponent.classList.remove("dragging")
     domGrid.classList.remove("highlight")
     domTarget.removeEventListener("dragend", stopDragging)
 
diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index de7fc0f66c..af709d24ba 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -70,10 +70,6 @@
     }
   }
 
-  const checkInsideGrid = id => {
-    return isGridChild(document.getElementsByClassName(id)[0])
-  }
-
   const createIntersectionCallback = idx => entries => {
     if (callbackCount >= observers.length) {
       return
@@ -117,7 +113,7 @@
 
     // Check if we're inside a grid
     if (allowResizeAnchors) {
-      nextState.insideGrid = checkInsideGrid(componentId)
+      nextState.insideGrid = parents[0]?.dataset.insideGrid === "true"
     }
 
     // Get text to display
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index a7ca3e5286..afce01bbaa 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -52,16 +52,6 @@ export const isGridEvent = e => {
   )
 }
 
-// Determines whether a DOM element is an immediate child of a grid
-export const isGridChild = node => {
-  return node?.parentNode.classList.contains("grid")
-}
-
-// Gets the component ID of the closest parent grid
-export const getGridParent = node => {
-  return node?.parentNode?.closest(".grid")
-}
-
 // Svelte action to apply required class names and styles to our component
 // wrappers
 export const gridLayout = (node, metadata) => {

From 2f3a7018ae56d804a5203c6154a8128d96a3817e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 12 Aug 2024 15:29:03 +0100
Subject: [PATCH 079/112] More tidy up

---
 .../components/preview/GridDNDHandler.svelte  |  8 +-
 .../components/preview/IndicatorSet.svelte    | 86 +++++++++----------
 .../src/components/preview/SettingsBar.svelte |  3 +-
 3 files changed, 44 insertions(+), 53 deletions(-)

diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index cfcc2892af..1d566f7416 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -3,13 +3,7 @@
   import { builderStore, componentStore } from "stores"
   import { Utils, memo } from "@budibase/frontend-core"
   import { GridRowHeight } from "constants"
-  import {
-    isGridEvent,
-    getGridParent,
-    GridParams,
-    getGridVar,
-    Devices,
-  } from "utils/grid"
+  import { isGridEvent, GridParams, getGridVar, Devices } from "utils/grid"
 
   const context = getContext("context")
 
diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index af709d24ba..dfea20a45f 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -3,7 +3,6 @@
   import Indicator from "./Indicator.svelte"
   import { builderStore } from "stores"
   import { memo, Utils } from "@budibase/frontend-core"
-  import { isGridChild } from "utils/grid"
 
   export let componentId = null
   export let color = null
@@ -14,7 +13,7 @@
   // Offset = 6 (clip-root padding) - 1 (half the border thickness)
   const config = memo($$props)
   const errorColor = "var(--spectrum-global-color-static-red-600)"
-  const observer = new MutationObserver(() => debouncedUpdate())
+  const mutationObserver = new MutationObserver(() => debouncedUpdate())
   const defaultState = () => ({
     // Cached props
     componentId,
@@ -33,12 +32,13 @@
 
   let interval
   let state = defaultState()
-  let observing = false
+  let observingMutations = false
   let updating = false
-  let observers = []
+  let intersectionObservers = []
   let callbackCount = 0
   let nextState
 
+  $: componentId, reset()
   $: visibleIndicators = state.indicators.filter(x => x.visible)
   $: offset = $builderStore.inBuilder ? 5 : -1
   $: config.set({
@@ -52,22 +52,18 @@
   // Update position when any props change
   $: $config, debouncedUpdate()
 
-  // Observe style changes
-  $: observeChanges(componentId)
+  const reset = () => {
+    mutationObserver.disconnect()
+    observingMutations = false
+    updating = false
+  }
 
-  const observeChanges = id => {
-    observer.disconnect()
-    observing = false
-    const node = document.getElementsByClassName(id)[0]
-    if (node) {
-      observer.observe(node, {
-        attributes: true,
-        attributeFilter: ["style"],
-        childList: false,
-        subtree: false,
-      })
-      observing = true
-    }
+  const observeMutations = element => {
+    mutationObserver.observe(element, {
+      attributes: true,
+      attributeFilter: ["style"],
+    })
+    observingMutations = true
   }
 
   const createIntersectionCallback = idx => entries => {
@@ -94,37 +90,37 @@
       state = defaultState()
       return
     }
-    const parents = document.getElementsByClassName(componentId)
-    if (!parents.length) {
+    let elements = document.getElementsByClassName(componentId)
+    if (!elements.length) {
       state = defaultState()
       return
     }
     updating = true
     callbackCount = 0
-    observers.forEach(o => o.disconnect())
-    observers = []
+    intersectionObservers.forEach(o => o.disconnect())
+    intersectionObservers = []
     nextState = defaultState()
 
-    // Start observing if this is the first time we've seen our component
-    // in the DOM
-    if (!observing) {
-      observeChanges(componentId)
+    // Start observing mutations if this is the first time we've seen our
+    // component in the DOM
+    if (!observingMutations) {
+      observeMutations(elements[0])
     }
 
     // Check if we're inside a grid
     if (allowResizeAnchors) {
-      nextState.insideGrid = parents[0]?.dataset.insideGrid === "true"
+      nextState.insideGrid = elements[0]?.dataset.insideGrid === "true"
     }
 
     // Get text to display
-    nextState.text = parents[0].dataset.name
+    nextState.text = elements[0].dataset.name
     if (nextState.prefix) {
       nextState.text = `${nextState.prefix} ${nextState.text}`
     }
-    if (parents[0].dataset.icon) {
-      nextState.icon = parents[0].dataset.icon
+    if (elements[0].dataset.icon) {
+      nextState.icon = elements[0].dataset.icon
     }
-    nextState.error = parents[0].classList.contains("error")
+    nextState.error = elements[0].classList.contains("error")
 
     // Batch reads to minimize reflow
     const scrollX = window.scrollX
@@ -132,22 +128,24 @@
 
     // Extract valid children
     // Sanity limit of active indicators
-    const className = nextState.insideGrid ? componentId : `${componentId}-dom`
-    const children = Array.from(document.getElementsByClassName(className))
+    if (!nextState.insideGrid) {
+      elements = document.getElementsByClassName(`${componentId}-dom`)
+    }
+    elements = Array.from(elements)
       .filter(x => x != null)
       .slice(0, 100)
-    const multi = children.length > 1
+    const multi = elements.length > 1
 
     // If there aren't any nodes then reset
-    if (!children.length) {
+    if (!elements.length) {
       state = defaultState()
       return
     }
 
     const device = document.getElementById("app-root")
     const deviceBounds = device.getBoundingClientRect()
-    nextState.indicators = children.map((child, idx) => {
-      const elBounds = child.getBoundingClientRect()
+    nextState.indicators = elements.map((element, idx) => {
+      const elBounds = element.getBoundingClientRect()
       let indicator = {
         top: Math.round(elBounds.top + scrollY - deviceBounds.top + offset),
         left: Math.round(elBounds.left + scrollX - deviceBounds.left + offset),
@@ -160,15 +158,15 @@
       // observer to determine whether each indicator should be visible
       if (multi) {
         const callback = createIntersectionCallback(idx)
-        const observer = new IntersectionObserver(callback, {
+        const intersectionObserver = new IntersectionObserver(callback, {
           threshold: 1,
           root: device,
         })
-        observer.observe(child)
-        observers.push(observer)
+        intersectionObserver.observe(element)
+        intersectionObservers.push(intersectionObserver)
         indicator.visible = false
-        indicator.insideSidePanel = !!child.closest(".side-panel")
-        indicator.insideModal = !!child.closest(".modal-content")
+        indicator.insideSidePanel = !!element.closest(".side-panel")
+        indicator.insideModal = !!element.closest(".modal-content")
       }
 
       return indicator
@@ -189,7 +187,7 @@
   })
 
   onDestroy(() => {
-    observer.disconnect()
+    mutationObserver.disconnect()
     clearInterval(interval)
     document.removeEventListener("scroll", debouncedUpdate, true)
   })
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index 09706726bb..ec861ab5b4 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -22,7 +22,6 @@
   let insideGrid = false
   let gridHAlign
   let gridVAlign
-  let deviceEl
 
   $: id = $builderStore.selectedComponentId
   $: id, reset()
@@ -114,6 +113,7 @@
     }
 
     // Batch reads to minimize reflow
+    const deviceEl = document.getElementById("clip-root")
     const deviceBounds = deviceEl.getBoundingClientRect()
     const elBounds = domBoundary.getBoundingClientRect()
     const width = self.offsetWidth
@@ -177,7 +177,6 @@
   const debouncedUpdate = Utils.domDebounce(updatePosition)
 
   onMount(() => {
-    deviceEl = document.getElementById("clip-root")
     debouncedUpdate()
     interval = setInterval(debouncedUpdate, 100)
     document.addEventListener("scroll", debouncedUpdate, true)

From d6f33b219101508e4883b8390b5c56570873a917 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 12 Aug 2024 16:13:47 +0100
Subject: [PATCH 080/112] Change how z-index is applied to the dragged element

---
 .../src/components/app/container/GridContainer.svelte |  5 ++++-
 .../src/components/preview/GridDNDHandler.svelte      | 11 +----------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 39358484a6..6cc95e286e 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -150,7 +150,7 @@
     display: grid;
     gap: 0;
     grid-template-rows: repeat(var(--rows), calc(var(--row-size) * 1px));
-    grid-template-columns: repeat(var(--cols), 1fr);
+    grid-template-columns: repeat(var(--cols), calc(var(--col-size) * 1px));
     position: relative;
   }
   .underlay {
@@ -185,6 +185,9 @@
     outline: 2px solid var(--spectrum-global-color-static-blue-200);
     pointer-events: none !important;
   }
+  :global(.grid.highlight > .component.dragging) {
+    z-index: 999 !important;
+  }
 
   /* Ensure all top level children have grid styles applied */
   .grid :global(> .component) {
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 1d566f7416..db19c460c1 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -29,20 +29,11 @@
 
   // Set ephemeral styles
   $: instance = componentStore.actions.getComponentInstance(id)
-  $: $instance?.setEphemeralStyles(enrichComponentStyles($styles))
+  $: $instance?.setEphemeralStyles($styles)
 
   // Sugar for a combination of both min and max
   const minMax = (value, min, max) => Math.min(max, Math.max(min, value))
 
-  const enrichComponentStyles = styles => {
-    let clone = { ...styles }
-    if (styles) {
-      clone["z-index"] = 999
-      clone["pointer-events"] = "none"
-    }
-    return clone
-  }
-
   const processEvent = Utils.domDebounce((mouseX, mouseY) => {
     if (!dragInfo?.grid) {
       return

From 96882e7eca0309a0da43693e2bfb86f69377bcd8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 12 Aug 2024 19:27:33 +0100
Subject: [PATCH 081/112] Improve performance of styleable util

---
 packages/client/src/utils/styleable.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index dc6e8f5e26..0f484a9ab9 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -5,11 +5,11 @@ import { builderStore } from "stores"
  */
 export const buildStyleString = (styleObject, customStyles) => {
   let str = ""
-  Object.entries(styleObject || {}).forEach(([style, value]) => {
-    if (style && value != null) {
-      str += `${style}: ${value}; `
+  for (let key of Object.keys(styleObject || {})) {
+    if (styleObject[key] != null) {
+      str += `${key}:${styleObject[key]};`
     }
-  })
+  }
   return str + (customStyles || "")
 }
 

From ead4be7b88bc3052c78e8ded4fd1cb5c2221b627 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 13 Aug 2024 09:09:53 +0100
Subject: [PATCH 082/112] Add padding at bottom of grid for screen level grids

---
 packages/client/src/components/Screen.svelte        |  2 +-
 .../components/app/container/GridContainer.svelte   | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/Screen.svelte b/packages/client/src/components/Screen.svelte
index 3c8fcf97e3..2d62b2f810 100644
--- a/packages/client/src/components/Screen.svelte
+++ b/packages/client/src/components/Screen.svelte
@@ -14,7 +14,7 @@
 
   // Get the screen definition for the current route
   $: screen = $screenStore.activeScreen
-  $: screenDefinition = { cols: 24, rows: 24, ...screen?.props }
+  $: screenDefinition = { ...screen?.props, addEmptyRows: true }
   $: onLoadActions.set(screen?.onLoad)
   $: runOnLoadActions($onLoadActions, params)
 
diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 6cc95e286e..d14108e178 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -4,6 +4,8 @@
   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")
@@ -16,7 +18,7 @@
   let mounted = false
   let styles = memo({})
 
-  $: requiredRows = calculateRequiredRows($children, mobile)
+  $: requiredRows = calculateRequiredRows($children, mobile, addEmptyRows)
   $: requiredHeight = requiredRows * GridRowHeight
   $: availableRows = Math.floor(height / GridRowHeight)
   $: rows = Math.max(requiredRows, availableRows)
@@ -39,7 +41,7 @@
 
   // Calculates the minimum number of rows required to render all child
   // components, on a certain device type
-  const calculateRequiredRows = (children, mobile) => {
+  const calculateRequiredRows = (children, mobile, addEmptyRows) => {
     const key = mobile ? "mobileRowEnd" : "desktopRowEnd"
     let max = 2
     for (let id of Object.keys(children)) {
@@ -47,7 +49,12 @@
         max = children[id][key]
       }
     }
-    return max - 1
+    let rows = max - 1
+    if (addEmptyRows) {
+      return Math.ceil((rows + 10) / 10) * 10
+    } else {
+      return rows
+    }
   }
 
   // Stores metadata about a child node as constraints for determining grid size

From 73cc871a5eb25db32c6687c624a4f7504ab3fb63 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 13 Aug 2024 09:14:42 +0100
Subject: [PATCH 083/112] Avoid name clashing

---
 .../src/components/app/container/GridContainer.svelte      | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index d14108e178..3c56f9517c 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -13,7 +13,6 @@
   let width
   let height
   let ref
-  let rows = 1
   let children = writable({})
   let mounted = false
   let styles = memo({})
@@ -49,11 +48,11 @@
         max = children[id][key]
       }
     }
-    let rows = max - 1
+    let requiredRows = max - 1
     if (addEmptyRows) {
-      return Math.ceil((rows + 10) / 10) * 10
+      return Math.ceil((requiredRows + 10) / 10) * 10
     } else {
-      return rows
+      return requiredRows
     }
   }
 

From 78953848bbfd0deb20846e2c45e549532b8984e3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 13 Aug 2024 09:19:16 +0100
Subject: [PATCH 084/112] Fix variable name error in indicator sets

---
 packages/client/src/components/preview/IndicatorSet.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index dfea20a45f..4af1224622 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -67,14 +67,14 @@
   }
 
   const createIntersectionCallback = idx => entries => {
-    if (callbackCount >= observers.length) {
+    if (callbackCount >= intersectionObservers.length) {
       return
     }
     nextState.indicators[idx].visible =
       nextState.indicators[idx].insideModal ||
       nextState.indicators[idx].insideSidePanel ||
       entries[0].isIntersecting
-    if (++callbackCount === observers.length) {
+    if (++callbackCount === intersectionObservers.length) {
       state = nextState
       updating = false
     }

From 0875d0c5e1aebef226d8285a8fa82597aacc811f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 13 Aug 2024 09:52:10 +0100
Subject: [PATCH 085/112] Only show empty rows in grid layouts when in the
 builder

---
 .../src/components/app/container/GridContainer.svelte    | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 3c56f9517c..f332e197c3 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -17,7 +17,12 @@
   let mounted = false
   let styles = memo({})
 
-  $: requiredRows = calculateRequiredRows($children, mobile, addEmptyRows)
+  $: inBuilder = $builderStore.inBuilder
+  $: requiredRows = calculateRequiredRows(
+    $children,
+    mobile,
+    addEmptyRows && inBuilder
+  )
   $: requiredHeight = requiredRows * GridRowHeight
   $: availableRows = Math.floor(height / GridRowHeight)
   $: rows = Math.max(requiredRows, availableRows)
@@ -133,7 +138,7 @@
   data-cols={GridColumns}
   data-col-size={colSize}
 >
-  {#if $builderStore.inBuilder}
+  {#if inBuilder}
     <div class="underlay">
       {#each { length: GridColumns * rows } as _, idx}
         <div class="placeholder" class:first-col={idx % GridColumns === 0} />

From 7a9730b120817a004a3039157591de408760a24e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 14 Aug 2024 09:24:03 +0100
Subject: [PATCH 086/112] Fix ephemeral styles not clearing properly

---
 packages/client/src/components/Component.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 3d081f5a61..0dcf93a5dc 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -262,6 +262,9 @@
       lastInstanceKey = instanceKey
     }
 
+    // Reset ephemeral state
+    ephemeralStyles = null
+
     // Pull definition and constructor
     const component = instance._component
     constructor = componentStore.actions.getComponentConstructor(component)

From 6baf784f4aed847e1957fd10c06ca212ed73192c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 14 Aug 2024 09:59:02 +0100
Subject: [PATCH 087/112] Ensure images are contained when used inside grids

---
 .../src/components/app/container/GridContainer.svelte       | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index f332e197c3..088c41b57b 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -255,4 +255,10 @@
     flex: 1 1 0 !important;
     height: 0 !important;
   }
+
+  /* Grid specific CSS overrides for certain components */
+  .grid :global(> .component > img) {
+    object-fit: contain;
+    max-height: 100%;
+  }
 </style>

From d36fef5c86ae9337d1ab0e9299d97adf394c2e93 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 14 Aug 2024 10:09:59 +0100
Subject: [PATCH 088/112] Fix indicators around modals and side panels when
 used inside grids

---
 packages/client/manifest.json                 | 88 +++++++++++++++----
 .../client/src/components/Component.svelte    |  3 +-
 .../app/container/GridContainer.svelte        |  2 +-
 packages/client/src/utils/grid.js             | 28 +++++-
 4 files changed, 99 insertions(+), 22 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index f232318c53..9851fd1155 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -18,14 +18,37 @@
     "numberLike": {
       "supported": ["number", "boolean"],
       "partialSupport": [
-        { "type": "longform", "message": "stringAsNumber" },
-        { "type": "string", "message": "stringAsNumber" },
-        { "type": "bigint", "message": "stringAsNumber" },
-        { "type": "options", "message": "stringAsNumber" },
-        { "type": "formula", "message": "stringAsNumber" },
-        { "type": "datetime", "message": "dateAsNumber" }
+        {
+          "type": "longform",
+          "message": "stringAsNumber"
+        },
+        {
+          "type": "string",
+          "message": "stringAsNumber"
+        },
+        {
+          "type": "bigint",
+          "message": "stringAsNumber"
+        },
+        {
+          "type": "options",
+          "message": "stringAsNumber"
+        },
+        {
+          "type": "formula",
+          "message": "stringAsNumber"
+        },
+        {
+          "type": "datetime",
+          "message": "dateAsNumber"
+        }
       ],
-      "unsupported": [{ "type": "json", "message": "jsonPrimitivesOnly" }]
+      "unsupported": [
+        {
+          "type": "json",
+          "message": "jsonPrimitivesOnly"
+        }
+      ]
     },
     "stringLike": {
       "supported": [
@@ -37,19 +60,47 @@
         "boolean",
         "datetime"
       ],
-      "unsupported": [{ "type": "json", "message": "jsonPrimitivesOnly" }]
+      "unsupported": [
+        {
+          "type": "json",
+          "message": "jsonPrimitivesOnly"
+        }
+      ]
     },
     "datetimeLike": {
       "supported": ["datetime"],
       "partialSupport": [
-        { "type": "longform", "message": "stringAsDate" },
-        { "type": "string", "message": "stringAsDate" },
-        { "type": "options", "message": "stringAsDate" },
-        { "type": "formula", "message": "stringAsDate" },
-        { "type": "bigint", "message": "stringAsDate" },
-        { "type": "number", "message": "numberAsDate" }
+        {
+          "type": "longform",
+          "message": "stringAsDate"
+        },
+        {
+          "type": "string",
+          "message": "stringAsDate"
+        },
+        {
+          "type": "options",
+          "message": "stringAsDate"
+        },
+        {
+          "type": "formula",
+          "message": "stringAsDate"
+        },
+        {
+          "type": "bigint",
+          "message": "stringAsDate"
+        },
+        {
+          "type": "number",
+          "message": "numberAsDate"
+        }
       ],
-      "unsupported": [{ "type": "json", "message": "jsonPrimitivesOnly" }]
+      "unsupported": [
+        {
+          "type": "json",
+          "message": "jsonPrimitivesOnly"
+        }
+      ]
     }
   },
   "layout": {
@@ -4292,7 +4343,10 @@
             "label": "High",
             "value": 3136
           },
-          { "label": "Custom", "value": "custom" }
+          {
+            "label": "Custom",
+            "value": "custom"
+          }
         ]
       },
       {
@@ -7148,6 +7202,7 @@
     "name": "Side Panel",
     "icon": "RailRight",
     "hasChildren": true,
+    "ignoresLayout": true,
     "illegalChildren": ["section", "sidepanel", "modal"],
     "showEmptyState": false,
     "draggable": false,
@@ -7171,6 +7226,7 @@
     "icon": "MBox",
     "hasChildren": true,
     "illegalChildren": ["section", "modal", "sidepanel"],
+    "ignoresLayout": true,
     "showEmptyState": false,
     "draggable": false,
     "info": "Modals are hidden by default. They will only be revealed when triggered by the 'Open Modal' action.",
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 0dcf93a5dc..12dfaaf6d3 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -209,8 +209,9 @@
   // Metadata to pass into grid action to apply CSS
   let gridMetadata = memo()
   $: gridMetadata.set({
-    active:
+    insideGrid:
       parent?._component.endsWith("/container") && parent?.layout === "grid",
+    ignoresLayout: definition.ignoresLayout === true,
     id,
     interactive,
     styles: normalStyles,
diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 088c41b57b..1f68926658 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -201,7 +201,7 @@
   }
 
   /* Ensure all top level children have grid styles applied */
-  .grid :global(> .component) {
+  .grid :global(> .component:not(.ignores-layout)) {
     display: flex;
     overflow: auto;
     pointer-events: all;
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index afce01bbaa..b9b08a28a6 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -59,9 +59,24 @@ export const gridLayout = (node, metadata) => {
 
   // Applies the required listeners, CSS and classes to a component DOM node
   const applyMetadata = metadata => {
-    const { id, styles, interactive, errored, definition, draggable, active } =
-      metadata
-    if (!active) {
+    const {
+      id,
+      styles,
+      interactive,
+      errored,
+      definition,
+      draggable,
+      insideGrid,
+      ignoresLayout,
+    } = metadata
+    if (!insideGrid) {
+      return
+    }
+
+    // If this component ignores layout, flag it as such so that we can avoid
+    // selecting it later
+    if (ignoresLayout) {
+      node.classList.add("ignores-layout")
       return
     }
 
@@ -143,7 +158,12 @@ export const gridLayout = (node, metadata) => {
 
   // Removes the previously set up listeners
   const removeListeners = () => {
-    node.removeEventListener("click", selectComponent, false)
+    // By checking if this is defined we can avoid trying to remove event
+    // listeners on every component
+    if (selectComponent) {
+      node.removeEventListener("click", selectComponent, false)
+      selectComponent = null
+    }
   }
 
   applyMetadata(metadata)

From 83e7b2d3e2fc3d8f46c8f567af8125738ec5ef8b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 14 Aug 2024 10:16:01 +0100
Subject: [PATCH 089/112] Move side panel into correct DOM position

---
 .../client/src/components/app/Layout.svelte   | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index a1ce77df72..76634d2df3 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -322,20 +322,22 @@
         <slot />
       </div>
     </div>
-  </div>
-  <div
-    id="side-panel-container"
-    class:open={$sidePanelStore.open}
-    use:clickOutside={autoCloseSidePanel ? sidePanelStore.actions.close : null}
-    class:builder={$builderStore.inBuilder}
-  >
-    <div class="side-panel-header">
-      <Icon
-        color="var(--spectrum-global-color-gray-600)"
-        name="RailRightClose"
-        hoverable
-        on:click={sidePanelStore.actions.close}
-      />
+    <div
+      id="side-panel-container"
+      class:open={$sidePanelStore.open}
+      use:clickOutside={autoCloseSidePanel
+        ? sidePanelStore.actions.close
+        : null}
+      class:builder={$builderStore.inBuilder}
+    >
+      <div class="side-panel-header">
+        <Icon
+          color="var(--spectrum-global-color-gray-600)"
+          name="RailRightClose"
+          hoverable
+          on:click={sidePanelStore.actions.close}
+        />
+      </div>
     </div>
   </div>
 </div>

From f99ae6b96efffcc9ed99c27dd2a00be73a8bbcee Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 14 Aug 2024 10:26:44 +0100
Subject: [PATCH 090/112] Ensure modals are rendered in the correct DOM
 position

---
 packages/client/src/components/ClientApp.svelte  | 3 ---
 packages/client/src/components/app/Layout.svelte | 1 +
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 118aa483ab..516f505d21 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -235,9 +235,6 @@
                               />
                             {/key}
 
-                            <!-- Modal container to ensure they sit on top -->
-                            <div class="modal-container" />
-
                             <!-- Layers on top of app -->
                             <NotificationDisplay />
                             <ConfirmationDisplay />
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 76634d2df3..2426aeaed9 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -339,6 +339,7 @@
         />
       </div>
     </div>
+    <div class="modal-container" />
   </div>
 </div>
 

From b62371d1be8d5c676be18caf585b5183a3743670 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 14 Aug 2024 10:59:06 +0100
Subject: [PATCH 091/112] Allow moving grid components using the label

---
 packages/client/manifest.json                 | 28 +++++++++----------
 .../components/preview/GridDNDHandler.svelte  | 19 ++++++++-----
 .../src/components/preview/Indicator.svelte   | 17 +++++++++--
 packages/client/src/utils/grid.js             |  9 ++++--
 4 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 9851fd1155..db276df8bc 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -3040,7 +3040,7 @@
     "editable": true,
     "size": {
       "width": 400,
-      "height": 32
+      "height": 60
     },
     "settings": [
       {
@@ -3071,7 +3071,7 @@
     "editable": true,
     "size": {
       "width": 400,
-      "height": 32
+      "height": 60
     },
     "settings": [
       {
@@ -3207,7 +3207,7 @@
     "editable": true,
     "size": {
       "width": 400,
-      "height": 50
+      "height": 60
     },
     "settings": [
       {
@@ -3309,7 +3309,7 @@
     "editable": true,
     "size": {
       "width": 400,
-      "height": 50
+      "height": 60
     },
     "settings": [
       {
@@ -3395,7 +3395,7 @@
     "editable": true,
     "size": {
       "width": 400,
-      "height": 50
+      "height": 60
     },
     "settings": [
       {
@@ -3481,7 +3481,7 @@
     "editable": true,
     "size": {
       "width": 400,
-      "height": 50
+      "height": 60
     },
     "settings": [
       {
@@ -3695,7 +3695,7 @@
     "editable": true,
     "size": {
       "width": 400,
-      "height": 50
+      "height": 60
     },
     "settings": [
       {
@@ -3901,8 +3901,8 @@
     "editable": true,
     "requiredAncestors": ["form"],
     "size": {
-      "width": 20,
-      "height": 20
+      "width": 400,
+      "height": 60
     },
     "settings": [
       {
@@ -4028,7 +4028,7 @@
     "editable": true,
     "size": {
       "width": 400,
-      "height": 150
+      "height": 100
     },
     "settings": [
       {
@@ -4152,7 +4152,7 @@
     "editable": true,
     "size": {
       "width": 400,
-      "height": 50
+      "height": 60
     },
     "settings": [
       {
@@ -4270,7 +4270,7 @@
     "styles": ["size"],
     "size": {
       "width": 400,
-      "height": 50
+      "height": 60
     },
     "settings": [
       {
@@ -4430,7 +4430,7 @@
     "styles": ["size"],
     "size": {
       "width": 400,
-      "height": 50
+      "height": 60
     },
     "settings": [
       {
@@ -4785,7 +4785,7 @@
     "editable": true,
     "size": {
       "width": 400,
-      "height": 50
+      "height": 60
     },
     "settings": [
       {
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index db19c460c1..ad3a5a3ae1 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -3,7 +3,13 @@
   import { builderStore, componentStore } from "stores"
   import { Utils, memo } from "@budibase/frontend-core"
   import { GridRowHeight } from "constants"
-  import { isGridEvent, GridParams, getGridVar, Devices } from "utils/grid"
+  import {
+    isGridEvent,
+    GridParams,
+    getGridVar,
+    Devices,
+    GridDragModes,
+  } from "utils/grid"
 
   const context = getContext("context")
 
@@ -49,7 +55,7 @@
     let deltaX = Math.round(diffX / colSize)
     const diffY = mouseY - startY
     let deltaY = Math.round(diffY / GridRowHeight)
-    if (mode === "move") {
+    if (mode === GridDragModes.Move) {
       deltaX = minMax(deltaX, 1 - colStart, cols + 1 - colEnd)
       deltaY = Math.max(deltaY, 1 - rowStart)
       const newStyles = {
@@ -59,7 +65,7 @@
         [vars.rowEnd]: rowEnd + deltaY,
       }
       styles.set(newStyles)
-    } else if (mode === "resize") {
+    } else if (mode === GridDragModes.Resize) {
       let newStyles = {}
       if (side === "right") {
         newStyles[vars.colEnd] = Math.max(colEnd + deltaX, colStart + 1)
@@ -103,14 +109,13 @@
 
     // Extract state
     let mode, id, side
-    if (e.target.classList.contains("anchor")) {
-      // Handle resize
-      mode = "resize"
+    if (e.target.dataset.indicator === "true") {
+      mode = e.target.dataset.dragMode
       id = e.target.dataset.id
       side = e.target.dataset.side
     } else {
       // Handle move
-      mode = "move"
+      mode = GridDragModes.Move
       const component = e.target.closest(".component")
       id = component.dataset.id
     }
diff --git a/packages/client/src/components/preview/Indicator.svelte b/packages/client/src/components/preview/Indicator.svelte
index 112d392354..dce7945b29 100644
--- a/packages/client/src/components/preview/Indicator.svelte
+++ b/packages/client/src/components/preview/Indicator.svelte
@@ -1,5 +1,6 @@
 <script>
   import { Icon } from "@budibase/bbui"
+  import { GridDragModes } from "utils/grid"
 
   export let top
   export let left
@@ -38,7 +39,16 @@
   class:hCompact={width < 40}
 >
   {#if text || icon}
-    <div class="label" class:flipped class:line class:right={alignRight}>
+    <div
+      class="label"
+      class:flipped
+      class:line
+      class:right={alignRight}
+      draggable="true"
+      data-indicator="true"
+      data-drag-mode={GridDragModes.Move}
+      data-id={componentId}
+    >
       {#if icon}
         <Icon name={icon} size="S" color="white" />
       {/if}
@@ -52,8 +62,10 @@
   {#if showResizeAnchors}
     {#each AnchorSides as side}
       <div
-        draggable="true"
         class="anchor {side}"
+        draggable="true"
+        data-indicator="true"
+        data-drag-mode={GridDragModes.Resize}
         data-side={side}
         data-id={componentId}
       >
@@ -101,6 +113,7 @@
     justify-content: flex-start;
     align-items: center;
     gap: 6px;
+    pointer-events: all;
   }
   .label.line {
     transform: translateY(-50%);
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index b9b08a28a6..0cb6928b2d 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -38,17 +38,22 @@ export const Devices = {
   Mobile: "mobile",
 }
 
+export const GridDragModes = {
+  Resize: "resize",
+  Move: "move",
+}
+
 // Builds a CSS variable name for a certain piece of grid metadata
 export const getGridVar = (device, param) => `--grid-${device}-${param}`
 
 // Determines whether a JS event originated from immediately within a grid
 export const isGridEvent = e => {
   return (
+    e.target.dataset.indicator === "true" ||
     e.target
       .closest?.(".component")
       ?.parentNode.closest(".component")
-      ?.childNodes[0]?.classList?.contains("grid") ||
-    e.target.classList.contains("anchor")
+      ?.childNodes[0]?.classList?.contains("grid")
   )
 }
 

From a755fe7630759b34b3d2cb1af272ae28884cd358 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 14 Aug 2024 11:21:59 +0100
Subject: [PATCH 092/112] Allow quick duplicating via ctrl/cmd + drag

---
 .../[screenId]/_components/AppPreview.svelte      |  7 ++++++-
 packages/builder/src/stores/builder/components.js | 15 ++++++++-------
 .../src/components/preview/GridDNDHandler.svelte  |  5 +++++
 packages/client/src/stores/builder.js             |  8 ++++++--
 4 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index aed959b9ba..055ecd88e0 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -144,7 +144,12 @@
       const rootComponent = get(selectedScreen).props
       const component = findComponent(rootComponent, data.id)
       componentStore.copy(component)
-      await componentStore.paste(component)
+      await componentStore.paste(
+        component,
+        data.mode,
+        null,
+        data.selectComponent
+      )
     } else if (type === "preview-loaded") {
       // Wait for this event to show the client library if intelligent
       // loading is supported
diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js
index 21ea255b74..9c803bcd78 100644
--- a/packages/builder/src/stores/builder/components.js
+++ b/packages/builder/src/stores/builder/components.js
@@ -653,7 +653,7 @@ export class ComponentStore extends BudiStore {
    * @param {object} targetScreen
    * @returns
    */
-  async paste(targetComponent, mode, targetScreen) {
+  async paste(targetComponent, mode, targetScreen, selectComponent = true) {
     const state = get(this.store)
     if (!state.componentToPaste) {
       return
@@ -728,12 +728,13 @@ export class ComponentStore extends BudiStore {
     await screenStore.patch(patch, targetScreenId)
 
     // Select the new component
-    this.update(state => {
-      state.selectedScreenId = targetScreenId
-      state.selectedComponentId = newComponentId
-
-      return state
-    })
+    if (selectComponent) {
+      this.update(state => {
+        state.selectedScreenId = targetScreenId
+        state.selectedComponentId = newComponentId
+        return state
+      })
+    }
 
     componentTreeNodesStore.makeNodeVisible(newComponentId)
   }
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index ad3a5a3ae1..97b262562a 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -120,6 +120,11 @@
       id = component.dataset.id
     }
 
+    // If holding ctrl/cmd then leave behind a duplicate of this component
+    if (mode === GridDragModes.Move && (e.ctrlKey || e.metaKey)) {
+      builderStore.actions.duplicateComponent(id, "above", false)
+    }
+
     // Find grid parent and read from DOM
     const domComponent = document.getElementsByClassName(id)[0]
     const domGrid = domComponent?.closest(".grid")
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 9d99578532..faa37eddca 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -49,8 +49,12 @@ const createBuilderStore = () => {
     keyDown: (key, ctrlKey) => {
       eventStore.actions.dispatchEvent("key-down", { key, ctrlKey })
     },
-    duplicateComponent: id => {
-      eventStore.actions.dispatchEvent("duplicate-component", { id })
+    duplicateComponent: (id, mode = "below", selectComponent = true) => {
+      eventStore.actions.dispatchEvent("duplicate-component", {
+        id,
+        mode,
+        selectComponent,
+      })
     },
     deleteComponent: id => {
       eventStore.actions.dispatchEvent("delete-component", { id })

From 84db937cba14cbf2e9c52df3c0b172fb9dc35045 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 14 Aug 2024 12:51:32 +0100
Subject: [PATCH 093/112] Fix null refrence exception if definitions don't
 exist

---
 packages/client/src/components/Component.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 12dfaaf6d3..e793adff23 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -211,7 +211,7 @@
   $: gridMetadata.set({
     insideGrid:
       parent?._component.endsWith("/container") && parent?.layout === "grid",
-    ignoresLayout: definition.ignoresLayout === true,
+    ignoresLayout: definition?.ignoresLayout === true,
     id,
     interactive,
     styles: normalStyles,

From fedb592b92f89aa641134bab33a25f1274bf2f6a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 14 Aug 2024 12:56:45 +0100
Subject: [PATCH 094/112] Fix issue where grid styles are not reapplied when
 component visibility changes

---
 packages/client/src/components/Component.svelte | 7 +++----
 packages/client/src/utils/grid.js               | 4 ++--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index e793adff23..69ea0367ab 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -207,8 +207,7 @@
   }
 
   // Metadata to pass into grid action to apply CSS
-  let gridMetadata = memo()
-  $: gridMetadata.set({
+  $: gridMetadata = {
     insideGrid:
       parent?._component.endsWith("/container") && parent?.layout === "grid",
     ignoresLayout: definition?.ignoresLayout === true,
@@ -218,7 +217,7 @@
     draggable,
     definition,
     errored: errorState,
-  })
+  }
 
   // Update component context
   $: store.set({
@@ -674,7 +673,7 @@
     data-name={name}
     data-icon={icon}
     data-parent={$component.id}
-    use:gridLayout={$gridMetadata}
+    use:gridLayout={gridMetadata}
   >
     {#if errorState}
       <ComponentErrorState
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index 0cb6928b2d..d51f1c7058 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -92,8 +92,8 @@ export const gridLayout = (node, metadata) => {
     }
 
     // Determine default width and height of component
-    let width = errored ? 500 : definition.size?.width || 200
-    let height = errored ? 60 : definition.size?.height || 200
+    let width = errored ? 500 : definition?.size?.width || 200
+    let height = errored ? 60 : definition?.size?.height || 200
     width += 2 * GridSpacing
     height += 2 * GridSpacing
     let vars = {

From 33b68d6d548d41d50519c5cb77408b2e59d554b4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 14 Aug 2024 13:01:04 +0100
Subject: [PATCH 095/112] Lint

---
 packages/client/src/components/Component.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 69ea0367ab..8f24f2f330 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -40,7 +40,6 @@
     getActionDependentContextKeys,
   } from "../utils/buttonActions.js"
   import { gridLayout } from "utils/grid.js"
-  import { memo } from "@budibase/frontend-core"
 
   export let instance = {}
   export let parent = null

From 919c4d95c57bd0e3d58403cd29fdbe31abdc2258 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 14 Aug 2024 15:24:48 +0100
Subject: [PATCH 096/112] Fix issue with side panel position

---
 .../client/src/components/ClientApp.svelte    |  1 +
 .../client/src/components/app/Layout.svelte   | 34 +++++++++----------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 516f505d21..2f8ba36cf7 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -324,6 +324,7 @@
     justify-content: flex-start;
     align-items: stretch;
     overflow: hidden;
+    position: relative;
   }
 
   .error {
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 2426aeaed9..8ce651d173 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -322,25 +322,23 @@
         <slot />
       </div>
     </div>
-    <div
-      id="side-panel-container"
-      class:open={$sidePanelStore.open}
-      use:clickOutside={autoCloseSidePanel
-        ? sidePanelStore.actions.close
-        : null}
-      class:builder={$builderStore.inBuilder}
-    >
-      <div class="side-panel-header">
-        <Icon
-          color="var(--spectrum-global-color-gray-600)"
-          name="RailRightClose"
-          hoverable
-          on:click={sidePanelStore.actions.close}
-        />
-      </div>
-    </div>
-    <div class="modal-container" />
   </div>
+  <div
+    id="side-panel-container"
+    class:open={$sidePanelStore.open}
+    use:clickOutside={autoCloseSidePanel ? sidePanelStore.actions.close : null}
+    class:builder={$builderStore.inBuilder}
+  >
+    <div class="side-panel-header">
+      <Icon
+        color="var(--spectrum-global-color-gray-600)"
+        name="RailRightClose"
+        hoverable
+        on:click={sidePanelStore.actions.close}
+      />
+    </div>
+  </div>
+  <div class="modal-container" />
 </div>
 
 <style>

From 2afe040332de143fbcf2600f91396195a8a24140 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 14 Aug 2024 16:36:19 +0100
Subject: [PATCH 097/112] Update scrolling to selected component so that it
 works when adding components

---
 .../client/src/components/Component.svelte    | 31 ++++++++++++-------
 .../components/preview/GridDNDHandler.svelte  |  2 +-
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 8f24f2f330..d25daf7bf9 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <script>
-  import { getContext, setContext, onMount } from "svelte"
+  import { getContext, setContext, onMount, tick } from "svelte"
   import { writable, get } from "svelte/store"
   import {
     enrichProps,
@@ -206,9 +206,10 @@
   }
 
   // Metadata to pass into grid action to apply CSS
+  const insideGrid =
+    parent?._component.endsWith("/container") && parent?.layout === "grid"
   $: gridMetadata = {
-    insideGrid:
-      parent?._component.endsWith("/container") && parent?.layout === "grid",
+    insideGrid,
     ignoresLayout: definition?.ignoresLayout === true,
     id,
     interactive,
@@ -583,19 +584,22 @@
     }
   }
 
-  const scrollIntoView = () => {
-    // Don't scroll into view if we selected this component because we were
-    // starting dragging on it
-    if (get(dndIsDragging)) {
-      return
-    }
-    const node = document.getElementsByClassName(id)?.[0]?.children[0]
+  const scrollIntoView = async () => {
+    const className = insideGrid ? id : `${id}-dom`
+    const node = document.getElementsByClassName(className)[0]
     if (!node) {
       return
     }
-    node.style.scrollMargin = "100px"
+    // Don't scroll into view if we selected this component because we were
+    // starting dragging on it
+    if (
+      get(dndIsDragging) ||
+      (insideGrid && node.classList.contains("dragging"))
+    ) {
+      return
+    }
     node.scrollIntoView({
-      behavior: "smooth",
+      behavior: "instant",
       block: "nearest",
       inline: "start",
     })
@@ -642,6 +646,9 @@
         })
       }
     }
+
+    console.log("mounted")
+
     return () => {
       // Unregister component
       if (componentStore.actions.isComponentRegistered(id)) {
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 97b262562a..71cac69c88 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -134,9 +134,9 @@
     const styles = getComputedStyle(domComponent)
 
     // Show as active
-    builderStore.actions.selectComponent(id)
     domComponent.classList.add("dragging")
     domGrid.classList.add("highlight")
+    builderStore.actions.selectComponent(id)
 
     // Update state
     dragInfo = {

From 86628903cc842d8a507976d932da0cdfda3f0dd5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 14 Aug 2024 16:58:01 +0100
Subject: [PATCH 098/112] Remove console log

---
 packages/client/src/components/Component.svelte | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index d25daf7bf9..f35f06914d 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -646,9 +646,6 @@
         })
       }
     }
-
-    console.log("mounted")
-
     return () => {
       // Unregister component
       if (componentStore.actions.isComponentRegistered(id)) {

From cab82d2a7346d364aa5431ee5b2662f8858e1da7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 15 Aug 2024 09:33:49 +0100
Subject: [PATCH 099/112] Update markdown viewer to vertically align to the top
 by default

---
 packages/client/manifest.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index db276df8bc..7fe25f9dc1 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -6835,6 +6835,10 @@
       "width": 400,
       "height": 100
     },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "start"
+    },
     "settings": [
       {
         "type": "text",

From 0fc602dfc2b7da2e7e2725ec1ab252cd7002f8a4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 15 Aug 2024 09:38:56 +0100
Subject: [PATCH 100/112] Lint

---
 packages/client/src/components/Component.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index f35f06914d..7b87040c4f 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <script>
-  import { getContext, setContext, onMount, tick } from "svelte"
+  import { getContext, setContext, onMount } from "svelte"
   import { writable, get } from "svelte/store"
   import {
     enrichProps,

From 6783f9b4ee542b313cc0b5a204e0287a899aed00 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 15 Aug 2024 09:54:47 +0100
Subject: [PATCH 101/112] Reset grid position metadata when copying and pasting
 between screens

---
 .../builder/src/stores/builder/components.js     | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js
index 9c803bcd78..e7c4b9c412 100644
--- a/packages/builder/src/stores/builder/components.js
+++ b/packages/builder/src/stores/builder/components.js
@@ -619,6 +619,7 @@ export class ComponentStore extends BudiStore {
     this.update(state => {
       state.componentToPaste = cloneDeep(component)
       state.componentToPaste.isCut = cut
+      state.componentToPaste.screenId = get(screenStore).selectedScreenId
       return state
     })
 
@@ -677,8 +678,10 @@ export class ComponentStore extends BudiStore {
         return false
       }
       const cut = componentToPaste.isCut
+      const sourceScreenId = componentToPaste.screenId
       const originalId = componentToPaste._id
       delete componentToPaste.isCut
+      delete componentToPaste.screenId
 
       // Make new component unique if copying
       if (!cut) {
@@ -686,6 +689,19 @@ export class ComponentStore extends BudiStore {
       }
       newComponentId = componentToPaste._id
 
+      // Strip grid position metadata if pasting into a new screen, but keep
+      // alignment metadata
+      if (sourceScreenId && sourceScreenId !== screen._id) {
+        for (let style of Object.keys(componentToPaste._styles?.normal || {})) {
+          if (
+            style.startsWith("--grid") &&
+            (style.endsWith("-start") || style.endsWith("-end"))
+          ) {
+            delete componentToPaste._styles.normal[style]
+          }
+        }
+      }
+
       // Delete old component if cutting
       if (cut) {
         const parent = findComponentParent(screen.props, originalId)

From b575109fdc6aed3ad00336651b68cb093c1cbe7d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 15 Aug 2024 10:04:47 +0100
Subject: [PATCH 102/112] Fix possibility of updating wrong component styles
 when dragging in grids if you are too fast or have a slow server

---
 packages/client/src/components/preview/GridDNDHandler.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 71cac69c88..f173dfd960 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -182,7 +182,7 @@
 
     // Save changes
     if ($styles) {
-      await builderStore.actions.updateStyles($styles, id)
+      builderStore.actions.updateStyles($styles, id)
     }
 
     // Reset state

From 7ae21460f8313027236a80ddd3dd33b554bbf200 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 15 Aug 2024 10:40:54 +0100
Subject: [PATCH 103/112] Update row explorer block to stretch by default,
 enabling a height setting of 100% to work

---
 packages/client/manifest.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 7fe25f9dc1..5d5048e02b 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -7282,7 +7282,7 @@
     },
     "grid": {
       "hAlign": "stretch",
-      "vAlign": "start"
+      "vAlign": "stretch"
     },
     "settings": [
       {

From a022e026437c8b466dd3d8acf9a9fe6f3c8c8fc0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 15 Aug 2024 10:44:42 +0100
Subject: [PATCH 104/112] Update blank screens to use grid layout by default

---
 packages/builder/src/templates/blankScreen.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/templates/blankScreen.js b/packages/builder/src/templates/blankScreen.js
index 80735ef53a..43cabc92d7 100644
--- a/packages/builder/src/templates/blankScreen.js
+++ b/packages/builder/src/templates/blankScreen.js
@@ -1,7 +1,11 @@
 import { Screen } from "./Screen"
 
 const blankScreen = route => {
-  return new Screen().instanceName("New Screen").route(route).json()
+  return new Screen()
+    .instanceName("New Screen")
+    .customProps({ layout: "grid" })
+    .route(route)
+    .json()
 }
 
 export default blankScreen

From 991aff132f12767594ba651a588ae46b98e18244 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 15 Aug 2024 11:21:09 +0100
Subject: [PATCH 105/112] Don't strip grid CSS variables from styles, allowing
 block ejection to reference them

---
 packages/client/src/utils/grid.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index d51f1c7058..805fb429ba 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -120,8 +120,6 @@ export const gridLayout = (node, metadata) => {
       let mVar = getGridVar(Devices.Mobile, param)
       vars[dVar] = styles[dVar] || styles[mVar] || defaults[param]
       vars[mVar] = styles[mVar] || styles[dVar] || defaults[param]
-      delete styles[dVar]
-      delete styles[mVar]
     }
 
     // Apply some overrides depending on component state

From 39f7c28308d9705b0a1cd82ce8ce9f85e48ee26d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 15 Aug 2024 11:25:57 +0100
Subject: [PATCH 106/112] Revert max width nav to have reasonable padding

---
 packages/client/src/components/app/Layout.svelte | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 8ce651d173..04dbb9efda 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -410,9 +410,6 @@
     max-width: 100%;
     gap: var(--spacing-xl);
   }
-  .nav.size--max {
-    padding: calc(var(--grid-spacing) * 2px);
-  }
   .nav :global(.spectrum-Icon) {
     color: var(--navTextColor);
     opacity: 0.75;
@@ -507,6 +504,8 @@
   }
   .size--max {
     width: 100%;
+  }
+  .main.size--max {
     padding: 0;
   }
 

From 0252b024068970df1527312f0e2f3ec80726d3b2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 15 Aug 2024 11:36:02 +0100
Subject: [PATCH 107/112] Update containers to use grid layout by default and
 ensure autoscreens use new layout prop

---
 packages/builder/src/templates/Screen.js            | 1 +
 packages/builder/src/templates/gridDetailsScreen.js | 1 +
 packages/client/manifest.json                       | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/templates/Screen.js b/packages/builder/src/templates/Screen.js
index cde1dcfc68..7459128886 100644
--- a/packages/builder/src/templates/Screen.js
+++ b/packages/builder/src/templates/Screen.js
@@ -18,6 +18,7 @@ export class Screen extends BaseStructure {
         },
         _children: [],
         _instanceName: "",
+        layout: "flex",
         direction: "column",
         hAlign: "stretch",
         vAlign: "top",
diff --git a/packages/builder/src/templates/gridDetailsScreen.js b/packages/builder/src/templates/gridDetailsScreen.js
index 5b6363ac89..f8d75c2ff6 100644
--- a/packages/builder/src/templates/gridDetailsScreen.js
+++ b/packages/builder/src/templates/gridDetailsScreen.js
@@ -40,6 +40,7 @@ const createScreen = (tableOrView, permissions) => {
   const gridHeader = new Component("@budibase/standard-components/container")
     .instanceName("Heading container")
     .customProps({
+      layout: "flex",
       direction: "row",
       hAlign: "stretch",
     })
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 5d5048e02b..b1552a974a 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -194,7 +194,7 @@
             "barTitle": "Grid layout"
           }
         ],
-        "defaultValue": "flex"
+        "defaultValue": "grid"
       },
       {
         "type": "select",

From 916a7983d80393a8e35887515701c7d3f4418ac4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 15 Aug 2024 11:38:11 +0100
Subject: [PATCH 108/112] Fix potential undefined reference

---
 packages/client/src/utils/grid.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index 805fb429ba..388921cfb7 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -49,7 +49,7 @@ export const getGridVar = (device, param) => `--grid-${device}-${param}`
 // Determines whether a JS event originated from immediately within a grid
 export const isGridEvent = e => {
   return (
-    e.target.dataset.indicator === "true" ||
+    e.target.dataset?.indicator === "true" ||
     e.target
       .closest?.(".component")
       ?.parentNode.closest(".component")

From 48775b8397872c420f51ef71d52fdad2dadf13ab Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 15 Aug 2024 11:44:31 +0100
Subject: [PATCH 109/112] Replace erroneous falsey comparisons with nullish
 comparisons

---
 packages/client/src/utils/grid.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index 388921cfb7..1727b904ca 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -118,8 +118,8 @@ export const gridLayout = (node, metadata) => {
     for (let param of Object.values(GridParams)) {
       let dVar = getGridVar(Devices.Desktop, param)
       let mVar = getGridVar(Devices.Mobile, param)
-      vars[dVar] = styles[dVar] || styles[mVar] || defaults[param]
-      vars[mVar] = styles[mVar] || styles[dVar] || defaults[param]
+      vars[dVar] = styles[dVar] ?? styles[mVar] ?? defaults[param]
+      vars[mVar] = styles[mVar] ?? styles[dVar] ?? defaults[param]
     }
 
     // Apply some overrides depending on component state

From 9385bc878b2b463b61f24e95117e375df8e75e8e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 20 Aug 2024 10:34:29 +0100
Subject: [PATCH 110/112] Bump submodules which are somehow out of date and
 failing CI

---
 packages/account-portal | 2 +-
 packages/pro            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/account-portal b/packages/account-portal
index 32b8fa4643..516b27b74c 160000
--- a/packages/account-portal
+++ b/packages/account-portal
@@ -1 +1 @@
-Subproject commit 32b8fa4643b4f0f74ee89760deffe431ab347ad9
+Subproject commit 516b27b74cbcb7069a25f5e738dc91c22d7c4538
diff --git a/packages/pro b/packages/pro
index 94747fd5bb..14c89a5b20 160000
--- a/packages/pro
+++ b/packages/pro
@@ -1 +1 @@
-Subproject commit 94747fd5bb67c218244bb60b9540f3a6f1c3f6f1
+Subproject commit 14c89a5b20ee4de07723063458a2437b0dd4f2c9

From 7e5f43dd6d9ae805dd95f595e5b119f77ab405d8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 20 Aug 2024 14:58:07 +0100
Subject: [PATCH 111/112] Update table autoscreens to use grid layout

---
 packages/builder/src/templates/Component.js   | 24 ++++++++
 .../screenTemplating/table/inline.js          |  5 ++
 .../templates/screenTemplating/table/modal.js | 26 ++++-----
 .../screenTemplating/table/newScreen.js       | 57 ++++++++++++-------
 .../screenTemplating/table/sidePanel.js       | 27 +++++----
 5 files changed, 90 insertions(+), 49 deletions(-)

diff --git a/packages/builder/src/templates/Component.js b/packages/builder/src/templates/Component.js
index ccd075161f..8f70cbe92b 100644
--- a/packages/builder/src/templates/Component.js
+++ b/packages/builder/src/templates/Component.js
@@ -54,4 +54,28 @@ export class Component extends BaseStructure {
   getId() {
     return this._json._id
   }
+
+  gridDesktopColSpan(start, end) {
+    this._json._styles.normal["--grid-desktop-col-start"] = start
+    this._json._styles.normal["--grid-desktop-col-end"] = end
+    return this
+  }
+
+  gridDesktopRowSpan(start, end) {
+    this._json._styles.normal["--grid-desktop-row-start"] = start
+    this._json._styles.normal["--grid-desktop-row-end"] = end
+    return this
+  }
+
+  gridMobileColSpan(start, end) {
+    this._json._styles.normal["--grid-mobile-col-start"] = start
+    this._json._styles.normal["--grid-mobile-col-end"] = end
+    return this
+  }
+
+  gridMobileRowSpan(start, end) {
+    this._json._styles.normal["--grid-mobile-row-start"] = start
+    this._json._styles.normal["--grid-mobile-row-end"] = end
+    return this
+  }
 }
diff --git a/packages/builder/src/templates/screenTemplating/table/inline.js b/packages/builder/src/templates/screenTemplating/table/inline.js
index a11409c5c3..d218aa998a 100644
--- a/packages/builder/src/templates/screenTemplating/table/inline.js
+++ b/packages/builder/src/templates/screenTemplating/table/inline.js
@@ -9,16 +9,21 @@ const inline = ({ tableOrView, permissions, screens }) => {
     .customProps({
       text: tableOrView.name,
     })
+    .gridDesktopColSpan(1, 13)
+    .gridDesktopRowSpan(1, 3)
 
   const tableBlock = new Component("@budibase/standard-components/gridblock")
     .instanceName(`${tableOrView.name} - Table`)
     .customProps({
       table: tableOrView.datasourceSelectFormat,
     })
+    .gridDesktopColSpan(1, 13)
+    .gridDesktopRowSpan(3, 21)
 
   const screenTemplate = new Screen()
     .route(getValidRoute(screens, tableOrView.name, permissions.write))
     .instanceName(`${tableOrView.name} - List`)
+    .customProps({ layout: "grid" })
     .role(permissions.write)
     .autoTableId(tableOrView.id)
     .addChild(heading)
diff --git a/packages/builder/src/templates/screenTemplating/table/modal.js b/packages/builder/src/templates/screenTemplating/table/modal.js
index 078bb646fa..0dede08711 100644
--- a/packages/builder/src/templates/screenTemplating/table/modal.js
+++ b/packages/builder/src/templates/screenTemplating/table/modal.js
@@ -33,26 +33,22 @@ const modal = ({ tableOrView, permissions, screens }) => {
     type: "cta",
   })
 
-  buttonGroup.instanceName(`${tableOrView.name} - Create`).customProps({
-    hAlign: "right",
-    buttons: [createButton.json()],
-  })
-
-  const tableHeader = new Component("@budibase/standard-components/container")
-    .instanceName("Heading container")
+  buttonGroup
+    .instanceName(`${tableOrView.name} - Create`)
     .customProps({
-      direction: "row",
-      hAlign: "stretch",
+      hAlign: "right",
+      buttons: [createButton.json()],
     })
+    .gridDesktopColSpan(7, 13)
+    .gridDesktopRowSpan(1, 3)
 
   const heading = new Component("@budibase/standard-components/heading")
     .instanceName("Table heading")
     .customProps({
       text: tableOrView.name,
     })
-
-  tableHeader.addChild(heading)
-  tableHeader.addChild(buttonGroup)
+    .gridDesktopColSpan(1, 7)
+    .gridDesktopRowSpan(1, 3)
 
   const createFormBlock = new Component(
     "@budibase/standard-components/formblock"
@@ -134,13 +130,17 @@ const modal = ({ tableOrView, permissions, screens }) => {
       ],
     })
     .instanceName(`${tableOrView.name} - Table`)
+    .gridDesktopColSpan(1, 13)
+    .gridDesktopRowSpan(3, 21)
 
   const template = new Screen()
     .route(getValidRoute(screens, tableOrView.name, permissions.write))
     .instanceName(`${tableOrView.name} - List and details`)
+    .customProps({ layout: "grid" })
     .role(permissions.write)
     .autoTableId(tableOrView.id)
-    .addChild(tableHeader)
+    .addChild(buttonGroup)
+    .addChild(heading)
     .addChild(tableBlock)
     .addChild(createRowModal)
     .addChild(detailsModal)
diff --git a/packages/builder/src/templates/screenTemplating/table/newScreen.js b/packages/builder/src/templates/screenTemplating/table/newScreen.js
index 4774d8e54c..956a325133 100644
--- a/packages/builder/src/templates/screenTemplating/table/newScreen.js
+++ b/packages/builder/src/templates/screenTemplating/table/newScreen.js
@@ -4,6 +4,7 @@ import { capitalise } from "helpers"
 import { makePropSafe as safe } from "@budibase/string-templates"
 import getValidRoute from "../getValidRoute"
 import { Helpers } from "@budibase/bbui"
+import { head } from "lodash"
 
 const getTableScreenTemplate = ({
   route,
@@ -11,36 +12,41 @@ const getTableScreenTemplate = ({
   createScreenRoute,
   tableOrView,
   permissions,
+  gridLayout,
 }) => {
-  const newButton = new Component("@budibase/standard-components/button")
-    .instanceName("New button")
-    .customProps({
-      text: "Create row",
-      onClick: [
-        {
-          "##eventHandlerType": "Navigate To",
-          parameters: {
-            type: "url",
-            url: createScreenRoute,
-          },
+  const buttonGroup = new Component("@budibase/standard-components/buttongroup")
+  const createButton = new Component("@budibase/standard-components/button")
+
+  createButton.customProps({
+    onClick: [
+      {
+        "##eventHandlerType": "Navigate To",
+        parameters: {
+          type: "url",
+          url: createScreenRoute,
         },
-      ],
+      },
+    ],
+    text: "Create row",
+    type: "cta",
+  })
+
+  buttonGroup
+    .instanceName(`${tableOrView.name} - Create`)
+    .customProps({
+      hAlign: "right",
+      buttons: [createButton.json()],
     })
+    .gridDesktopColSpan(7, 13)
+    .gridDesktopRowSpan(1, 3)
 
   const heading = new Component("@budibase/standard-components/heading")
     .instanceName("Table heading")
     .customProps({
       text: tableOrView.name,
     })
-
-  const tableHeader = new Component("@budibase/standard-components/container")
-    .instanceName("Heading container")
-    .customProps({
-      direction: "row",
-      hAlign: "stretch",
-    })
-    .addChild(heading)
-    .addChild(newButton)
+    .gridDesktopColSpan(1, 7)
+    .gridDesktopRowSpan(1, 3)
 
   const updateScreenRouteSegments = updateScreenRoute.split(":id")
   if (updateScreenRouteSegments.length !== 2) {
@@ -67,14 +73,18 @@ const getTableScreenTemplate = ({
         },
       ],
     })
+    .gridDesktopColSpan(1, 13)
+    .gridDesktopRowSpan(3, 21)
 
   const template = new Screen()
     .route(route)
     .instanceName(`${tableOrView.name} - List`)
+    .customProps({ layout: gridLayout ? "grid" : "flex" })
     .role(permissions.write)
     .autoTableId(tableOrView.id)
-    .addChild(tableHeader)
     .addChild(tableBlock)
+    .addChild(heading)
+    .addChild(buttonGroup)
     .json()
 
   return {
@@ -300,6 +310,7 @@ const newScreen = ({ tableOrView, permissions, screens }) => {
     createScreenRoute,
     permissions,
     tableOrView,
+    gridLayout: true,
   })
 
   const updateScreenTemplate = getUpdateScreenTemplate({
@@ -307,6 +318,7 @@ const newScreen = ({ tableOrView, permissions, screens }) => {
     tableScreenRoute,
     tableOrView,
     permissions,
+    gridLayout: false,
   })
 
   const createScreenTemplate = getCreateScreenTemplate({
@@ -314,6 +326,7 @@ const newScreen = ({ tableOrView, permissions, screens }) => {
     tableScreenRoute,
     tableOrView,
     permissions,
+    gridLayout: false,
   })
 
   return [tableScreenTemplate, updateScreenTemplate, createScreenTemplate]
diff --git a/packages/builder/src/templates/screenTemplating/table/sidePanel.js b/packages/builder/src/templates/screenTemplating/table/sidePanel.js
index 61b69117ce..ef88597733 100644
--- a/packages/builder/src/templates/screenTemplating/table/sidePanel.js
+++ b/packages/builder/src/templates/screenTemplating/table/sidePanel.js
@@ -31,27 +31,22 @@ const sidePanel = ({ tableOrView, permissions, screens }) => {
     type: "cta",
   })
 
-  buttonGroup.instanceName(`${tableOrView.name} - Create`).customProps({
-    hAlign: "right",
-    buttons: [createButton.json()],
-  })
-
-  const tableHeader = new Component("@budibase/standard-components/container")
-    .instanceName("Heading container")
+  buttonGroup
+    .instanceName(`${tableOrView.name} - Create`)
     .customProps({
-      layout: "flex",
-      direction: "row",
-      hAlign: "stretch",
+      hAlign: "right",
+      buttons: [createButton.json()],
     })
+    .gridDesktopColSpan(7, 13)
+    .gridDesktopRowSpan(1, 3)
 
   const heading = new Component("@budibase/standard-components/heading")
     .instanceName("Table heading")
     .customProps({
       text: tableOrView.name,
     })
-
-  tableHeader.addChild(heading)
-  tableHeader.addChild(buttonGroup)
+    .gridDesktopColSpan(1, 7)
+    .gridDesktopRowSpan(1, 3)
 
   const createFormBlock = new Component(
     "@budibase/standard-components/formblock"
@@ -131,13 +126,17 @@ const sidePanel = ({ tableOrView, permissions, screens }) => {
       ],
     })
     .instanceName(`${tableOrView.name} - Table`)
+    .gridDesktopColSpan(1, 13)
+    .gridDesktopRowSpan(3, 21)
 
   const template = new Screen()
     .route(getValidRoute(screens, tableOrView.name, permissions.write))
     .instanceName(`${tableOrView.name} - List and details`)
+    .customProps({ layout: "grid" })
     .role(permissions.write)
     .autoTableId(tableOrView.id)
-    .addChild(tableHeader)
+    .addChild(heading)
+    .addChild(buttonGroup)
     .addChild(tableBlock)
     .addChild(createRowSidePanel)
     .addChild(detailsSidePanel)

From 2d45f192f62f1b371f1667f4841206bc48c553a9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 20 Aug 2024 15:07:23 +0100
Subject: [PATCH 112/112] Lint

---
 .../builder/src/templates/screenTemplating/table/newScreen.js    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/templates/screenTemplating/table/newScreen.js b/packages/builder/src/templates/screenTemplating/table/newScreen.js
index 956a325133..051b8edb82 100644
--- a/packages/builder/src/templates/screenTemplating/table/newScreen.js
+++ b/packages/builder/src/templates/screenTemplating/table/newScreen.js
@@ -4,7 +4,6 @@ import { capitalise } from "helpers"
 import { makePropSafe as safe } from "@budibase/string-templates"
 import getValidRoute from "../getValidRoute"
 import { Helpers } from "@budibase/bbui"
-import { head } from "lodash"
 
 const getTableScreenTemplate = ({
   route,