From ea14af8a64eeba84b3a964b13f63a49bfd67906f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 28 May 2024 11:00:47 +0100
Subject: [PATCH 1/4] Offset button column to account for vertical scrollbar if
 required

---
 .../src/components/grid/layout/ButtonColumn.svelte   |  7 ++++++-
 .../src/components/grid/layout/Grid.svelte           |  3 ++-
 .../components/grid/overlays/ScrollOverlay.svelte    | 12 ++++++------
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
index 3448042894..2e9bcf43d5 100644
--- a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
@@ -3,6 +3,7 @@
   import { Button } from "@budibase/bbui"
   import GridCell from "../cells/GridCell.svelte"
   import GridScrollWrapper from "./GridScrollWrapper.svelte"
+  import { ScrollBarSize } from "../lib/constants"
 
   const {
     renderedRows,
@@ -16,6 +17,7 @@
     scroll,
     isDragging,
     buttonColumnWidth,
+    showVScrollbar,
   } = getContext("grid")
 
   let measureContainer
@@ -67,7 +69,7 @@
             selected={rowSelected}
             highlighted={rowHovered || rowFocused}
           >
-            <div class="buttons">
+            <div class="buttons" class:offset={$showVScrollbar}>
               {#each buttons as button}
                 <Button
                   newStyles
@@ -121,6 +123,9 @@
     gap: var(--cell-padding);
     height: inherit;
   }
+  .buttons.offset {
+    padding-right: calc(var(--cell-padding) + 2 * var(--scroll-bar-size) - 2px);
+  }
   .buttons :global(.spectrum-Button-Label) {
     display: flex;
     align-items: center;
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index 4fb3747bfd..5eb14beede 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -29,6 +29,7 @@
     Padding,
     SmallRowHeight,
     ControlsHeight,
+    ScrollBarSize,
   } from "../lib/constants"
 
   export let API = null
@@ -145,7 +146,7 @@
   class:quiet
   on:mouseenter={() => gridFocused.set(true)}
   on:mouseleave={() => gridFocused.set(false)}
-  style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-overflow:{MaxCellRenderOverflow}px; --content-lines:{$contentLines}; --min-height:{$minHeight}px; --controls-height:{ControlsHeight}px;"
+  style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-overflow:{MaxCellRenderOverflow}px; --content-lines:{$contentLines}; --min-height:{$minHeight}px; --controls-height:{ControlsHeight}px; --scroll-bar-size:{ScrollBarSize}px;"
 >
   {#if showControls}
     <div class="controls">
diff --git a/packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte b/packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte
index 71d04ecbda..f7a18eb2f8 100644
--- a/packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte
@@ -119,7 +119,7 @@
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     class="v-scrollbar"
-    style="--size:{ScrollBarSize}px; top:{barTop}px; height:{barHeight}px;"
+    style="top:{barTop}px; height:{barHeight}px;"
     on:mousedown={startVDragging}
     on:touchstart={startVDragging}
     class:dragging={isDraggingV}
@@ -129,7 +129,7 @@
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     class="h-scrollbar"
-    style="--size:{ScrollBarSize}px; left:{barLeft}px; width:{barWidth}px;"
+    style="left:{barLeft}px; width:{barWidth}px;"
     on:mousedown={startHDragging}
     on:touchstart={startHDragging}
     class:dragging={isDraggingH}
@@ -149,11 +149,11 @@
     opacity: 1;
   }
   .v-scrollbar {
-    width: var(--size);
-    right: var(--size);
+    width: var(--scroll-bar-size);
+    right: var(--scroll-bar-size);
   }
   .h-scrollbar {
-    height: var(--size);
-    bottom: var(--size);
+    height: var(--scroll-bar-size);
+    bottom: var(--scroll-bar-size);
   }
 </style>

From 9c446fee6b1c315c828f616fb6612d509e2f948d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 28 May 2024 11:01:11 +0100
Subject: [PATCH 2/4] Lint

---
 .../frontend-core/src/components/grid/layout/ButtonColumn.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
