From 37e00ed9fdb92e348eef134cd1e12257eecd8826 Mon Sep 17 00:00:00 2001
From: fritzschoff <fritzschoff@icloud.com>
Date: Thu, 28 Jul 2022 17:13:38 +0200
Subject: [PATCH] fix(tabs): fix scroll behavior on desktop for tabs that were
 not visible initially

---
 src/components/Tabs/Tabs.stories.tsx | 8 +++++++-
 src/components/Tabs/Tabs.tsx         | 9 ++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
index 3922fcf..dbda1dd 100644
--- a/src/components/Tabs/Tabs.stories.tsx
+++ b/src/components/Tabs/Tabs.stories.tsx
@@ -8,7 +8,13 @@ export default {
   component: Tabs
 };
 
-const Template: Story<ComponentProps<typeof Tabs>> = (args) => <Tabs {...args} />;
+const Template: Story<ComponentProps<typeof Tabs>> = (args) => (
+  <div style={{ height: 1500, display: 'flex', flexDirection: 'column-reverse' }}>
+    <div>
+      <Tabs {...args} />
+    </div>
+  </div>
+);
 
 export const Basic = Template.bind({});
 Basic.args = {
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index 5628f8f..8e1d161 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -46,7 +46,13 @@ export const Tabs: React.FC<TabsProps> = ({
   );
 
   useEffect(() => {
-    if (typeof document !== 'undefined') document.getElementById(String(initial))?.scrollIntoView();
+    if (typeof document !== 'undefined') {
+      const container = document.getElementById('ui-tabs-container');
+      if (container && container?.offsetWidth < container?.scrollWidth) {
+        const target = document.getElementById(String(initial));
+        container?.scroll({ behavior: 'smooth', left: target?.clientWidth, top: 0 });
+      }
+    }
   }, [initial]);
 
   return (
@@ -54,6 +60,7 @@ export const Tabs: React.FC<TabsProps> = ({
       <div
         {...props}
         className={clsx('ui-flex ui-items-center ui-flex-nowrap ui-overflow-auto', className)}
+        id='ui-tabs-container'
       >
         {items.map((item) => (
           <Tab