virtual card modal height adjusted

src/components/MyWallet/walletvirtual/VirtualAddCardPopout.jsx

@@ -14,8 +14,8 @@ const validationSchema = Yup.object().shape({
   country: Yup.string()
     .required("Required"),
   phone_number: Yup.string()
-    .min(9, "Min 9 characters")
+    .min(9, "Invalid")
-    .max(11, "Max 11 characters")
+    .max(11, "Invalid")
     .required("Required"),
   // birthYear: Yup.string()
   //   .required("Required"),
@@ -177,8 +177,8 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
         onSubmit={handleSubmit}
       >
         {(props) => (
-          <Form className="w-full overflow-y-auto">
+          <div className="logout-modal-wrapper mx-auto w-[90%] md:w-[768px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
-            <div className="logout-modal-wrapper mx-auto w-[90%] lg:w-[900px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+            <Form className="w-full">
               <div className="modal-header-con">
                 <h1 className="modal-title">
                   {walletItem?.description}
@@ -209,12 +209,15 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                   </svg>
                 </button>
               </div>
-              <div className="p-4 w-full grid lg:grid-cols-2 gap-4">
+              <div className='p-4 w-full flex flex-col h-auto md:h-[28rem]'>
+                <div className='pb-4'>
+                  <h1 className='text-lg md:text-xl flex gap-1'><span className='font-bold'>Name:</span>{userDetails.lastname} {userDetails.firstname}</h1>
+                </div>
+                <div className="grid md:grid-cols-2 gap-4">
                   {/* left part */}
                   <div className='w-full flex flex-col gap-4'>
-                  <h1 className='text-lg md:text-xl flex gap-1'><span className='font-bold'>Name:</span>{userDetails.lastname} {userDetails.firstname}</h1>
+                    <div className="field w-full grid md:grid-cols-5 gap-4">
-                  <div className="field w-full grid md:grid-cols-3 gap-4">
+                        <div className="md:col-span-2 field w-full">
-                      <div className="md:col-span-1 field w-full">
                           <label
                             htmlFor="country"
                             className="job-label job-label-flex"
@@ -256,7 +259,7 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                             }
                           </select>
                         </div>
-                      <div className='md:col-span-2'>
+                        <div className='md:col-span-3'>
                           <InputCom
                           fieldClass="px-6"
                           label="Phone Number"
@@ -312,9 +315,11 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                         error={(props.errors.lastname && props.touched.lastname) && props.errors.lastname}
                       />
                     </div>
-                  <div className="field w-full flex flex-col gap-4">
+
-                      <p className='hidden job-label'>Date of Birth</p>
+                    {/* hidden section */}
-                      <div className='hidden xxs:grid-cols-3 gap-4'>
+                    <div className="hidden field w-full flex-col gap-4">
+                        <p className='job-label'>Date of Birth</p>
+                        <div className='xxs:grid-cols-3 gap-4'>
                           <div className="field w-full">
                             <label
                               htmlFor="birthDay"
@@ -409,11 +414,15 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                             </select>
                           </div>
                         </div>
-                      <div className=''>
+                    </div>
+
+                    <div className="field w-full grid md:grid-cols-3 gap-4">
+                      <p className='hidden md:flex w-full md:col-span-1 job-label items-center'>Date of Birth</p>
+                      <div className='w-full md:col-span-2 '>
                         <InputCom
                           fieldClass="px-6"
                           label="Date of Birth"
-                        labelClass="tracking-wide"
+                          labelClass="md:hidden tracking-wide"
                           inputBg="bg-slate-100"
                           inputClass="input-curve lg border border-light-purple"
                           type="date"
@@ -425,12 +434,11 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                           minDate={year[year?.length - 1] + '-01-01'}
                         />
                       </div>
-
                     </div>
                   </div>
 
                   {/* right part */}
-                <div className='p-4 w-full flex flex-col gap-4 bg-blue-200 dark:bg-slate-900 rounded-2xl'>
+                  <div className='w-full p-4 flex flex-col gap-4 bg-blue-200 dark:bg-slate-900 rounded-2xl'>
                     <InputCom
                       fieldClass="px-6"
                       label="Address"
@@ -526,6 +534,7 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                     </div>
                   </div>
                 </div>
+              </div>
               {requestStatus.message &&
               <div className='px-4 my-1'>
                 <p className={`text-center text-base py-1 font-bold ${requestStatus.status ? 'bg-emerald-600 text-white' : 'bg-red-100 text-red-600'}`}>{requestStatus.message}</p>
@@ -556,8 +565,8 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                       </>
                   </div>
               </div>
-            </div>
             </Form>
+          </div>
         )}
       </Formik>
     </ModalCom>