From 6aef6e1d04a8988f97956479fda872987e6f6b13 Mon Sep 17 00:00:00 2001 From: Sagar Prasad Chaulagain Date: Mon, 1 Dec 2025 13:13:55 +0545 Subject: [PATCH 1/3] Added small tolerance of 10px, fixes #1078 --- src/routes/Settings/Settings.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/routes/Settings/Settings.tsx b/src/routes/Settings/Settings.tsx index d7ab68a3c..be992fda1 100644 --- a/src/routes/Settings/Settings.tsx +++ b/src/routes/Settings/Settings.tsx @@ -41,8 +41,9 @@ const Settings = () => { 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 <= container!.scrollTop) { + if (sections[i].ref.current && sections[i].ref.current!.offsetTop - container!.offsetTop - tolerance <= container!.scrollTop) { setSelectedSectionId(sections[i].id); break; } From 8148a2f8febb61e9455f332ff7a7239fd03f31ce Mon Sep 17 00:00:00 2001 From: Sagar Prasad Chaulagain Date: Mon, 1 Dec 2025 13:23:09 +0545 Subject: [PATCH 2/3] 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(null); const generalSectionRef = useRef(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) => { - 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(); From 88fca500f188e5827d0714304844ea009fafe818 Mon Sep 17 00:00:00 2001 From: Sagar Prasad Chaulagain Date: Tue, 9 Dec 2025 08:48:12 +0545 Subject: [PATCH 3/3] fixes #1078 --- src/routes/Settings/Settings.tsx | 54 +++++++++----------------------- 1 file changed, 14 insertions(+), 40 deletions(-) diff --git a/src/routes/Settings/Settings.tsx b/src/routes/Settings/Settings.tsx index 444f4fa8d..2db68da2f 100644 --- a/src/routes/Settings/Settings.tsx +++ b/src/routes/Settings/Settings.tsx @@ -20,7 +20,6 @@ const Settings = () => { const profile = useProfile(); const platform = usePlatform(); const streamingServer = useStreamingServer(); - const isScrollingRef = useRef(false); const sectionsContainerRef = useRef(null); const generalSectionRef = useRef(null); @@ -38,51 +37,26 @@ const Settings = () => { const [selectedSectionId, setSelectedSectionId] = useState(SECTIONS.GENERAL); const updateSelectedSectionId = useCallback(() => { - if (isScrollingRef.current) return; - const container = sectionsContainerRef.current; - 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 { - for (let i = sections.length - 1; i >= 0; i--) { - const section = sections[i].ref.current; - if (section) { - const sectionRect = section.getBoundingClientRect(); - if (sectionRect.top <= containerRect.top + tolerance) { - setSelectedSectionId(sections[i].id); - break; - } - } + for (const section of sections) { + const sectionContainer = section.ref.current; + if (sectionContainer && (sectionContainer.offsetTop + container!.offsetTop) < container!.scrollTop + 50) { + setSelectedSectionId(section.id); } } - }, [sections]); + }, []); const onMenuSelect = useCallback((event: React.MouseEvent) => { - const sectionId = event.currentTarget.dataset.section; - const section = sections.find((s) => s.id === sectionId); + const section = sections.find((section) => { + return section.id === event.currentTarget.dataset.section; + }); + const container = sectionsContainerRef.current; - - 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]); + section && container!.scrollTo({ + top: section.ref.current!.offsetTop - container!.offsetTop, + behavior: 'smooth' + }); + }, []); const onContainerScroll = useCallback(throttle(() => { updateSelectedSectionId();