From 238b43a59a0ad802485e4c11883cf960b3be398c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 24 Apr 2024 21:25:55 +0100
Subject: [PATCH] Improve grid min height determination

---
 .../frontend-core/src/components/grid/layout/Grid.svelte | 9 +++++++--
 .../frontend-core/src/components/grid/lib/constants.js   | 1 +
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index 789d8268aa..6edc48e537 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -26,6 +26,9 @@
     MaxCellRenderOverflow,
     GutterWidth,
     DefaultRowHeight,
+    Padding,
+    SmallRowHeight,
+    ControlsHeight,
   } from "../lib/constants"
 
   export let API = null
@@ -104,6 +107,8 @@
     notifyError,
     buttons,
   })
+  $: minHeight =
+    Padding + SmallRowHeight + $rowHeight + (showControls ? ControlsHeight : 0)
 
   // Set context for children to consume
   setContext("grid", context)
@@ -129,7 +134,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};"
+  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">
@@ -211,7 +216,6 @@
     --cell-spacing: 4px;
     --cell-border: 1px solid var(--spectrum-global-color-gray-200);
     --cell-font-size: 14px;
-    --controls-height: 50px;
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
@@ -220,6 +224,7 @@
     position: relative;
     overflow: hidden;
     background: var(--grid-background);
+    min-height: var(--min-height);
   }
   .grid,
   .grid :global(*) {
diff --git a/packages/frontend-core/src/components/grid/lib/constants.js b/packages/frontend-core/src/components/grid/lib/constants.js
index ed6eb5dbe3..c42e49875f 100644
--- a/packages/frontend-core/src/components/grid/lib/constants.js
+++ b/packages/frontend-core/src/components/grid/lib/constants.js
@@ -11,6 +11,7 @@ export const NewRowID = "new"
 export const BlankRowID = "blank"
 export const RowPageSize = 100
 export const FocusedCellMinOffset = 48
+export const ControlsHeight = 50
 
 // Popovers
 export const PopoverMinWidth = 200