From 6b40fb8045af50deddcdb0e4d7dcf42fbaf91d6b Mon Sep 17 00:00:00 2001
From: Monalisha Mishra <mishramonalisha76@gmail.com>
Date: Mon, 26 Aug 2024 22:30:17 +0530
Subject: [PATCH] fixed the stepper ui

---
 src/common/components/Stepper.tsx       | 32 +++++++++++++++++++++----
 src/modules/addNewChain/AddNewChain.tsx | 16 ++++++++-----
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/src/common/components/Stepper.tsx b/src/common/components/Stepper.tsx
index 1d8cd7e9b7..16b828f6cd 100644
--- a/src/common/components/Stepper.tsx
+++ b/src/common/components/Stepper.tsx
@@ -1,5 +1,5 @@
 // React + web3 essentials
-import { FC } from 'react';
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
 
 // Components
 import { Box, Text } from 'blocks';
@@ -12,17 +12,39 @@ type StepperProps = {
 };
 
 const Stepper: FC<StepperProps> = ({ steps, setActiveStepKey, completedSteps }) => {
+  const [stepWidth, setStepWidth] = useState(0);
+  const parentRef = useRef<HTMLDivElement>(null);
+  const stepLength = steps?.length;
   const handleChangeActiveStep = (step: string) => {
     if (completedSteps?.includes(step)) {
       setActiveStepKey(step);
     }
   };
+  const updateStepWidth = useCallback(() => {
+    if (parentRef.current) {
+      setStepWidth((parentRef.current.offsetWidth - 32 * (stepLength - 1)) / stepLength);
+    }
+  }, []);
+
+  useEffect(() => {
+    updateStepWidth();
+    window.addEventListener('resize', updateStepWidth);
+
+    return () => {
+      window.removeEventListener('resize', updateStepWidth);
+    };
+  }, [updateStepWidth]);
+
   return (
     <Box
       display="flex"
       gap="spacing-lg"
-      width="inherit"
       justifyContent="space-between"
+      ref={parentRef}
+      width="inherit"
+      css={css`
+        box-sizing: content-box;
+      `}
     >
       {steps.map((step, index) => (
         <Box
@@ -30,9 +52,7 @@ const Stepper: FC<StepperProps> = ({ steps, setActiveStepKey, completedSteps })
           display="flex"
           flexDirection="column"
           gap="spacing-xs"
-          css={css`
-            flex: 1;
-          `}
+          width={`${stepWidth}px`}
           cursor="pointer"
           onClick={() => handleChangeActiveStep(step.value)}
         >
@@ -40,12 +60,14 @@ const Stepper: FC<StepperProps> = ({ steps, setActiveStepKey, completedSteps })
             textAlign="center"
             color={completedSteps.includes(step.value) ? 'text-brand-medium' : 'text-tertiary'}
             variant="h5-semibold"
+            ellipsis
             display={{ ml: 'none', dp: 'block' }}
           >
             {step.label}
           </Text>
 
           <Text
+            ellipsis
             textAlign="center"
             variant="h6-semibold"
             display={{ ml: 'block', dp: 'none' }}
diff --git a/src/modules/addNewChain/AddNewChain.tsx b/src/modules/addNewChain/AddNewChain.tsx
index 1a5748f662..00d8a74503 100644
--- a/src/modules/addNewChain/AddNewChain.tsx
+++ b/src/modules/addNewChain/AddNewChain.tsx
@@ -100,6 +100,7 @@ const AddNewChain: FC = () => {
         alignItems="center"
       >
         <Box
+          width={{ dp: '648px', ml: '357px' }}
           display="flex"
           flexDirection="column"
           alignItems="center"
@@ -216,12 +217,15 @@ const AddNewChain: FC = () => {
             </Box>
           )}
         </Box>
-        <Text
-          color="text-tertiary"
-          variant="c-semibold"
-        >
-          Tip: Please do not exit the process before the address is verified. If you leave, you will need to start over.
-        </Text>
+        <Box margin="spacing-none spacing-md">
+          <Text
+            color="text-tertiary"
+            variant="c-semibold"
+          >
+            Tip: Please do not exit the process before the address is verified. If you leave, you will need to start
+            over.
+          </Text>
+        </Box>
       </Box>
     </FormikChainAliasProvider>
   );