refactor sticky scroll handler

- because of making the root's child div styles as override: auto it won't be a ref for the sticky category logic

src/contexts/ScrollHandlerContext.tsx

@@ -41,10 +41,36 @@ export function ScrollHandlerProvider({ children }: { children: ReactNode }) {
   // Function to scroll to a specific category
   const scrollToCategory = useCallback((categoryId: number) => {
     const categoryRef = categoryRefs.current?.[categoryId];
-    if (categoryRef) {
-      categoryRef.scrollIntoView({
-        behavior: "smooth",
-        block: "start",
+    
+    // Use a more stable approach to find the scroll container
+    const findScrollContainer = () => {
+      const antApp = document.querySelector('.ant-app') as HTMLElement;
+      if (antApp && antApp.scrollHeight > antApp.clientHeight) {
+        return antApp;
+      }
+      
+      const appContainer = document.querySelector('[class*="App"]') as HTMLElement;
+      if (appContainer && appContainer.scrollHeight > appContainer.clientHeight) {
+        return appContainer;
+      }
+      
+      return document.documentElement;
+    };
+    
+    const scrollContainer = findScrollContainer();
+    
+    if (categoryRef && scrollContainer) {
+      // Get the position of the category relative to the scroll container
+      const categoryRect = categoryRef.getBoundingClientRect();
+      const containerRect = scrollContainer.getBoundingClientRect();
+      
+      // Calculate the target scroll position
+      const targetScrollTop = scrollContainer.scrollTop + categoryRect.top - containerRect.top;
+      
+      // Smooth scroll to the target position
+      scrollContainer.scrollTo({
+        top: targetScrollTop,
+        behavior: "smooth"
       });
     }
   }, []);