From 5cc2e90e4f8f99d8b4990325cbf340cfad64d91c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 25 Apr 2024 10:49:48 +0100
Subject: [PATCH] Improve grid height

---
 .../backend/DataTable/TableDataTable.svelte   |  3 +-
 .../src/components/app/GridBlock.svelte       | 81 +++++++++++--------
 .../grid/overlays/GridPopover.svelte          |  2 +-
 3 files changed, 50 insertions(+), 36 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/TableDataTable.svelte b/packages/builder/src/components/backend/DataTable/TableDataTable.svelte
index 65aa26c9c9..77229f3a17 100644
--- a/packages/builder/src/components/backend/DataTable/TableDataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/TableDataTable.svelte
@@ -101,8 +101,7 @@
 
 <style>
   .wrapper {
-    padding-top: 400px;
-    flex: 0 0 400px;
+    flex: 1 1 auto;
     margin: -28px -40px -40px -40px;
     display: flex;
     flex-direction: column;
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index deefe6726a..e365429cb6 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -50,6 +50,8 @@
       metadata: { dataSource: table },
     },
   ]
+  $: height = $component.styles?.normal?.height || "408px"
+  $: styles = getSanitisedStyles($component.styles)
 
   // Provide additional data context for live binding eval
   export const getAdditionalDataContext = () => {
@@ -106,39 +108,48 @@
       },
     }))
   }
+
+  const getSanitisedStyles = styles => {
+    return {
+      ...styles,
+      normal: {
+        ...styles?.normal,
+        height: undefined,
+      },
+    }
+  }
 </script>
 
-<div
-  use:styleable={$component.styles}
-  class:in-builder={$builderStore.inBuilder}
->
-  <Provider {actions}>
-    <Grid
-      bind:this={grid}
-      datasource={table}
-      {API}
-      {stripeRows}
-      {quiet}
-      {initialFilter}
-      {initialSortColumn}
-      {initialSortOrder}
-      {fixedRowHeight}
-      {columnWhitelist}
-      {schemaOverrides}
-      {repeat}
-      canAddRows={allowAddRows}
-      canEditRows={allowEditRows}
-      canDeleteRows={allowDeleteRows}
-      canEditColumns={false}
-      canExpandRows={false}
-      canSaveSchema={false}
-      showControls={false}
-      notifySuccess={notificationStore.actions.success}
-      notifyError={notificationStore.actions.error}
-      buttons={enrichedButtons}
-      on:rowclick={e => onRowClick?.({ row: e.detail })}
-    />
-  </Provider>
+<div use:styleable={styles} class:in-builder={$builderStore.inBuilder}>
+  <span style="--height:{height};">
+    <Provider {actions}>
+      <Grid
+        bind:this={grid}
+        datasource={table}
+        {API}
+        {stripeRows}
+        {quiet}
+        {initialFilter}
+        {initialSortColumn}
+        {initialSortOrder}
+        {fixedRowHeight}
+        {columnWhitelist}
+        {schemaOverrides}
+        {repeat}
+        canAddRows={allowAddRows}
+        canEditRows={allowEditRows}
+        canDeleteRows={allowDeleteRows}
+        canEditColumns={false}
+        canExpandRows={false}
+        canSaveSchema={false}
+        showControls={false}
+        notifySuccess={notificationStore.actions.success}
+        notifyError={notificationStore.actions.error}
+        buttons={enrichedButtons}
+        on:rowclick={e => onRowClick?.({ row: e.detail })}
+      />
+    </Provider>
+  </span>
 </div>
 
 <style>
@@ -149,10 +160,14 @@
     border: 1px solid var(--spectrum-global-color-gray-300);
     border-radius: 4px;
     overflow: hidden;
-    /*    min-height: 230px;*/
-    /*    height: 410px;*/
   }
   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/overlays/GridPopover.svelte b/packages/frontend-core/src/components/grid/overlays/GridPopover.svelte
index 9b77b345f5..d8b8b0fdae 100644
--- a/packages/frontend-core/src/components/grid/overlays/GridPopover.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/GridPopover.svelte
@@ -20,7 +20,7 @@
   $: style = buildStyles(minWidth, maxWidth, maxHeight)
 
   const buildStyles = (minWidth, maxWidth, maxHeight) => {
-    let style = "min-height: 100px;"
+    let style = ""
     if (minWidth != null) {
       style += `min-width: ${minWidth}px;`
     }