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] 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>