From 3bbf055401bf8b0dad01791cd0d64685e736ab7c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 24 Apr 2023 08:09:18 +0100
Subject: [PATCH] Improve horizontal scrolling performance

---
 .../src/components/grid/layout/HeaderRow.svelte |  1 +
 .../src/components/grid/stores/viewport.js      | 17 ++++++++---------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
index 4dc7295132..2ec186a4d6 100644
--- a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
@@ -52,6 +52,7 @@
     top: 0;
     border-left: var(--cell-border);
     border-right: var(--cell-border);
+    border-bottom: var(--cell-border);
     background: var(--spectrum-global-color-gray-100);
   }
   .add:hover {
diff --git a/packages/frontend-core/src/components/grid/stores/viewport.js b/packages/frontend-core/src/components/grid/stores/viewport.js
index 5a2e22395b..87a10a0330 100644
--- a/packages/frontend-core/src/components/grid/stores/viewport.js
+++ b/packages/frontend-core/src/components/grid/stores/viewport.js
@@ -2,6 +2,7 @@ import { derived, get } from "svelte/store"
 import {
   MaxCellRenderHeight,
   MaxCellRenderWidthOverflow,
+  MinColumnWidth,
   ScrollBarSize,
 } from "../lib/constants"
 
@@ -46,7 +47,7 @@ export const deriveStores = context => {
 
   // Derive visible columns
   const scrollLeftRounded = derived(scrollLeft, $scrollLeft => {
-    const interval = 50
+    const interval = MinColumnWidth
     return Math.round($scrollLeft / interval) * interval
   })
   const renderedColumns = derived(
@@ -74,17 +75,15 @@ export const deriveStores = context => {
         leftEdge += $visibleColumns[endColIdx].width
         endColIdx++
       }
-      const next = $visibleColumns.slice(startColIdx, endColIdx)
-
-      // Only update if the column selection is actually different
+      const next = $visibleColumns.slice(
+        Math.max(0, startColIdx - 1),
+        endColIdx + 1
+      )
       const current = get(renderedColumns)
-      const currentKey = current.map(col => col.width).join("-")
-      const nextKey = next.map(col => col.width).join("-")
-      if (currentKey !== nextKey) {
+      if (JSON.stringify(next) !== JSON.stringify(current)) {
         set(next)
       }
-    },
-    []
+    }
   )
 
   const hiddenColumnsWidth = derived(