From bad1f966c0a399ac8064392d70c57388720ec054 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Thu, 26 Oct 2023 16:52:29 +0000
Subject: [PATCH] fix: Auto scroll on left/right of grid if draggable cursor is
 near it

---
 .../nc-gui/components/smartsheet/grid/Table.vue   |  1 +
 .../components/smartsheet/grid/useColumnDrag.ts   | 15 +++++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index 8e4cc1a313..583f7627a2 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/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
diff --git a/packages/nc-gui/components/smartsheet/grid/useColumnDrag.ts b/packages/nc-gui/components/smartsheet/grid/useColumnDrag.ts
index 5991dab26e..6424b7e589 100644
--- a/packages/nc-gui/components/smartsheet/grid/useColumnDrag.ts
+++ b/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 {