From 8fc538386de415d368792bfebcc76f679fea6547 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Mon, 15 Jun 2026 04:08:52 +0100
Subject: [PATCH] fix(base): sync header/body horizontal scroll on header
 focus; expand row via Space, drop expander from tab order

---
 .../src/ee/base/components/grid/grid-cell.tsx    |  1 +
 .../ee/base/components/grid/grid-container.tsx   | 10 ++++++++++
 .../src/ee/base/hooks/use-grid-keyboard-nav.ts   | 16 +++++++++++-----
 .../ee/base/hooks/use-horizontal-scroll-sync.ts  |  9 +++++++++
 4 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/ee/base/components/grid/grid-cell.tsx b/apps/client/src/ee/base/components/grid/grid-cell.tsx
index 73f99b34b..90243a0a6 100644
--- a/apps/client/src/ee/base/components/grid/grid-cell.tsx
+++ b/apps/client/src/ee/base/components/grid/grid-cell.tsx
@@ -181,6 +181,7 @@ export const GridCell = memo(function GridCell({
           <Tooltip label={t("Expand")} position="bottom" openDelay={400}>
             <button
               type="button"
+              tabIndex={-1}
               className={classes.rowExpandButton}
               onClick={() => onExpandRow(rowId)}
               onDoubleClick={(e) => e.stopPropagation()}
diff --git a/apps/client/src/ee/base/components/grid/grid-container.tsx b/apps/client/src/ee/base/components/grid/grid-container.tsx
index e12030c04..1c75dcf25 100644
--- a/apps/client/src/ee/base/components/grid/grid-container.tsx
+++ b/apps/client/src/ee/base/components/grid/grid-container.tsx
@@ -37,6 +37,7 @@ import { AddRowButton } from "./add-row-button";
 import { GridGhostRows } from "./grid-ghost-rows";
 import { SelectionActionBar } from "./selection-action-bar";
 import { useBaseEditable } from "@/ee/base/context/base-editable";
+import { useRowExpand } from "@/ee/base/context/row-expand";
 import { GridRowOrderProvider } from "@/ee/base/context/grid-row-order";
 import classes from "@/ee/base/styles/grid.module.css";
 
@@ -120,6 +121,7 @@ export function GridContainer({
   rowIdsRef.current = rowIds;
   const getOrderedRowIds = useCallback(() => rowIdsRef.current, []);
   const editable = useBaseEditable();
+  const onExpandRow = useRowExpand();
 
   const [editingCell, setEditingCell] = useAtom(editingCellAtomFamily(pageId)) as unknown as [EditingCell, (val: EditingCell) => void];
   const editingCellRef = useRef(editingCell);
@@ -334,6 +336,13 @@ export function GridContainer({
     [toggleRow],
   );
 
+  const expandRow = useCallback(
+    (rowId: string) => {
+      onExpandRow?.(rowId);
+    },
+    [onExpandRow],
+  );
+
   const prevEditingRef = useRef(editingCell);
   useEffect(() => {
     const prev = prevEditingRef.current;
@@ -385,6 +394,7 @@ export function GridContainer({
     clearSelection,
     deleteSelected,
     toggleRowSelection,
+    expandRow,
   });
 
   const activeCell = editingCell ?? focusedCell;
diff --git a/apps/client/src/ee/base/hooks/use-grid-keyboard-nav.ts b/apps/client/src/ee/base/hooks/use-grid-keyboard-nav.ts
index 3d4949fe2..9d09d79dc 100644
--- a/apps/client/src/ee/base/hooks/use-grid-keyboard-nav.ts
+++ b/apps/client/src/ee/base/hooks/use-grid-keyboard-nav.ts
@@ -25,6 +25,7 @@ type UseGridKeyboardNavOptions = {
   clearSelection: () => void;
   deleteSelected: () => void | Promise<void>;
   toggleRowSelection: (rowId: string) => void;
+  expandRow: (rowId: string) => void;
 };
 
 const isPrintableKey = (e: KeyboardEvent) =>
@@ -52,6 +53,7 @@ export function useGridKeyboardNav({
   clearSelection,
   deleteSelected,
   toggleRowSelection,
+  expandRow,
 }: UseGridKeyboardNavOptions) {
   const getColIds = useCallback(
     () =>
@@ -244,12 +246,15 @@ export function useGridKeyboardNav({
           }
           break;
         default: {
-          if (e.key === " " && focusedCell.propertyId === "__row_number") {
+          if (e.key === " ") {
             e.preventDefault();
-            toggleRowSelection(focusedCell.rowId);
-          } else if (e.key === " " && propertyType(focusedCell.propertyId) === "checkbox") {
-            e.preventDefault();
-            openEditor(focusedCell);
+            if (focusedCell.propertyId === "__row_number") {
+              toggleRowSelection(focusedCell.rowId);
+            } else if (propertyType(focusedCell.propertyId) === "checkbox") {
+              openEditor(focusedCell);
+            } else {
+              expandRow(focusedCell.rowId);
+            }
           } else if (isPrintableKey(e)) {
             e.preventDefault();
             beginTypeToEdit(focusedCell, e.key);
@@ -275,6 +280,7 @@ export function useGridKeyboardNav({
       clearSelection,
       deleteSelected,
       toggleRowSelection,
+      expandRow,
     ],
   );
 
diff --git a/apps/client/src/ee/base/hooks/use-horizontal-scroll-sync.ts b/apps/client/src/ee/base/hooks/use-horizontal-scroll-sync.ts
index e559c23c5..216f8b246 100644
--- a/apps/client/src/ee/base/hooks/use-horizontal-scroll-sync.ts
+++ b/apps/client/src/ee/base/hooks/use-horizontal-scroll-sync.ts
@@ -38,7 +38,15 @@ export function useHorizontalScrollSync<
       body.scrollLeft += e.deltaY;
     };
 
+    const onHeaderScroll = () => {
+      if (rafId !== 0) return;
+      if (body.scrollLeft !== header.scrollLeft) {
+        body.scrollLeft = header.scrollLeft;
+      }
+    };
+
     body.addEventListener("scroll", onBodyScroll, { passive: true });
+    header.addEventListener("scroll", onHeaderScroll, { passive: true });
     header.addEventListener("wheel", onHeaderWheel, { passive: false });
 
     // Initial sync in case the body is already scrolled when the hook mounts.
@@ -46,6 +54,7 @@ export function useHorizontalScrollSync<
 
     return () => {
       body.removeEventListener("scroll", onBodyScroll);
+      header.removeEventListener("scroll", onHeaderScroll);
       header.removeEventListener("wheel", onHeaderWheel);
       if (rafId !== 0) cancelAnimationFrame(rafId);
     };