fix: keyboard navigation to last row/column enables sticky scrolling (#2562)

Fix keyboard shortcuts to end of table to apply stuckToBottom

**Problem:**
When using `Ctrl+End` or `Ctrl+ArrowDown` (mac: `Cmd` instead) to scroll
to the bottom of a ticking table, the viewport moves to show the last
row but does not enable `isStuckToBottom`. This means the table doesn't
continue tracking new rows as they are added.

**Solution:**
Fixed `getTopForBottomVisible()` and `getLeftForRightVisible()` in
`GridMetricCalculator` to account for scrollbar space, making them
return the same values as `lastTop`/`lastLeft` when navigating to the
last row/column which is used to determine if `isStuckToBottom`.

**Changes:**
- Modified `getTopForBottomVisible()` to deduct `scrollBarSize` from
available height
- Modified `getLeftForRightVisible()` to deduct `scrollBarSize` from
available width
- Added unit tests verifying sticky bottom behavior with keyboard
shortcuts
- Updated e2e test snapshots to reflect new expected visual behavior
- All grid tests pass
- Manually checked keyboard shortcut sticks to bottom of a time-table

Keyboard navigation now properly triggers `isStuckToBottom` by scrolling
to the maximum position that matches `lastTop`/`lastLeft`.

Fixes #2361

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: dsmmcken <[email protected]>
Co-authored-by: Don McKenzie <[email protected]>

Author: Copilot

packages/grid/src/Grid.test.tsx

@@ -935,4 +935,83 @@ describe('paste tests', () => {
       expect(model.setValues).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('sticky bottom behavior', () => {
+    function makeGridWithStickyBottom(
+      model: GridModel = new MockGridModel(),
+      isStickyBottom = true
+    ): Grid {
+      let ref: React.RefObject<Grid>;
+      function GridWithRef() {
+        ref = useRef<Grid>(null);
+        return (
+          <div>
+            <Grid
+              model={model}
+              theme={defaultTheme}
+              isStickyBottom={isStickyBottom}
+              onSelectionChanged={jest.fn()}
+              ref={ref}
+            />
+          </div>
+        );
+      }
+      render(<GridWithRef />);
+      return ref!.current!;
+    }
+
+    it('enables isStuckToBottom when navigating to last row with Ctrl+End', () => {
+      const model = new MockGridModel();
+      const { rowCount } = model;
+      const component = makeGridWithStickyBottom(model, true);
+
+      // Start from the middle of the grid
+      mouseClick(5, 5, component);
+
+      // Navigate to the last row with Ctrl+End
+      end(component, { ctrlKey: true });
+
+      // Check that we're at the last row
+      expect(component.state.selectionEndRow).toBe(rowCount - 1);
+
+      // Check that isStuckToBottom is now true
+      expect(component.state.isStuckToBottom).toBe(true);
+    });
+
+    it('enables isStuckToBottom when navigating to last row with Ctrl+ArrowDown', () => {
+      const model = new MockGridModel();
+      const { rowCount } = model;
+      const component = makeGridWithStickyBottom(model, true);
+
+      // Start from the middle of the grid
+      mouseClick(5, 5, component);
+
+      // Navigate to the last row with Ctrl+ArrowDown
+      arrowDown(component, { ctrlKey: true });
+
+      // Check that we're at the last row
+      expect(component.state.selectionEndRow).toBe(rowCount - 1);
+
+      // Check that isStuckToBottom is now true
+      expect(component.state.isStuckToBottom).toBe(true);
+    });
+
+    it('does not enable isStuckToBottom when isStickyBottom is false', () => {
+      const model = new MockGridModel();
+      const { rowCount } = model;
+      const component = makeGridWithStickyBottom(model, false);
+
+      // Start from the middle of the grid
+      mouseClick(5, 5, component);
+
+      // Navigate to the last row with Ctrl+End
+      end(component, { ctrlKey: true });
+
+      // Check that we're at the last row
+      expect(component.state.selectionEndRow).toBe(rowCount - 1);
+
+      // Check that isStuckToBottom is still false
+      expect(component.state.isStuckToBottom).toBe(false);
+    });
+  });
 });

packages/grid/src/GridMetricCalculator.ts

@@ -919,10 +919,13 @@ export class GridMetricCalculator {
     state: GridMetricState,
     bottomVisible: VisibleIndex
   ): VisibleIndex {
-    const { height } = state;
+    const { height, theme } = state;
+    const { scrollBarSize } = theme;
     const gridY = this.getGridY(state);
     const floatingBottomHeight = this.getFloatingBottomHeight(state);
-    const availableHeight = height - gridY - floatingBottomHeight;
+    // Account for scrollbar space to match lastTop calculation
+    const availableHeight =
+      height - gridY - floatingBottomHeight - scrollBarSize;
     return this.getLastTop(state, bottomVisible, availableHeight);
   }
 
@@ -958,10 +961,12 @@ export class GridMetricCalculator {
     state: GridMetricState,
     rightVisible: VisibleIndex
   ): VisibleIndex {
-    const { width } = state;
+    const { width, theme } = state;
+    const { scrollBarSize } = theme;
     const gridX = this.getGridX(state);
     const floatingRightWidth = this.getFloatingRightWidth(state);
-    const availableWidth = width - gridX - floatingRightWidth;
+    // Account for scrollbar space to match lastLeft calculation
+    const availableWidth = width - gridX - floatingRightWidth - scrollBarSize;
     return this.getLastLeft(state, rightVisible, availableWidth);
   }