[incubator-devlake-website] 04/04: fix: Unsymmetric size of the flow chart

[yu...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

yumeng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake-website.git

commit ffc0f41a08ad5ed35a91ac22422582557ba5b60c
Author: Henit Chobisa <ch...@gmail.com>
AuthorDate: Mon Sep 19 20:20:34 2022 +0530

    fix: Unsymmetric size of the flow chart
---
 src/components/Sections/UserFlow.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Sections/UserFlow.tsx b/src/components/Sections/UserFlow.tsx
index 49ecfc98c..a4d4c67ed 100644
--- a/src/components/Sections/UserFlow.tsx
+++ b/src/components/Sections/UserFlow.tsx
@@ -11,9 +11,9 @@ const Card = ({ icon, text, children }: {
   icon: React.ReactNode,
   text: String,
   children: React.ReactNode,
-}) => (<div className="w-[220px] xl:w-[15vw] mobile:mb-6 mobile:text-center">
+}) => (<div className="w-[220px] xl:w-[15vw] xl:max-w-[260px] mobile:mb-6 mobile:text-center">
   <div className="flex flex-col items-center
-   bg-primary-100 w-[220px] xl:w-[15vw] h-[140px] rounded-[6px]
+   bg-primary-100 w-[220px] xl:w-[15vw] xl:max-w-[260px]  h-[140px] rounded-[6px]
    border-primary-500 border-[1px] border-solid
   ">
     <div className="mt-[40px]">{icon}</div>
@@ -22,7 +22,7 @@ const Card = ({ icon, text, children }: {
   <div className="mt-5 text-label18 font-inter pl-1 text-neutral-500">{children}</div>
 </div>)
 
-const Arrow = () => <div className="h-[140px] flex items-center"><BlueArrow className="xl:w-[3.33vw]" /></div>
+const Arrow = () => <div className="h-[140px] flex items-center"><BlueArrow className="xl:w-[3.33vw] xl:max-w-[80px] " /></div>
 
 export function UserFlow() {
   return (