From 28e91959e51e0f05973a12c3bbbae4ba3126655b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 17 May 2024 11:24:51 +0100
Subject: [PATCH] Fix grid block having incorrect toolbar position in builder
 preview

---
 .../src/components/app/GridBlock.svelte       | 76 ++++++++++---------
 1 file changed, 39 insertions(+), 37 deletions(-)

diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index cf0ec76109..446a792784 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -44,6 +44,7 @@
   $: schemaOverrides = getSchemaOverrides(parsedColumns)
   $: enrichedButtons = enrichButtons(buttons)
   $: selectedRows = deriveSelectedRows(gridContext)
+  $: styles = patchStyles($component.styles, minHeight)
   $: data = { selectedRows: $selectedRows }
   $: actions = [
     {
@@ -128,52 +129,54 @@
     )
   }
 
+  const patchStyles = (styles, minHeight) => {
+    return {
+      ...styles,
+      normal: {
+        ...styles?.normal,
+        "min-height": `${minHeight}px`,
+      },
+    }
+  }
+
   onMount(() => {
     gridContext = grid.getContext()
     gridContext.minHeight.subscribe($height => (minHeight = $height))
   })
 </script>
 
-<span style="--min-height:{minHeight}px">
-  <div
-    use:styleable={$component.styles}
-    class:in-builder={$builderStore.inBuilder}
-  >
-    <Grid
-      bind:this={grid}
-      datasource={table}
-      {API}
-      {stripeRows}
-      {quiet}
-      {initialFilter}
-      {initialSortColumn}
-      {initialSortOrder}
-      {fixedRowHeight}
-      {columnWhitelist}
-      {schemaOverrides}
-      canAddRows={allowAddRows}
-      canEditRows={allowEditRows}
-      canDeleteRows={allowDeleteRows}
-      canEditColumns={false}
-      canExpandRows={false}
-      canSaveSchema={false}
-      canSelectRows={true}
-      showControls={false}
-      notifySuccess={notificationStore.actions.success}
-      notifyError={notificationStore.actions.error}
-      buttons={enrichedButtons}
-      isCloud={$environmentStore.cloud}
-      on:rowclick={e => onRowClick?.({ row: e.detail })}
-    />
-  </div>
-</span>
+<div use:styleable={styles} class:in-builder={$builderStore.inBuilder}>
+  <Grid
+    bind:this={grid}
+    datasource={table}
+    {API}
+    {stripeRows}
+    {quiet}
+    {initialFilter}
+    {initialSortColumn}
+    {initialSortOrder}
+    {fixedRowHeight}
+    {columnWhitelist}
+    {schemaOverrides}
+    canAddRows={allowAddRows}
+    canEditRows={allowEditRows}
+    canDeleteRows={allowDeleteRows}
+    canEditColumns={false}
+    canExpandRows={false}
+    canSaveSchema={false}
+    canSelectRows={true}
+    showControls={false}
+    notifySuccess={notificationStore.actions.success}
+    notifyError={notificationStore.actions.error}
+    buttons={enrichedButtons}
+    isCloud={$environmentStore.cloud}
+    on:rowclick={e => onRowClick?.({ row: e.detail })}
+  />
+</div>
 
 <Provider {data} {actions} />
 
 <style>
-  span {
-    display: contents;
-  }
   div {
     display: flex;
     flex-direction: column;
@@ -182,7 +185,6 @@
     border-radius: 4px;
     overflow: hidden;
     height: 410px;
-    min-height: var(--min-height);
   }
   div.in-builder :global(*) {
     pointer-events: none;