adjusted add job mobile view

src/components/AddJob/AddJob.jsx

@@ -92,13 +92,13 @@ function AddJob({ popUpHandler, categories }) {
       >
         {(props) => {
           return (
-            <Form>
+            <Form className='contents'>
-              <div className="add-job p-5 w-full bg-white dark:bg-dark-white dark:text-white rounded-md flex flex-col justify-between">
+              <div className="add-job p-5 w-full h-full rounded-md flex flex-col justify-between overflow-y-auto">
                 <div className="flex flex-col-reverse sm:flex-row">
                   <div className="fields w-full">
                     {/* inputs starts here */}
                     <div className="xl:flex xl:space-x-7 mb-[5px]">
-                      <div className="field w-full mb-6 xl:mb-0">
+                      <div className="field w-full mb-[5px] xl:mb-0">
                         <label
                           htmlFor="country"
                           className="job-label job-label-flex"
@@ -159,7 +159,7 @@ function AddJob({ popUpHandler, categories }) {
                       </div>
 
                       {/* Price */}
-                      <div className="field w-full">
+                      <div className="field w-full mb-[5px] xl:mb-0">
                         <InputCom
                           fieldClass="px-6 text-right flex"
                           label="Price"
@@ -179,7 +179,7 @@ function AddJob({ popUpHandler, categories }) {
                       </div>
 
                       {/* Timeline */}
-                      <div className="field w-full">
+                      <div className="field w-full mb-[5px] xl:mb-0">
                         <label
                             className="job-label job-label-flex"
                             htmlFor="timeline_days"

src/components/AuthPages/AuthLayout2.jsx

@@ -18,13 +18,13 @@ export default function LoginLayout({ slogan, children }) {
         backgroundImage: `url(${countryMode == "NG" ? bgImgNig : bgImgCom})`,
       }}
     >
-      <div className={`w-full grid grid-cols-1 lg:grid-cols-2`}>
+      <div className={`w-full grid grid-cols-1 xl:grid-cols-2`}>
         {/* <div 
-            className={`auth-bg hidden lg:block bg-blue-50 relative bg-cover bg-no-repeat border-0 after:content-[''] after:absolute after:inset-0`} 
+            className={`auth-bg hidden xl:block bg-blue-50 relative bg-cover bg-no-repeat border-0 after:content-[''] after:absolute after:inset-0`} 
             style={{backgroundImage: `url(${bgImg})`}}
         >
         </div> */}
-        <div className="p-5 sm:p-7 flex place-content-center lg:col-start-2">
+        <div className="p-5 sm:p-7 flex place-content-center xl:col-start-2">
           <div className="py-5 w-full sm:w-11/12 max-w-[550px] shadow-md bg-slate-50 dark:bg-dark-white rounded-[0.475rem]">
             <div className="w-full flex justify-center items-center">
               {children && children}

src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx

@@ -85,10 +85,10 @@ export default function AssignMediaTask({
               >
                 {(props) => {
                   return (
-                        <Form>
+                        <Form className='contents'>
                             <>
                                 <div
-                                className={`job-action-modal-body w-full h-[500px] overflow-y-auto md:grid md:grid-cols-2`}
+                                className={`job-action-modal-body w-full h-full overflow-y-auto md:grid md:grid-cols-2`}
                                 >
                                 <div className="p-4 pt-0">
                                     <div className="p-4 w-full h-[450px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
@@ -124,7 +124,7 @@ export default function AssignMediaTask({
                                 {/*Right Hand Side for details && Task Type === select */}
                                     <>
                                     {commonMedia?.data?.length > 0 ? (
-                                        <div className="p-4 py-0 h-full">
+                                        <div className="p-4 py-0 h-auto">
                                         <div className="w-full">
                                             <div className="mb-3 w-full">
                                             <label className="job-label">

src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx

@@ -33,7 +33,7 @@ export default function AssignPrevNewTask({
             ) : (
               <>
                 <div
-                  className={`job-action-modal-body w-full h-[500px] overflow-y-auto md:grid ${
+                  className={`job-action-modal-body w-full h-full overflow-y-auto md:grid ${
                     taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
                   }`}
                 >

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -311,7 +311,7 @@ const AssignTaskPopout = ({
   return (
     <>
       <ModalCom action={action} situation={situation}>
-        <div className="w-11/12 lg:w-[700px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+        <div className="modal-container">
           <div className="modal-header-con">
             <h1 className="modal-title">
               {details ? (
@@ -364,7 +364,7 @@ const AssignTaskPopout = ({
               </svg>
             </button>
           </div>
-          <div className="modal-body">
+          <div className="modal-body-wrapper p-[0!important]">
             <div className="px-4 py-2 w-full flex items-center gap-4">
               <button
                 name='task'
@@ -383,7 +383,7 @@ const AssignTaskPopout = ({
               Media
               </button>
             </div>
-            <div className="">
+            <div className="contents">
               {assignType == 'task' ?
                 <AssignPrevNewTask 
                   jobList={jobList}

src/components/Helpers/ModalCom.jsx

@@ -14,9 +14,9 @@ export default function ModalCom({ action, children, situation, isOpen, classNam
     <div className="modal-com">
       <div
         onClick={action || isOpen}
-        className="fixed top-0 left-0 w-full lg:h-[100vh] h-full bg-black bg-opacity-40 backdrop-filter backdrop-blur-sm z-50"
+        className="fixed top-0 left-0 bottom-0 w-full bg-black bg-opacity-40 backdrop-filter backdrop-blur-sm z-50"
       ></div>
-      <div className={`fixed lg:h-100vh h-full z-[99999999999999] w-full lg:w-auto inset-0 flex flex-col justify-center items-center ${className}`}>
+      <div className={`fixed h-full z-[99999999999999] w-full lg:w-auto inset-0 flex flex-col justify-center items-center ${className}`}>
         {children && children}
       </div>
     </div>

src/components/jobPopout/DeleteJobPopout.jsx

@@ -145,7 +145,7 @@ function DeleteJobPopout({ details, onClose, situation }) {
           {/* End of error or success display */}
         </div>
         <div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
-          <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
+          <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
             <button
               onClick={onClose}
               type="button"

src/components/jobPopout/EditJobPopoutNew.jsx

@@ -254,7 +254,7 @@ const EditJobPopoutNew = ({
                         <div className="flex flex-col-reverse sm:flex-row">
                             <div className="fields w-full">
                             <div className="sm:flex sm:space-x-7 mb-[0.5rem]">
-                                <div className="field w-full mb-6 sm:mb-0">
+                                <div className="field w-full mb-[0.5rem] sm:mb-0">
                                 <InputCom
                                     fieldClass="px-6 cursor-default"
                                     label="Currency"
@@ -271,7 +271,7 @@ const EditJobPopoutNew = ({
                                 </div>
 
                                 {/* Price */}
-                                <div className="field w-full mb-6 sm:mb-0">
+                                <div className="field w-full mb-[0.5rem] sm:mb-0">
                                 <InputCom
                                     fieldClass="px-6 text-right"
                                     label="Price"
@@ -289,7 +289,7 @@ const EditJobPopoutNew = ({
                                 />
                                 </div>
 
-                                <div className="field w-full">
+                                <div className="field w-full mb-[0.5rem] sm:mb-0">
                                 <label
                                     className="job-label"
                                     htmlFor="timeline_days"

src/index.css

@@ -160,9 +160,9 @@
     @apply flex items-center gap-2
   }
 
-  /* STYLES FOR MODAL 'NOTE => VIEW JOB EDIT MODAL FOR SAMPLE USAGE'*/
+  /* STYLES FOR MODAL 'NOTE => VIEW JOB EDIT MODAL/ADD JOB MODAL FOR SAMPLE USAGE'*/
   .modal-container {
-    @apply w-11/12 md:w-[700px] mx-auto h-full flex flex-col bg-white dark:bg-dark-white lg:rounded-2xl overflow-hidden
+    @apply w-11/12 md:w-[700px] mx-auto h-auto max-h-full flex flex-col bg-white dark:bg-dark-white lg:rounded-2xl overflow-hidden
   }
 
   /* Modal Header section*/
@@ -183,7 +183,7 @@
 
   /* modal footer */
   .modal-footer-wrapper{
-    @apply p-4 border-t-2 flex justify-between items-center
+    @apply p-4 border-t-2 flex justify-between items-center w-full
   }
   /* END OF STYLES FOR MODAL BOX */
 

src/views/AddJobPage.jsx

@@ -5,7 +5,7 @@ import ModalCom from "../components/Helpers/ModalCom";
 function AddJobPage({ action, situation, categories }) {
   return (
     <ModalCom action={action} situation={situation}>
-      <div className="lg:w-[600px] w-11/12 lg:overflow-hidden lg:rounded-2xl bg-white dark:bg-dark-white dark:text-white">
+      <div className="modal-container">
         <div className="modal-header-con">
           <h1 className="modal-title">
             New Job