index 2e9bcf43d5..d098309ac9 100644
--- a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
@@ -3,7 +3,6 @@
   import { Button } from "@budibase/bbui"
   import GridCell from "../cells/GridCell.svelte"
   import GridScrollWrapper from "./GridScrollWrapper.svelte"
-  import { ScrollBarSize } from "../lib/constants"
 
   const {
     renderedRows,

From 1a83b746b5095aed9b1baddf0d93dec94e829555 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 28 May 2024 14:41:21 +0100
Subject: [PATCH 3/4] Ensure grid autoscroll for selected cell visibility
 accounts for button column width

---
 packages/frontend-core/src/components/grid/stores/scroll.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/frontend-core/src/components/grid/stores/scroll.js b/packages/frontend-core/src/components/grid/stores/scroll.js
index b071c1fc38..e7114cd00c 100644
--- a/packages/frontend-core/src/components/grid/stores/scroll.js
+++ b/packages/frontend-core/src/components/grid/stores/scroll.js
@@ -109,6 +109,7 @@ export const initialise = context => {
     maxScrollTop,
     scrollLeft,
     maxScrollLeft,
+    buttonColumnWidth,
   } = context
 
   // Ensure scroll state never goes invalid, which can happen when changing
@@ -194,8 +195,10 @@ export const initialise = context => {
 
     // Ensure column is not cutoff on right edge
     else {
+      const $buttonColumnWidth = get(buttonColumnWidth)
       const rightEdge = column.left + column.width
-      const rightBound = $bounds.width + $scroll.left - FocusedCellMinOffset
+      const rightBound =
+        $bounds.width + $scroll.left - FocusedCellMinOffset - $buttonColumnWidth
       delta = rightEdge - rightBound
       if (delta > 0) {
         scroll.update(state => ({

From 35842525c5e8a5e709fc184fe510bda5f4476803 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 29 May 2024 08:47:57 +0100
Subject: [PATCH 4/4] Fix bug where button columns couldn't observe dimensions
 when no rows exist

---
 .../src/components/grid/layout/ButtonColumn.svelte         | 7 +++----
 .../src/components/grid/layout/GridScrollWrapper.svelte    | 3 ++-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
index d098309ac9..20cfdb1ec5 100644
--- a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
@@ -19,7 +19,7 @@
     showVScrollbar,
   } = getContext("grid")
 
-  let measureContainer
+  let container
 
   $: buttons = $props.buttons?.slice(0, 3) || []
   $: columnsWidth = $visibleColumns.reduce(
@@ -40,7 +40,7 @@
       const width = entries?.[0]?.contentRect?.width ?? 0
       buttonColumnWidth.set(width)
     })
-    observer.observe(measureContainer)
+    observer.observe(container)
   })
 </script>
 
@@ -51,7 +51,7 @@
   class:hidden={$buttonColumnWidth === 0}
 >
   <div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
-    <GridScrollWrapper scrollVertically attachHandlers>
+    <GridScrollWrapper scrollVertically attachHandlers bind:ref={container}>
       {#each $renderedRows as row}
         {@const rowSelected = !!$selectedRows[row._id]}
         {@const rowHovered = $hoveredRowId === row._id}
@@ -60,7 +60,6 @@
           class="row"
           on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
           on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
-          bind:this={measureContainer}
         >
           <GridCell
             width="auto"
diff --git a/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte b/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
index 88fb57ba8f..763b01dd84 100644
--- a/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
+++ b/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
@@ -18,6 +18,7 @@
   export let scrollVertically = false
   export let scrollHorizontally = false
   export let attachHandlers = false
+  export let ref
 
   // Used for tracking touch events
   let initialTouchX
@@ -109,7 +110,7 @@
   on:touchmove={attachHandlers ? handleTouchMove : null}
   on:click|self={() => ($focusedCellId = null)}
 >
-  <div {style} class="inner">
+  <div {style} class="inner" bind:this={ref}>
     <slot />
   </div>
 </div>