From ff15c876782e00480964c7b01963a38ebfb30a5d Mon Sep 17 00:00:00 2001 From: tom Date: Thu, 5 Sep 2024 13:15:37 +0200 Subject: [PATCH 1/2] fix scroll left position calculation when changing the tab --- ui/shared/Tabs/useScrollToActiveTab.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/ui/shared/Tabs/useScrollToActiveTab.tsx b/ui/shared/Tabs/useScrollToActiveTab.tsx index 1f7a205d5a..14c9cc21a3 100644 --- a/ui/shared/Tabs/useScrollToActiveTab.tsx +++ b/ui/shared/Tabs/useScrollToActiveTab.tsx @@ -19,9 +19,14 @@ export default function useScrollToActiveTab({ activeTabIndex, tabsRefs, listRef const activeTabRef = tabsRefs[activeTabIndex]; if (activeTabRef.current && listRef.current) { - const activeTabRect = activeTabRef.current.getBoundingClientRect(); + const left = tabsRefs.slice(0, activeTabIndex) + .map((tab) => tab.current?.getBoundingClientRect()) + .filter(Boolean) + .map((rect) => rect.width) + .reduce((result, item) => result + item, 0); + listRef.current.scrollTo({ - left: activeTabRect.left, + left, behavior: 'smooth', }); } From 8b785e64580f5d09050a5b9bb8587d45d47deae3 Mon Sep 17 00:00:00 2001 From: tom Date: Thu, 5 Sep 2024 13:21:43 +0200 Subject: [PATCH 2/2] do not scroll if the selected tab is on the first page --- ui/shared/Tabs/useScrollToActiveTab.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/ui/shared/Tabs/useScrollToActiveTab.tsx b/ui/shared/Tabs/useScrollToActiveTab.tsx index 14c9cc21a3..8d729899d1 100644 --- a/ui/shared/Tabs/useScrollToActiveTab.tsx +++ b/ui/shared/Tabs/useScrollToActiveTab.tsx @@ -19,12 +19,20 @@ export default function useScrollToActiveTab({ activeTabIndex, tabsRefs, listRef const activeTabRef = tabsRefs[activeTabIndex]; if (activeTabRef.current && listRef.current) { + const containerWidth = listRef.current.getBoundingClientRect().width; + const activeTabWidth = activeTabRef.current.getBoundingClientRect().width; const left = tabsRefs.slice(0, activeTabIndex) .map((tab) => tab.current?.getBoundingClientRect()) .filter(Boolean) .map((rect) => rect.width) .reduce((result, item) => result + item, 0); + const isWithinFirstPage = containerWidth > left + activeTabWidth; + + if (isWithinFirstPage) { + return; + } + listRef.current.scrollTo({ left, behavior: 'smooth',