fix: tab mobile view issue

Synthetixio · Jun 30, 2022 · d2b2aa2 · d2b2aa2
1 parent e770dbe
commit d2b2aa2
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 9 deletions.
diff --git a/src/components/Tab/Tab.tsx b/src/components/Tab/Tab.tsx
@@ -12,7 +12,7 @@ export type TabProps = {
 export const Tab: React.FC<TabProps> = ({ text, active, onClick, disabled, className }) => (
   <button
     className={clsx(
-      'ui-transition ui-border ui-border-transparent ui-ease-out ui-min-w-button-md ui-rounded-[100px] ui-px-2 ui-py-1.5 ui-whitespace-nowrap',
+      'ui-transition ui-border ui-border-transparent ui-ease-out ui-rounded-[100px] ui-px-2 ui-py-1.5 ui-whitespace-nowrap',
       {
         'ui-text-primary': !active,
         'ui-bg-primary ui-text-white': active,

diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
@@ -16,12 +16,12 @@ Basic.args = {
   items: [
     {
       id: 1,
-      label: 'tab 1',
+      label: 'tab 1 tab 1 tab 1',
       content: <div style={{ display: 'flex' }}>Tab 1</div>
     },
     {
       id: 2,
-      label: 'tab 2',
+      label: 'tab 2 tab 1 tab 2',
       content: null
     },
     {

diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
@@ -46,12 +46,7 @@ export const Tabs: React.FC<TabsProps> = ({
 
   return (
     <>
-      <div
-        className={clsx(
-          'ui-flex ui-items-center ui-justify-center ui-flex-nowrap ui-overflow-auto',
-          className
-        )}
-      >
+      <div className={clsx('ui-flex ui-items-center ui-flex-nowrap ui-overflow-auto', className)}>
         {items.map((item) => (
           <Tab
             key={item.id}