From 8148a2f8febb61e9455f332ff7a7239fd03f31ce Mon Sep 17 00:00:00 2001
From: Sagar Prasad Chaulagain <sagarpc021395@nec.edu.np>
Date: Mon, 1 Dec 2025 13:23:09 +0545
Subject: [PATCH] fixes #1078

---
 src/routes/Settings/Settings.tsx | 51 ++++++++++++++++++++++----------
 1 file changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/routes/Settings/Settings.tsx b/src/routes/Settings/Settings.tsx
index be992fda1..444f4fa8d 100644
--- a/src/routes/Settings/Settings.tsx
+++ b/src/routes/Settings/Settings.tsx
@@ -20,6 +20,7 @@ const Settings = () => {
     const profile = useProfile();
     const platform = usePlatform();
     const streamingServer = useStreamingServer();
+    const isScrollingRef = useRef(false);
 
     const sectionsContainerRef = useRef<HTMLDivElement>(null);
     const generalSectionRef = useRef<HTMLDivElement>(null);
@@ -37,31 +38,51 @@ const Settings = () => {
     const [selectedSectionId, setSelectedSectionId] = useState(SECTIONS.GENERAL);
 
     const updateSelectedSectionId = useCallback(() => {
+        if (isScrollingRef.current) return;
+
         const container = sectionsContainerRef.current;
-        if (container!.scrollTop + container!.clientHeight >= container!.scrollHeight - 50) {
+        if (!container) return;
+
+        const containerRect = container.getBoundingClientRect();
+        const tolerance = 20;
+
+        if (container.scrollTop + container.clientHeight >= container.scrollHeight - 50) {
             setSelectedSectionId(sections[sections.length - 1].id);
         } else {
-            const tolerance = 10;
             for (let i = sections.length - 1; i >= 0; i--) {
-                if (sections[i].ref.current && sections[i].ref.current!.offsetTop - container!.offsetTop - tolerance <= container!.scrollTop) {
-                    setSelectedSectionId(sections[i].id);
-                    break;
+                const section = sections[i].ref.current;
+                if (section) {
+                    const sectionRect = section.getBoundingClientRect();
+                    if (sectionRect.top <= containerRect.top + tolerance) {
+                        setSelectedSectionId(sections[i].id);
+                        break;
+                    }
                 }
             }
         }
-    }, []);
+    }, [sections]);
 
     const onMenuSelect = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
-        const section = sections.find((section) => {
-            return section.id === event.currentTarget.dataset.section;
-        });
-
+        const sectionId = event.currentTarget.dataset.section;
+        const section = sections.find((s) => s.id === sectionId);
         const container = sectionsContainerRef.current;
-        section && container!.scrollTo({
-            top: section.ref.current!.offsetTop - container!.offsetTop,
-            behavior: 'smooth'
-        });
-    }, []);
+
+        if (section && section.ref.current && container) {
+            isScrollingRef.current = true;
+            setSelectedSectionId(section.id);
+
+            const top = section.ref.current.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop;
+
+            container.scrollTo({
+                top,
+                behavior: 'smooth'
+            });
+
+            setTimeout(() => {
+                isScrollingRef.current = false;
+            }, 1000);
+        }
+    }, [sections]);
 
     const onContainerScroll = useCallback(throttle(() => {
         updateSelectedSectionId();