diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte index da9ae74411..482721613d 100644 --- a/packages/client/src/components/app/GridBlock.svelte +++ b/packages/client/src/components/app/GridBlock.svelte @@ -39,6 +39,7 @@ border: 1px solid var(--spectrum-global-color-gray-300); border-radius: 4px; overflow: hidden; + min-height: 410px; } div.in-builder :global(*) { pointer-events: none; diff --git a/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte b/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte index 886d4ef8b0..233533c446 100644 --- a/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte @@ -102,7 +102,7 @@ top: 0; left: 0; width: calc(100% + var(--max-cell-render-width-overflow)); - height: var(--max-cell-render-height); + height: calc(var(--row-height) + var(--max-cell-render-height)); z-index: 1; border-radius: 2px; resize: none; diff --git a/packages/frontend-core/src/components/grid/lib/constants.js b/packages/frontend-core/src/components/grid/lib/constants.js index f078ef7274..a6e6723463 100644 --- a/packages/frontend-core/src/components/grid/lib/constants.js +++ b/packages/frontend-core/src/components/grid/lib/constants.js @@ -1,6 +1,5 @@ -export const Padding = 256 -export const MaxCellRenderHeight = 252 -export const MaxCellRenderWidthOverflow = 200 +export const Padding = 246 +export const MaxCellRenderHeight = 222 export const ScrollBarSize = 8 export const GutterWidth = 72 export const DefaultColumnWidth = 200 @@ -12,3 +11,5 @@ export const DefaultRowHeight = SmallRowHeight export const NewRowID = "new" export const BlankRowID = "blank" export const RowPageSize = 100 +export const FocusedCellMinOffset = 48 +export const MaxCellRenderWidthOverflow = Padding - 3 * ScrollBarSize diff --git a/packages/frontend-core/src/components/grid/stores/scroll.js b/packages/frontend-core/src/components/grid/stores/scroll.js index c1ca19633a..89e759854f 100644 --- a/packages/frontend-core/src/components/grid/stores/scroll.js +++ b/packages/frontend-core/src/components/grid/stores/scroll.js @@ -1,6 +1,6 @@ import { writable, derived, get } from "svelte/store" import { tick } from "svelte" -import { Padding, GutterWidth } from "../lib/constants" +import { Padding, GutterWidth, FocusedCellMinOffset } from "../lib/constants" export const createStores = () => { const scroll = writable({ @@ -138,14 +138,13 @@ export const initialise = context => { const $scroll = get(scroll) const $bounds = get(bounds) const $rowHeight = get(rowHeight) - const verticalOffset = 60 // Ensure vertical position is viewable if ($focusedRow) { // Ensure row is not below bottom of screen const rowYPos = $focusedRow.__idx * $rowHeight const bottomCutoff = - $scroll.top + $bounds.height - $rowHeight - verticalOffset + $scroll.top + $bounds.height - $rowHeight - FocusedCellMinOffset let delta = rowYPos - bottomCutoff if (delta > 0) { scroll.update(state => ({ @@ -156,7 +155,7 @@ export const initialise = context => { // Ensure row is not above top of screen else { - const delta = $scroll.top - rowYPos + verticalOffset + const delta = $scroll.top - rowYPos + FocusedCellMinOffset if (delta > 0) { scroll.update(state => ({ ...state, @@ -171,13 +170,12 @@ export const initialise = context => { const $visibleColumns = get(visibleColumns) const columnName = $focusedCellId?.split("-")[1] const column = $visibleColumns.find(col => col.name === columnName) - const horizontalOffset = 50 if (!column) { return } // Ensure column is not cutoff on left edge - let delta = $scroll.left - column.left + horizontalOffset + let delta = $scroll.left - column.left + FocusedCellMinOffset if (delta > 0) { scroll.update(state => ({ ...state, @@ -188,7 +186,7 @@ export const initialise = context => { // Ensure column is not cutoff on right edge else { const rightEdge = column.left + column.width - const rightBound = $bounds.width + $scroll.left - horizontalOffset + const rightBound = $bounds.width + $scroll.left - FocusedCellMinOffset delta = rightEdge - rightBound if (delta > 0) { scroll.update(state => ({ diff --git a/packages/frontend-core/src/components/grid/stores/viewport.js b/packages/frontend-core/src/components/grid/stores/viewport.js index f258b7daef..a363ffca00 100644 --- a/packages/frontend-core/src/components/grid/stores/viewport.js +++ b/packages/frontend-core/src/components/grid/stores/viewport.js @@ -108,12 +108,17 @@ export const deriveStores = context => { // Determine the row index at which we should start vertically inverting cell // dropdowns const rowVerticalInversionIndex = derived( - [visualRowCapacity, rowHeight], - ([$visualRowCapacity, $rowHeight]) => { - const maxCellRenderRows = Math.ceil(MaxCellRenderHeight / $rowHeight) - const topIdx = $visualRowCapacity - maxCellRenderRows - 2 - const bottomIdx = maxCellRenderRows + 1 - return Math.max(topIdx, bottomIdx) + [height, rowHeight, scrollTop], + ([$height, $rowHeight, $scrollTop]) => { + const offset = $scrollTop % $rowHeight + const minBottom = + $height - ScrollBarSize * 3 - MaxCellRenderHeight + offset + return Math.floor(minBottom / $rowHeight) + + // const maxCellRenderRows = Math.ceil(MaxCellRenderHeight / $rowHeight) + // const topIdx = $visualRowCapacity - maxCellRenderRows - 2 + // const bottomIdx = maxCellRenderRows + 1 + // return Math.max(topIdx, bottomIdx) } ) @@ -126,7 +131,7 @@ export const deriveStores = context => { let inversionIdx = $renderedColumns.length for (let i = $renderedColumns.length - 1; i >= 0; i--, inversionIdx--) { const rightEdge = $renderedColumns[i].left + $renderedColumns[i].width - if (rightEdge + MaxCellRenderWidthOverflow < cutoff) { + if (rightEdge + MaxCellRenderWidthOverflow <= cutoff) { break } }