diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue index 6aa847174..53d0210c1 100644 --- a/apps/desktop/src/components/grid/DataGrid.vue +++ b/apps/desktop/src/components/grid/DataGrid.vue @@ -1573,6 +1573,7 @@ const { initColumnWidths, onResizeStart, autoFitColumn, renderedColumnWidths, to sourceRows: computed(() => props.result.rows), columnIndexes: visibleColumnIndexes, gridRef, + scrollbarGutter: gridScrollbarGutter, }); const gridStyle = computed(() => ({ ...columnVars.value, @@ -7763,6 +7764,7 @@ const gridContextMenuItems = computed(() => { .data-grid-scroller { overflow-anchor: none; + scrollbar-gutter: stable; will-change: scroll-position; contain: strict; } diff --git a/apps/desktop/src/composables/useDataGridColumnResize.ts b/apps/desktop/src/composables/useDataGridColumnResize.ts index 4d1efdbd6..9f7fb20fe 100644 --- a/apps/desktop/src/composables/useDataGridColumnResize.ts +++ b/apps/desktop/src/composables/useDataGridColumnResize.ts @@ -15,10 +15,11 @@ export interface UseDataGridColumnResizeOptions { sourceRows: ComputedRef; columnIndexes: ComputedRef; gridRef: Ref; + scrollbarGutter?: Ref; } export function useDataGridColumnResize(options: UseDataGridColumnResizeOptions) { - const { columns, sourceRows, columnIndexes, gridRef } = options; + const { columns, sourceRows, columnIndexes, gridRef, scrollbarGutter } = options; const columnWidths = ref([]); const { width: gridWidth } = useElementSize(gridRef); @@ -80,7 +81,8 @@ export function useDataGridColumnResize(options: UseDataGridColumnResizeOptions) const widths = columnWidths.value; if (widths.length === 0) return widths; - const extraWidth = Math.max(0, gridWidth.value - DATA_GRID_ROW_NUM_WIDTH - baseTotalWidth.value); + const availableWidth = Math.max(0, gridWidth.value - (scrollbarGutter?.value ?? 0)); + const extraWidth = Math.max(0, availableWidth - DATA_GRID_ROW_NUM_WIDTH - baseTotalWidth.value); if (extraWidth === 0) return widths; const extraPerColumn = extraWidth / widths.length;