fixed the stepper ui

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,40 +12,62 @@ 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
  key={index}
  display="flex"
  flexDirection="column"
  gap="spacing-xs"
- css={css`
- flex: 1;
- `}
+ width={`${stepWidth}px`}
  cursor="pointer"
  onClick={() => handleChangeActiveStep(step.value)}
  >
  <Text
  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' }}

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>
  );