diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx index 3b51e8c2..5b666dd4 100644 --- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx +++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx @@ -3,6 +3,7 @@ import { useDispatch } from 'react-redux' import { setActiveStep } from '../../../redux/ValidatorOnboarding/slice' import { FORM_STEPS } from '../../../constants' +import { useWindowSize } from '../../../hooks/useWindowSize' import './FormStepper.css' type FormStepperProps = { @@ -11,15 +12,28 @@ type FormStepperProps = { const FormStepper = ({ activeStep }: FormStepperProps) => { const dispatch = useDispatch() + const windowSize = useWindowSize() const isStepVisible = (index: number) => { - // if (windowWidth < 1025) { - // const start = activeStep - 1 - // const end = Math.min(FORM_STEPS.length - 1, activeStep + 1) - // return index >= start && index <= end - // } else { - return true - // } + if (windowSize.width < 774) { + const start = Math.min(3, activeStep - 1) + const end = Math.max(FORM_STEPS.length - 5, activeStep + 1) + return index >= start && index <= end + } else if (windowSize.width < 963) { + const start = Math.min(2, activeStep - 1) + const end = Math.max(FORM_STEPS.length - 4, activeStep + 1) + return index >= start && index <= end + } else if (windowSize.width < 1152) { + const start = Math.min(1, activeStep - 1) + const end = Math.max(FORM_STEPS.length - 3, activeStep + 1) + return index >= start && index <= end + } else if (windowSize.width < 1300) { + const start = Math.min(0, activeStep - 1) + const end = Math.max(FORM_STEPS.length - 2, activeStep + 1) + return index >= start && index <= end + } else { + return true + } } const changeStepOnClickHandler = (index: number) => {