Use scroll left instead of intersection observer (#3522)

packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useListenScroll.ts

@@ -2,6 +2,9 @@ import { useEffect } from 'react';
 import debounce from 'lodash.debounce';
 import { useRecoilCallback } from 'recoil';
 
+import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
+import { scrollTopState } from '@/ui/utilities/scroll/states/scrollTopState';
+
 import { isScrollingState } from '../states/isScrollingState';
 
 export const useListenScroll = <T extends Element>({
@@ -11,14 +14,20 @@ export const useListenScroll = <T extends Element>({
 }) => {
   const hideScrollBarsCallback = useRecoilCallback(({ snapshot }) => () => {
     const isScrolling = snapshot.getLoadable(isScrollingState).getValue();
+
     if (!isScrolling) {
       scrollableRef.current?.classList.remove('scrolling');
     }
   });
 
-  const handleScrollStart = useRecoilCallback(({ set }) => () => {
+  const handleScrollStart = useRecoilCallback(({ set }) => (event: Event) => {
     set(isScrollingState, true);
     scrollableRef.current?.classList.add('scrolling');
+
+    const target = event.target as HTMLElement;
+
+    set(scrollTopState, target.scrollTop);
+    set(scrollLeftState, target.scrollLeft);
   });
 
   const handleScrollEnd = useRecoilCallback(({ set }) => () => {

packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollLeftState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const scrollLeftState = atom<number>({
+  key: 'scroll/scrollLeftState',
+  default: 0,
+});

packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollTopState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const scrollTopState = atom<number>({
+  key: 'scroll/scrollTopState',
+  default: 0,
+});