add scrollableArea state to manage scroll

client/src/containers/panel/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { useAtomValue, useAtom } from 'jotai';
 import { ChevronLeft } from 'lucide-react';
@@ -17,16 +17,20 @@ export default function Panel({ children }: { children: React.ReactNode }) {
   const hoveredProjectMap = useAtomValue(hoveredProjectMapAtom);
   const [open, setOpen] = useAtom(openAtom);
 
+  const [scrollableArea, setScrollableArea] = useState<boolean>(false);
+
   const scrollRef = useRef(null);
 
   useEffect(() => {
     if (!hoveredProjectMap) return;
     const element = document.getElementById(hoveredProjectMap);
-    element?.scrollIntoView({ behavior: 'smooth' });
-  }, [hoveredProjectMap]);
+    !scrollableArea && element?.scrollIntoView({ behavior: 'smooth' });
+  }, [hoveredProjectMap, scrollableArea]);
 
   return (
     <div
+      onMouseEnter={() => setScrollableArea(true)}
+      onMouseLeave={() => setScrollableArea(false)}
       className={cn({
         'animate-in slide-in-from-left fade-in rounded-4xl bg-background after:rounded-b-4xl before:rounded-t-4xl absolute bottom-0 top-0 z-10 my-2 flex w-full max-w-[342px] flex-col shadow-md transition-transform duration-700 before:absolute before:left-0 before:top-1 before:h-6 before:w-full before:bg-gradient-to-b before:from-white/100 before:to-white/0 before:content-[""] after:absolute after:bottom-1 after:left-0 after:h-6 after:w-full after:bg-gradient-to-t after:from-white/0 after:to-white/100 after:content-[""] xl:max-w-[400px]':
           true,

client/src/containers/projects/list.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { MouseEvent, useCallback, useState } from 'react';
 
 import { useSetAtom } from 'jotai';
 import { Search, X } from 'lucide-react';
@@ -132,6 +132,14 @@ export default function ProjectsList() {
     }
   );
 
+  const handleHover = useCallback(
+    (e: MouseEvent<HTMLElement>) => {
+      const currentValue = e.currentTarget.getAttribute('data-value');
+      setHoveredProjectList(currentValue);
+    },
+    [setHoveredProjectList]
+  );
+
   const filtersLength = Object.entries(filtersSettings)
     .flat()
     .filter((el) => typeof el === 'object')
@@ -191,6 +199,7 @@ export default function ProjectsList() {
                   type="button"
                   key={project?.id}
                   data-value={project?.attributes?.project_code}
+                  onMouseEnter={handleHover}
                   onMouseLeave={() => setHoveredProjectList(null)}
                 >
                   <ProjectItem data={project} />