Improve calculation of inversion indices, improve cell max sizes and grid padding for consitency

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;

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;

packages/frontend-core/src/components/grid/lib/constants.js

@@ -1,6 +1,5 @@
-export const Padding = 256
+export const Padding = 246
-export const MaxCellRenderHeight = 252
+export const MaxCellRenderHeight = 222
-export const MaxCellRenderWidthOverflow = 200
 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

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 => ({

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],
+    [height, rowHeight, scrollTop],
-    ([$visualRowCapacity, $rowHeight]) => {
+    ([$height, $rowHeight, $scrollTop]) => {
-      const maxCellRenderRows = Math.ceil(MaxCellRenderHeight / $rowHeight)
+      const offset = $scrollTop % $rowHeight
-      const topIdx = $visualRowCapacity - maxCellRenderRows - 2
+      const minBottom =
-      const bottomIdx = maxCellRenderRows + 1
+        $height - ScrollBarSize * 3 - MaxCellRenderHeight + offset
-      return Math.max(topIdx, bottomIdx)
+      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
         }
       }