Show only three steps when in mobile view

src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx

@@ -19,6 +19,20 @@ type FormStepperProps = {
 }
 
 const FormStepper = ({ activeStep }: FormStepperProps) => {
+  const isStepVisible = (index: number) => {
+    if (activeStep === 0) {
+      // Show the first three steps if the active step is the first one
+      return index <= 2;
+    } else if (activeStep === steps.length - 1) {
+      // 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 index === activeStep || index === activeStep - 1 || index === activeStep + 1;
+    }
+  }
+  
+   
   const dispatch = useDispatch()
   
   const changeStepOnClickHandler = (index: number) => {
@@ -27,6 +41,7 @@ const FormStepper = ({ activeStep }: FormStepperProps) => {
     }
   }
   
+  const visibleSteps = steps.filter((_, index) => isStepVisible(index));
   return (
     <Stepper
       activeStep={activeStep}
@@ -42,17 +57,20 @@ const FormStepper = ({ activeStep }: FormStepperProps) => {
         overflow: 'hidden',
       }}
     >
-      {steps.map((step, index) => (
+      {visibleSteps.map((step) => {
-        <Step
+        const originalIndex = steps.indexOf(step);
-          key={index}
+        return (
-          label={step.label}
+          <Step
-          className="custom-step"
+            key={originalIndex}
-          onClick={() => changeStepOnClickHandler(index)}
+            label={step.label}
-          completed={activeStep > index - 1}
+            className="custom-step"
-          data-subtitle={step.subtitle}
+            onClick={() => changeStepOnClickHandler(originalIndex)}
-          data-step={step.label}
+            completed={activeStep > originalIndex - 1}
-        />
+            data-subtitle={step.subtitle}
-      ))}
+            data-step={step.label}
+          />
+        );
+      })}
     </Stepper>
   )
 }