From 97a4c199f09ff7689e20b4f830f54321dd2e8d7a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 27 Jun 2024 14:37:33 +0100
Subject: [PATCH] Fix position and styles of button column

---
 .../src/components/grid/layout/ButtonColumn.svelte  | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
index 20cfdb1ec5..9718ddf65f 100644
--- a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
@@ -12,7 +12,7 @@
     rows,
     focusedRow,
     selectedRows,
-    visibleColumns,
+    scrollableColumns,
     scroll,
     isDragging,
     buttonColumnWidth,
@@ -22,12 +22,13 @@
   let container
 
   $: buttons = $props.buttons?.slice(0, 3) || []
-  $: columnsWidth = $visibleColumns.reduce(
+  $: columnsWidth = $scrollableColumns.reduce(
     (total, col) => (total += col.width),
     0
   )
-  $: end = columnsWidth - 1 - $scroll.left
-  $: left = Math.min($width - $buttonColumnWidth, end)
+  $: columnEnd = columnsWidth - $scroll.left - 1
+  $: gridEnd = $width - $buttonColumnWidth
+  $: left = Math.min(columnEnd, gridEnd)
 
   const handleClick = async (button, row) => {
     await button.onClick?.(rows.actions.cleanRow(row))
@@ -49,6 +50,7 @@
   class="button-column"
   style="left:{left}px"
   class:hidden={$buttonColumnWidth === 0}
+  class:right-border={left !== gridEnd}
 >
   <div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
     <GridScrollWrapper scrollVertically attachHandlers bind:ref={container}>
@@ -134,4 +136,7 @@
   .button-column :global(.cell) {
     border-left: var(--cell-border);
   }
+  .button-column:not(.right-border) :global(.cell) {
+    border-right-color: transparent;
+  }
 </style>