Update grid context menu position determination to work regardless of page scroll offsets

packages/frontend-core/src/components/grid/cells/GridCell.svelte

@@ -82,6 +82,11 @@
     align-items: center;
   }
 
+  /* Disable pointer events for non-focused cells */
+  .cell:not(.focused) :global(*) {
+    pointer-events: none;
+  }
+
   /* Cell border */
   .cell.focused:after,
   .cell.error:after,

packages/frontend-core/src/components/grid/stores/menu.js

@@ -1,5 +1,5 @@
-import { writable, get } from "svelte/store"
-import { GutterWidth } from "../lib/constants"
+import { writable } from "svelte/store"
+import { tick } from "svelte"
 
 export const createStores = () => {
   const menu = writable({
@@ -14,18 +14,25 @@ export const createStores = () => {
 }
 
 export const deriveStores = context => {
-  const { menu, bounds, focusedCellId, stickyColumn, rowHeight } = context
+  const { menu, focusedCellId, rand } = context
 
   const open = (cellId, e) => {
-    const $bounds = get(bounds)
-    const $stickyColumn = get(stickyColumn)
-    const $rowHeight = get(rowHeight)
     e.preventDefault()
+
+    // Get DOM node for grid data wrapper to compute relative position to
+    const gridNode = document.getElementById(`grid-${rand}`)
+    const dataNode = gridNode?.getElementsByClassName("grid-data-outer")?.[0]
+    if (!dataNode) {
+      return
+    }
+
+    // Compute bounds of cell relative to outer data node
+    const targetBounds = e.target.getBoundingClientRect()
+    const dataBounds = dataNode.getBoundingClientRect()
     focusedCellId.set(cellId)
     menu.set({
-      left:
-        e.clientX - $bounds.left + GutterWidth + ($stickyColumn?.width || 0),
-      top: e.clientY - $bounds.top + $rowHeight,
+      left: targetBounds.left - dataBounds.left + e.offsetX,
+      top: targetBounds.top - dataBounds.top + e.offsetY,
       visible: true,
     })
   }