feat: use new hook to make stepper responsive

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) => {