From f74fd5588e5510a4e31425e720828a85e002229d Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 16 Mar 2022 09:40:08 +0300
Subject: [PATCH] Scroll active tab into view

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/dock/dock-tabs.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/dock/dock-tabs.tsx b/src/renderer/components/dock/dock-tabs.tsx
index 469ac8a67b..97cb3d05fa 100644
--- a/src/renderer/components/dock/dock-tabs.tsx
+++ b/src/renderer/components/dock/dock-tabs.tsx
@@ -26,6 +26,10 @@ export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: DockTabs
   const minTabSize = useRef<number>(0);
   const [showScrollbar, setShowScrollbar] = useState<boolean>(false);
 
+  const getTabElements = (): HTMLDivElement[] => {
+    return Array.from(elem.current?.querySelectorAll(".Tabs .Tab"));
+  };
+
   const renderTab = (tab?: DockTabModel) => {
     if (!tab) {
       return null;
@@ -45,9 +49,14 @@ export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: DockTabs
     }
   };
 
+  const scrollActiveTabIntoView = () => {
+    const tab = elem.current?.querySelector(".Tab.active");
+
+    tab?.scrollIntoView();
+  };
+
   const updateScrollbarVisibility = () => {
-    const allTabs: HTMLElement[] = Array.from(elem.current?.querySelectorAll(".Tabs .Tab"));
-    const allTabsShrinked = allTabs.every(tab => tab.offsetWidth == minTabSize.current);
+    const allTabsShrinked = getTabElements().every(tab => tab.offsetWidth == minTabSize.current);
 
     setShowScrollbar(allTabsShrinked);
   };
@@ -62,7 +71,10 @@ export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: DockTabs
     updateScrollbarVisibility();
   }, [tabs]);
 
-  useResizeObserver(elem.current, updateScrollbarVisibility);
+  useResizeObserver(elem.current, () => {
+    scrollActiveTabIntoView();
+    updateScrollbarVisibility();
+  });
 
   return (
     <div className={styles.dockTabs} ref={elem}>