Fix pixel layout issues with buttons column

packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte

@@ -14,7 +14,7 @@
     focusedRow,
     selectedRows,
     scrollableColumns,
-    scroll,
+    scrollLeft,
     isDragging,
     buttonColumnWidth,
     showVScrollbar,
@@ -28,8 +28,8 @@
     (total, col) => (total += col.width),
     0
   )
-  $: columnEnd = columnsWidth - $scroll.left - 1
+  $: columnEnd = columnsWidth - $scrollLeft - 1
-  $: gridEnd = $width - $buttonColumnWidth
+  $: gridEnd = $width - $buttonColumnWidth - 1
   $: left = Math.min(columnEnd, gridEnd)
 
   const handleClick = async (button, row) => {
@@ -41,7 +41,7 @@
   onMount(() => {
     const observer = new ResizeObserver(entries => {
       const width = entries?.[0]?.contentRect?.width ?? 0
-      buttonColumnWidth.set(width)
+      buttonColumnWidth.set(Math.floor(width) - 1)
     })
     observer.observe(container)
   })

packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte

@@ -13,6 +13,8 @@
     hoveredRowId,
     menu,
     focusedCellAPI,
+    scrollTop,
+    scrollLeft,
   } = getContext("grid")
 
   export let scrollVertically = false
@@ -24,11 +26,11 @@
   let initialTouchX
   let initialTouchY
 
-  $: style = generateStyle($scroll, $rowHeight)
+  $: style = generateStyle($scrollLeft, $scrollTop, $rowHeight)
 
-  const generateStyle = (scroll, rowHeight) => {
+  const generateStyle = (scrollLeft, scrollTop, rowHeight) => {
-    const offsetX = scrollHorizontally ? -1 * scroll.left : 0
+    const offsetX = scrollHorizontally ? -1 * scrollLeft : 0
-    const offsetY = scrollVertically ? -1 * (scroll.top % rowHeight) : 0
+    const offsetY = scrollVertically ? -1 * (scrollTop % rowHeight) : 0
     return `transform: translate3d(${offsetX}px, ${offsetY}px, 0);`
   }
 

packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte

@@ -3,8 +3,14 @@
   import { Icon } from "@budibase/bbui"
   import GridPopover from "../overlays/GridPopover.svelte"
 
-  const { scrollableColumns, scroll, width, subscribe, ui, keyboardBlocked } =
+  const {
-    getContext("grid")
+    scrollableColumns,
+    scrollLeft,
+    width,
+    subscribe,
+    ui,
+    keyboardBlocked,
+  } = getContext("grid")
 
   let anchor
   let isOpen = false
@@ -13,7 +19,7 @@
     (total, col) => (total += col.width),
     0
   )
-  $: end = columnsWidth - 1 - $scroll.left
+  $: end = columnsWidth - 1 - $scrollLeft
   $: left = Math.min($width - 40, end)
   $: keyboardBlocked.set(isOpen)
 

packages/frontend-core/src/components/grid/stores/reorder.js

@@ -119,12 +119,12 @@ export const createActions = context => {
   // Actual logic to consider the current position and determine the new order
   const considerReorderPosition = () => {
     const $reorder = get(reorder)
-    const $scroll = get(scroll)
+    const $scrollLeft = get(scrollLeft)
 
     // Compute the closest breakpoint to the current position
     let breakpoint
     let minDistance = Number.MAX_SAFE_INTEGER
-    const mouseX = latestX - $reorder.gridLeft + $scroll.left
+    const mouseX = latestX - $reorder.gridLeft + $scrollLeft
     $reorder.breakpoints.forEach(point => {
       const distance = Math.abs(point.x - mouseX)
       if (distance < minDistance) {

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

@@ -16,8 +16,8 @@ export const createStores = () => {
   })
 
   // Derive height and width as primitives to avoid wasted computation
-  const scrollTop = derived(scroll, $scroll => $scroll.top, 0)
+  const scrollTop = derived(scroll, $scroll => Math.round($scroll.top))
-  const scrollLeft = derived(scroll, $scroll => $scroll.left, 0)
+  const scrollLeft = derived(scroll, $scroll => Math.round($scroll.left))
 
   return {
     scroll,
@@ -46,11 +46,11 @@ export const deriveStores = context => {
   const contentWidth = derived(
     [visibleColumns, buttonColumnWidth],
     ([$visibleColumns, $buttonColumnWidth]) => {
-      let width = GutterWidth + $buttonColumnWidth
+      let width = GutterWidth + Math.max($buttonColumnWidth, HPadding)
       $visibleColumns.forEach(col => {
         width += col.width
       })
-      return width + HPadding
+      return width
     }
   )
   const screenWidth = derived(
@@ -62,7 +62,7 @@ export const deriveStores = context => {
   const maxScrollLeft = derived(
     [contentWidth, screenWidth],
     ([$contentWidth, $screenWidth]) => {
-      return Math.max($contentWidth - $screenWidth, 0)
+      return Math.round(Math.max($contentWidth - $screenWidth, 0))
     }
   )
   const showHScrollbar = derived(
@@ -85,7 +85,8 @@ export const deriveStores = context => {
   )
   const maxScrollTop = derived(
     [height, contentHeight],
-    ([$height, $contentHeight]) => Math.max($contentHeight - $height, 0)
+    ([$height, $contentHeight]) =>
+      Math.round(Math.max($contentHeight - $height, 0))
   )
   const showVScrollbar = derived(
     [contentHeight, height],