use only in phone view

src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx

@@ -16,32 +16,29 @@ const steps = [
 
 type FormStepperProps = {
   activeStep: number
+  windowWidth: number
 }
 
-const FormStepper = ({ activeStep }: FormStepperProps) => {
+const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
   const isStepVisible = (index: number) => {
-    if (activeStep === 0) {
+    if (windowWidth < 650) {
-      // Show the first three steps if the active step is the first one
+      const start = Math.max(0, activeStep - 1)
-      return index <= 2;
+      const end = Math.min(steps.length - 1, activeStep + 1)
-    } else if (activeStep === steps.length - 1) {
+      return index >= start && index <= end
-      // Show the last three steps if the active step is the last one
-      return index >= steps.length - 3;
     } else {
-      // Otherwise, show the previous, current, and next steps
+      return true
-      return index === activeStep || index === activeStep - 1 || index === activeStep + 1;
     }
   }
-  
+
-   
   const dispatch = useDispatch()
-  
+
   const changeStepOnClickHandler = (index: number) => {
     if (activeStep > index) {
       dispatch(setActiveStep(index))
     }
   }
-  
+
-  const visibleSteps = steps.filter((_, index) => isStepVisible(index));
+  const visibleSteps = steps.filter((_, index) => isStepVisible(index))
   return (
     <Stepper
       activeStep={activeStep}
@@ -51,14 +48,14 @@ const FormStepper = ({ activeStep }: FormStepperProps) => {
       style={{
         fontSize: '14px',
         zIndex: 1,
-        width: '1200px',
+        width: '100%',
         padding: 0,
         marginBottom: '3rem',
         overflow: 'hidden',
       }}
     >
-      {visibleSteps.map((step) => {
+      {visibleSteps.map(step => {
-        const originalIndex = steps.indexOf(step);
+        const originalIndex = steps.indexOf(step)
         return (
           <Step
             key={originalIndex}
@@ -69,7 +66,7 @@ const FormStepper = ({ activeStep }: FormStepperProps) => {
             data-subtitle={step.subtitle}
             data-step={step.label}
           />
-        );
+        )
       })}
     </Stepper>
   )

src/pages/ValidatorOnboarding/Overview/Overview.tsx

@@ -5,7 +5,10 @@ import OverviewCard from './OverviewCard'
 import LinkWithArrow from '../../../components/General/LinkWithArrow'
 import OverviewWrapper from './OverviewWrapper'
 import './overviewLayout.css'
+ 
 const Overview = () => {
+  
+
   return (
     <>
       <OverviewWrapper

src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx

@@ -22,8 +22,18 @@ import './layoutGradient.css'
 import Deposit from './Deposit/Deposit'
 
 import './layoutGradient.css'
+import { useEffect, useState } from 'react'
 
 const ValidatorOnboarding = () => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth)
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth)
+    }
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
   const { activeStep, subStepValidatorSetup } = useSelector(
     (state: RootState) => state.validatorOnboarding,
   )
@@ -44,7 +54,7 @@ const ValidatorOnboarding = () => {
           titleSize={19}
           subtitle="Earn Rewards for securing the Ethereum Network"
         />
-        <FormStepper activeStep={activeStep} />
+        <FormStepper activeStep={activeStep} windowWidth={windowWidth} />
         <ValidatorBoxWrapper>
           {activeStep === 0 && <Overview />}
           {activeStep === 1 && <Advisories />}