From d2b2aa2caaf5b2550e8e169e07a68260f9e49487 Mon Sep 17 00:00:00 2001
From: Peiman <peymannaderi3@yahoo.com>
Date: Thu, 30 Jun 2022 13:03:46 +0430
Subject: [PATCH] fix: tab mobile view issue

---
 src/components/Tab/Tab.tsx           | 2 +-
 src/components/Tabs/Tabs.stories.tsx | 4 ++--
 src/components/Tabs/Tabs.tsx         | 7 +------
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/components/Tab/Tab.tsx b/src/components/Tab/Tab.tsx
index be00f51..db00d42 100644
--- 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
index 0fcb043..3922fcf 100644
--- 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
index 8547120..45d8546 100644
--- 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}