Fix issue where grid highlighted rows are incorrect when page is scrolled

packages/frontend-core/src/components/grid/layout/GridBody.svelte

@@ -23,14 +23,24 @@
     0
   )
 
+  const updateBounds = () => {
+    bounds.set(body.getBoundingClientRect())
+  }
+
   onMount(() => {
     // Observe and record the height of the body
-    const observer = new ResizeObserver(() => {
+    const resizeObserver = new ResizeObserver(updateBounds)
-      bounds.set(body.getBoundingClientRect())
+    resizeObserver.observe(body)
-    })
+
-    observer.observe(body)
+    // Capture any wheel events on the page to ensure our scroll offset is
+    // correct. We don't care about touch events as we only need this for
+    // hovering over rows with a mouse.
+    window.addEventListener("wheel", updateBounds, true)
+
+    // Clean up listeners
     return () => {
-      observer.disconnect()
+      resizeObserver.disconnect()
+      window.removeEventListener("wheel", updateBounds, true)
     }
   })
 </script>