Ensure scroll top is always properly reset and add config store

packages/frontend-core/src/components/sheet/Sheet.svelte

@@ -16,18 +16,20 @@
   import ScrollOverlay from "./ScrollOverlay.svelte"
   import StickyColumn from "./StickyColumn.svelte"
 
-  export let tableId
-  export let filter
-  export let sortColumn
-  export let sortOrder
   export let API
+  export let tableId
+  export let allowAddColumns
+  export let allowAddRows
+  // export let filter
+  // export let sortColumn
+  // export let sortOrder
 
   // Sheet constants
   const cellHeight = 40
   const rand = Math.random()
 
   // State stores
-  const tableIdStore = writable()
+  const config = writable({ tableId, allowAddRows, allowAddColumns })
   const selectedCellId = writable()
   const selectedRows = writable({})
   const hoveredRowId = writable()
@@ -52,7 +54,7 @@
     bounds,
     scroll,
     hoveredRowId,
-    tableId: tableIdStore,
+    config,
   }
   const { rows, schema } = createRowsStore(context)
   context = { ...context, rows, schema }
@@ -64,7 +66,12 @@
   const { reorder } = createReorderStores(context)
   context = { ...context, reorder }
 
-  $: tableIdStore.set(tableId)
+  // Keep config store up to date
+  $: config.set({
+    tableId,
+    allowAddColumns,
+    allowAddRows,
+  })
 
   // Set context for children to consume
   setContext("spreadsheet", context)

packages/frontend-core/src/components/sheet/SheetCell.svelte

@@ -38,7 +38,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    color: var(--spectrum-global-color-gray-900);
+    color: var(--spectrum-global-color-gray-800);
     font-size: var(--cell-font-size);
     gap: var(--cell-spacing);
     background: var(--cell-background);

packages/frontend-core/src/components/sheet/stores/rows.js

@@ -4,7 +4,8 @@ import { fetchData } from "../../../fetch/fetchData"
 import { notifications } from "@budibase/bbui"
 
 export const createRowsStore = context => {
-  const { tableId, filter, API, scroll } = context
+  const { config, filter, API, scroll } = context
+  const tableId = derived(config, $config => $config.tableId)
 
   // Flag for whether this is the first time loading our fetch
   let loaded = false

packages/frontend-core/src/components/sheet/stores/scroll.js

@@ -1,4 +1,4 @@
-import { derived } from "svelte/store"
+import { derived, get } from "svelte/store"
 
 export const createScrollStores = context => {
   const { scroll, rows, columns, stickyColumn, bounds, cellHeight } = context
@@ -49,25 +49,32 @@ export const createScrollStores = context => {
 
   // Ensure scroll state never goes invalid, which can happen when changing
   // rows or tables
-  derived([scrollTop, maxScrollTop], ([$scrollTop, $maxScrollTop]) => {
+  const overscrollTop = derived(
-    console.log($scrollTop, $maxScrollTop, "check")
+    [scrollTop, maxScrollTop],
-    if ($scrollTop > $maxScrollTop) {
+    ([$scrollTop, $maxScrollTop]) => $scrollTop > $maxScrollTop,
+    false
+  )
+  const overscrollLeft = derived(
+    [scrollLeft, maxScrollLeft],
+    ([$scrollLeft, $maxScrollLeft]) => $scrollLeft > $maxScrollLeft,
+    false
+  )
+  overscrollTop.subscribe(overscroll => {
+    if (overscroll) {
       scroll.update(state => ({
         ...state,
-        top: $maxScrollTop,
+        top: get(maxScrollTop),
+      }))
+    }
+  })
+  overscrollLeft.subscribe(overscroll => {
+    if (overscroll) {
+      scroll.update(state => ({
+        ...state,
+        left: get(maxScrollLeft),
       }))
     }
   })
-  // $: {
-  //   if (scrollLeft > maxScrollLeft) {
-  //     setTimeout(() => {
-  //       scroll.update(state => ({
-  //         ...state,
-  //         left: maxScrollLeft,
-  //       }))
-  //     })
-  //   }
-  // }
 
   return {
     contentHeight,