Merge pull request #234 from deriv-com/hasan/tab-responsive-fix

deriv-com · Dec 4, 2023 · dc4b969 · dc4b969
2 parents 6bed89a + 523501d
commit dc4b969
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 14 deletions.
diff --git a/libs/blocks/src/lib/platform/tab/index.tsx b/libs/blocks/src/lib/platform/tab/index.tsx
@@ -30,14 +30,16 @@ const PlatformBlockTab = ({
         className,
       )}
     >
-      <FluidContainer className="flex flex-col items-center justify-center">
-        <div className="flex flex-col items-center justify-center gap-gap-3xl">
-          {header && <Heading.H2>{header}</Heading.H2>}
+      <FluidContainer>
+        <div className="flex flex-col gap-gap-3xl">
+          {header && <Heading.H2 className="text-center">{header}</Heading.H2>}
           <Tab.Base tabs={tabs} className="flex flex-col gap-gap-2xl">
             {children}
           </Tab.Base>
         </div>
-        {description && <Text className="my-general-xl">{description}</Text>}
+        {description && (
+          <Text className="my-general-xl text-center">{description}</Text>
+        )}
       </FluidContainer>
     </Section>
   );

diff --git a/libs/components/src/lib/live-market/container/index.tsx b/libs/components/src/lib/live-market/container/index.tsx
@@ -38,10 +38,10 @@ export const Container = ({
         className,
       )}
     >
-      <FluidContainer className="flex flex-col items-center justify-center gap-gap-3xl">
-        {header && <Heading.H2>{header}</Heading.H2>}
+      <FluidContainer className="flex flex-col gap-gap-3xl">
+        {header && <Heading.H2 className="text-center">{header}</Heading.H2>}
         {children}
-        {description && <Text>{description}</Text>}
+        {description && <Text className="text-center">{description}</Text>}
         {link && (
           <CustomLink
             size="md"
@@ -53,7 +53,7 @@ export const Container = ({
           </CustomLink>
         )}
         {disclaimer && (
-          <div className="max-w-[816px] max-sm:px-general-md">
+          <div className="mx-auto max-w-[816px] max-sm:px-general-md">
             <Text size="sm" className="text-center text-typography-subtle">
               {disclaimer}
             </Text>

diff --git a/libs/components/src/lib/tab/base/index.tsx b/libs/components/src/lib/tab/base/index.tsx
@@ -16,7 +16,7 @@ export interface TabProps {
 export const TabBase = ({ tabs, children, className }: TabProps) => {
   return (
     <Tab.Container className={className}>
-      <Tab.List className="justify-center">
+      <Tab.List>
         {tabs.map(({ children, ...rest }, i) => (
           <Tab.Trigger {...rest} key={i}>
             {children}

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
   },
   "private": true,
   "dependencies": {
-    "@deriv/quill-design": "^1.2.4",
+    "@deriv/quill-design": "^1.2.5",
     "@deriv/quill-icons": "^1.0.11",
     "@nx/next": "16.8.1",
     "@react-hook/window-size": "^3.1.1",