fix: Auto scroll on left/right of grid if draggable cursor is near it

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -183,6 +183,7 @@ const isAddingColumnAllowed = computed(() => !readOnly.value && !isLocked.value
 const { onDrag, onDragStart, draggedCol, dragColPlaceholderDomRef, toBeDroppedColId } = useColumnDrag({
   fields,
   tableBodyEl,
+  gridWrapper,
 })
 
 // #Variables

packages/nc-gui/components/smartsheet/grid/useColumnDrag.ts

@@ -3,12 +3,15 @@ import type { ColumnType } from 'nocodb-sdk'
 export const useColumnDrag = ({
   fields,
   tableBodyEl,
+  gridWrapper,
 }: {
   fields: Ref<ColumnType[]>
   tableBodyEl: Ref<HTMLElement | undefined>
+  gridWrapper: Ref<HTMLElement | undefined>
 }) => {
   const { updateGridViewColumn, gridViewCols } = useViewColumnsOrThrow()
   const { leftSidebarWidth } = storeToRefs(useSidebarStore())
+  const { width } = useWindowSize()
 
   const draggedCol = ref<ColumnType | null>(null)
   const dragColPlaceholderDomRef = ref<HTMLElement | null>(null)
@@ -72,6 +75,18 @@ export const useColumnDrag = ({
     if (x >= 0) {
       dragColPlaceholderDomRef.value.style.left = `${x.toString()}px`
     }
+
+    const remInPx = parseFloat(getComputedStyle(document.documentElement).fontSize)
+
+    if (x > width.value * 0.5) {
+      setTimeout(() => {
+        gridWrapper.value!.scrollLeft += 2.5
+      }, 250)
+    } else if (x < leftSidebarWidth.value + 10 * remInPx) {
+      setTimeout(() => {
+        gridWrapper.value!.scrollLeft -= 2.5
+      }, 250)
+    }
   }
 
   return {