Update grid min size to accomodate new date picker

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;

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}

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(*) {

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