fix(tabs): when on mobile the inital active tab should be scrolled in…

…to view

src/components/Tab/Tab.tsx

@@ -8,9 +8,18 @@ export type TabProps = {
   onClick: () => void;
   className?: string;
   testId?: string;
+  id: string;
 };
 
-export const Tab: React.FC<TabProps> = ({ text, active, onClick, disabled, className, testId }) => (
+export const Tab: React.FC<TabProps> = ({
+  text,
+  active,
+  onClick,
+  disabled,
+  className,
+  testId,
+  id
+}) => (
   <button
     className={clsx(
       'ui-transition ui-border ui-border-transparent ui-ease-out ui-rounded-[100px] ui-px-2 ui-py-1.5 ui-whitespace-nowrap',
@@ -24,6 +33,7 @@ export const Tab: React.FC<TabProps> = ({ text, active, onClick, disabled, class
       className
     )}
     data-testid={testId}
+    id={id}
     onClick={onClick}
   >
     {text}

src/components/Tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { Tab } from '../Tab/Tab';
 
@@ -45,6 +45,10 @@ export const Tabs: React.FC<TabsProps> = ({
     [activeTab, items]
   );
 
+  useEffect(() => {
+    if (typeof document !== 'undefined') document.getElementById(String(initial))?.scrollIntoView();
+  }, [initial]);
+
   return (
     <>
       <div
@@ -57,6 +61,7 @@ export const Tabs: React.FC<TabsProps> = ({
             active={item.id === activeTab}
             className={clsx('ui-mx-2', tabClassName)}
             disabled={item.disabled}
+            id={item.id}
             testId={'tab-' + item.id}
             text={item.label}
             onClick={() => selectTab(item)}