stepper width fix

src/Pages/OptiFiiExpense/wallet/BenifitStepThree.jsx

@@ -45,7 +45,7 @@ const BenifitStepThree = () => {
                                 <Radio size='md' name='1' colorScheme='purple' value='1'>
                                     <Text fontSize="xs" fontWeight="500" color={"#3F4754"} mb={0}>All transaction</Text>
                                 </Radio>
-                                <HStack alignItems={"start"}>
+                                <HStack>
                                     <Radio size='md' name='1' colorScheme='purple' value='2'>
                                         <Text fontSize="xs" fontWeight="500" color={"#3F4754"} mb={0}>Transaction above</Text>
                                     </Radio>

src/Pages/OptiFiiExpense/wallet/CreateBenefitWalletModal.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import {
   Box, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton, Text, Input, Select, Stack,
   HStack,
@@ -18,7 +18,7 @@ import RupeeSlider from '../../../Components/RupeeSlider/RupeeSlider';
 import BenifitStepOne from './BenifitStepOne';
 import BenifitStepTwo from './BenifitStepTwo';
 import BenifitStepThree from './BenifitStepThree';
-                        
+
 const CreateBenefitWalletModal = ({ isOpen, onClose }) => {
   // Define steps
   const steps = [
@@ -30,6 +30,8 @@ const CreateBenefitWalletModal = ({ isOpen, onClose }) => {
 
   // Use useState to control the active step
   const [activeStep, setActiveStep] = useState(0);
+  const stepRefs = useRef([]); // Create refs for each step
+
 
   const nextStep = () => {
     if (activeStep < steps.length - 1) {
@@ -46,9 +48,9 @@ const CreateBenefitWalletModal = ({ isOpen, onClose }) => {
   return (
     <Box>
       {/* Modal component */}
-      <Modal size={"xl"} isOpen={isOpen} onClose={onClose} isCentered>
+      <Modal isOpen={isOpen} onClose={onClose} isCentered>
         <ModalOverlay />
-        <ModalContent>
+        <ModalContent maxW={"800px"}>
           <ModalHeader>Create Benefit Wallet</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
@@ -68,7 +70,7 @@ const CreateBenefitWalletModal = ({ isOpen, onClose }) => {
                 },
               }}
             >
-              <Box w="130%"> {/* Set the stepper width to 130% */}
+              <Box>
                 <Stepper size="lg" index={activeStep} color={"#3725EA"} gap={1}>
                   {steps.map((step, index) => (
                     <Step key={index}>