diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx index dcd0f941..91661398 100644 --- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx +++ b/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) { - // 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; + if (windowWidth < 650) { + const start = Math.max(0, activeStep - 1) + const end = Math.min(steps.length - 1, activeStep + 1) + return index >= start && index <= end } else { - // Otherwise, show the previous, current, and next steps - return index === activeStep || index === activeStep - 1 || index === activeStep + 1; + return true } } - - + 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 ( { style={{ fontSize: '14px', zIndex: 1, - width: '1200px', + width: '100%', padding: 0, marginBottom: '3rem', overflow: 'hidden', }} > - {visibleSteps.map((step) => { - const originalIndex = steps.indexOf(step); + {visibleSteps.map(step => { + const originalIndex = steps.indexOf(step) return ( { data-subtitle={step.subtitle} data-step={step.label} /> - ); + ) })} ) diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx index 578c738d..78220680 100644 --- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx +++ b/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 ( <> { + 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" /> - + {activeStep === 0 && } {activeStep === 1 && }