From 9184d1b1f4f41c65f7e506bbf2de0e608d9dc1da Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 14 May 2024 11:25:29 +0100
Subject: [PATCH 1/2] Rework grid block height to support percentages again
 while ensuring min height is respected

---
 .../src/components/app/GridBlock.svelte       | 36 ++++++++-----------
 .../src/components/grid/layout/Grid.svelte    | 13 ++++---
 2 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index 4ed8f91f2a..da9a3ccc4e 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -36,6 +36,7 @@
 
   let grid
   let gridContext
+  let minHeight
 
   $: parsedColumns = getParsedColumns(columns)
   $: columnWhitelist = parsedColumns.filter(x => x.active).map(x => x.field)
@@ -50,8 +51,7 @@
       metadata: { dataSource: table },
     },
   ]
-  $: height = $component.styles?.normal?.height || "408px"
-  $: styles = getSanitisedStyles($component.styles)
+  $: gridContext?.minHeight?.subscribe($height => (minHeight = $height))
 
   // Provide additional data context for live binding eval
   export const getAdditionalDataContext = () => {
@@ -128,23 +128,16 @@
     )
   }
 
-  const getSanitisedStyles = styles => {
-    return {
-      ...styles,
-      normal: {
-        ...styles?.normal,
-        height: undefined,
-      },
-    }
-  }
-
   onMount(() => {
     gridContext = grid.getContext()
   })
 </script>
 
-<div use:styleable={styles} class:in-builder={$builderStore.inBuilder}>
-  <span style="--height:{height};">
+<span style="--min-height:{minHeight}px">
+  <div
+    use:styleable={$component.styles}
+    class:in-builder={$builderStore.inBuilder}
+  >
     <Grid
       bind:this={grid}
       datasource={table}
@@ -170,12 +163,15 @@
       buttons={enrichedButtons}
       on:rowclick={e => onRowClick?.({ row: e.detail })}
     />
-  </span>
-</div>
+  </div>
+</span>
 
 <Provider {data} {actions} />
 
 <style>
+  span {
+    display: contents;
+  }
   div {
     display: flex;
     flex-direction: column;
@@ -183,14 +179,10 @@
     border: 1px solid var(--spectrum-global-color-gray-300);
     border-radius: 4px;
     overflow: hidden;
+    height: 410px;
+    min-height: var(--min-height);
   }
   div.in-builder :global(*) {
     pointer-events: none;
   }
-  span {
-    display: contents;
-  }
-  span :global(.grid) {
-    height: var(--height);
-  }
 </style>
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index 23f61b424f..2a7624d271 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -1,6 +1,6 @@
 <script>
   import { setContext, onMount } from "svelte"
-  import { writable } from "svelte/store"
+  import { writable, derived } from "svelte/store"
   import { fade } from "svelte/transition"
   import { clickOutside, ProgressCircle } from "@budibase/bbui"
   import { createEventManagers } from "../lib/events"
@@ -109,8 +109,13 @@
     notifyError,
     buttons,
   })
-  $: minHeight =
-    Padding + SmallRowHeight + $rowHeight + (showControls ? ControlsHeight : 0)
+
+  // Derive min height and make available in context
+  const minHeight = derived(rowHeight, $height => {
+    const heightForControls = showControls ? ControlsHeight : 0
+    return Padding + SmallRowHeight + $height + heightForControls
+  })
+  context = { ...context, minHeight }
 
   // Set context for children to consume
   setContext("grid", context)
@@ -136,7 +141,7 @@
   class:quiet
   on:mouseenter={() => gridFocused.set(true)}
   on:mouseleave={() => gridFocused.set(false)}
-  style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-overflow:{MaxCellRenderOverflow}px; --content-lines:{$contentLines}; --min-height:{minHeight}px; --controls-height:{ControlsHeight}px;"
+  style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-overflow:{MaxCellRenderOverflow}px; --content-lines:{$contentLines}; --min-height:{$minHeight}px; --controls-height:{ControlsHeight}px;"
 >
   {#if showControls}
     <div class="controls">

From eaa0a2023a482ee4a421accd2165fac64889543c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 17 May 2024 10:51:17 +0100
Subject: [PATCH 2/2] Move grid min height subcsription into onMount handler to
 be more explicit about it only running once

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

diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index da9a3ccc4e..5731bf2216 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -51,7 +51,6 @@
       metadata: { dataSource: table },
     },
   ]
-  $: gridContext?.minHeight?.subscribe($height => (minHeight = $height))
 
   // Provide additional data context for live binding eval
   export const getAdditionalDataContext = () => {
@@ -130,6 +129,7 @@
 
   onMount(() => {
     gridContext = grid.getContext()
+    gridContext.minHeight.subscribe($height => (minHeight = $height))
   })
 </script>