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 @@
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}
@@ -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