From 46d8a0698190a24cab9525dd119de5dea4e15261 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 24 Apr 2024 08:52:39 +0100
Subject: [PATCH] Update grid min size to accomodate new date picker

---
 .../src/components/app/GridBlock.svelte       |  4 +--
 .../src/components/grid/cells/DateCell.svelte | 25 ++++++++++---------
 .../src/components/grid/layout/Grid.svelte    |  5 +++-
 .../src/components/grid/lib/constants.js      |  5 ++--
 4 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index 55e5a2bd66..deefe6726a 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -149,8 +149,8 @@
     border: 1px solid var(--spectrum-global-color-gray-300);
     border-radius: 4px;
     overflow: hidden;
-    min-height: 230px;
-    height: 410px;
+    /*    min-height: 230px;*/
+    /*    height: 410px;*/
   }
   div.in-builder :global(*) {
     pointer-events: none;
diff --git a/packages/frontend-core/src/components/grid/cells/DateCell.svelte b/packages/frontend-core/src/components/grid/cells/DateCell.svelte
index 394b6e1f43..04d5841f49 100644
--- a/packages/frontend-core/src/components/grid/cells/DateCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/DateCell.svelte
@@ -48,6 +48,10 @@
 
   const close = () => {
     isOpen = false
+
+    // Only save the changed value when closing. If the value is unchanged then
+    // this is handled upstream and no action is taken.
+    onChange(value)
   }
 
   const onKeyDown = e => {
@@ -70,22 +74,19 @@
   }
 
   const changeDate = (quantity, unit) => {
+    let newValue
     if (!value) {
-      value = dayjs()
+      newValue = dayjs()
     } else {
-      value = dayjs(value).add(quantity, unit)
+      newValue = dayjs(value).add(quantity, unit)
     }
-    debouncedOnChange(
-      Helpers.stringifyDate(value, {
-        enableTime,
-        timeOnly,
-        ignoreTimezones,
-      })
-    )
+    value = Helpers.stringifyDate(newValue, {
+      enableTime,
+      timeOnly,
+      ignoreTimezones,
+    })
   }
 
-  const debouncedOnChange = debounce(onChange, 250)
-
   onMount(() => {
     api = {
       onKeyDown,
@@ -111,7 +112,7 @@
   <div class="picker" use:clickOutside={close}>
     <CoreDatePickerPopoverContents
       value={parsedValue}
-      on:change={e => onChange(e.detail)}
+      on:change={e => (value = e.detail)}
       {enableTime}
       {timeOnly}
       {ignoreTimezones}
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index 468f49bdec..d62715083a 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -25,6 +25,7 @@
     MaxCellRenderOverflow,
     GutterWidth,
     DefaultRowHeight,
+    MinHeight,
   } from "../lib/constants"
 
   export let API = null
@@ -129,7 +130,8 @@
   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 +
+    $rowHeight}px;"
 >
   {#if showControls}
     <div class="controls">
@@ -219,6 +221,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 37d829873d..1a01c9f1bd 100644
--- a/packages/frontend-core/src/components/grid/lib/constants.js
+++ b/packages/frontend-core/src/components/grid/lib/constants.js
@@ -1,4 +1,4 @@
-export const Padding = 246
+export const Padding = 400
 export const ScrollBarSize = 8
 export const GutterWidth = 72
 export const DefaultColumnWidth = 200
@@ -11,4 +11,5 @@ export const NewRowID = "new"
 export const BlankRowID = "blank"
 export const RowPageSize = 100
 export const FocusedCellMinOffset = 48
-export const MaxCellRenderOverflow = Padding - 3 * ScrollBarSize
+export const MaxCellRenderOverflow = 222
+export const MinHeight = Padding + SmallRowHeight