Delete/Edit Btn Position Changed

src/components/MyJobs/MyJobTable.jsx

@@ -62,33 +62,35 @@ export default function MyJobTable({MyJobList, className }) {
                                 currentJobList.map((value, index) => (
                                     <tr key={index} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
                                         <td className="py-9">
-                                            <div className="flex space-x-2 items-center job-items">
+                                            <div className="sm:flex sm:space-x-2 sm:justify-between sm:items-center job-items">
-                                                <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                                                <div className="flex space-x-2 items-center job-items">
-                                                    <img
+                                                    <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
-                                                        src={dataImage2}
+                                                        <img
-                                                        alt="data"
+                                                            src={dataImage2}
-                                                        className="w-full h-full"
+                                                            alt="data"
-                                                    />
+                                                            className="w-full h-full"
-                                                </div>
+                                                        />
-                                                <div className="flex flex-col">
-                                                    <h1 className="font-bold text-xl text-dark-gray dark:text-white">
-                                                        {value.title}
-                                                    </h1>
-                                                    <div>
-                                                        {value.description}
                                                     </div>
-                                                    <span className="text-sm text-thin-light-gray">
+                                                    <div className="flex flex-col">
-                                                    Price: <span className="text-purple">{value.price*0.01}</span>
+                                                        <h1 className="font-bold text-xl text-dark-gray dark:text-white">
-                                                    </span>
+                                                            {value.title}
-                                                    <span className="text-sm text-thin-light-gray">
+                                                        </h1>
-                                                    Duration:   <span className="text-purple"> {value.timeline_days} day(s)</span>
+                                                        <div>
-                                                    </span>
+                                                            {value.description}
+                                                        </div>
+                                                        <span className="text-sm text-thin-light-gray">
+                                                        Price: <span className="text-purple">{value.price*0.01}</span>
+                                                        </span>
+                                                        <span className="text-sm text-thin-light-gray">
+                                                        Duration:   <span className="text-purple"> {value.timeline_days} day(s)</span>
+                                                        </span>
 
+                                                    </div>
                                                 </div>
-                                            </div>
+
-                                            <div className="job-sub-menu mt-2 flex flex-nowrap justify-start sm:justify-end items-center">
+                                                <div className="min-w-[110px] max-w-[110px] bg-yellow-300 mx-2 rounded-md flex flex-nowrap space-x-2 justify-center items-center self-end">
-                                                <div className="bg-yellow-300 mx-2 rounded-md">
+                                                    <button type="button" className="p-2 w-[60px] h-11" onClick={()=>{setDeleteJobPopout({show:true, data:value})}}>[Delete]</button>
-                                                    <button type="button" className="p-2 w-[60px] h-11" onClick={()=>{setDeleteJobPopout({show:true, data:value})}}>[Delete]</button> |
+                                                    <span>|</span> 
                                                     <button  type="button" className="p-2 w-[40px] h-11">Edit</button>
                                                 </div>
                                             </div>

src/components/jobPopout/ActiveJobsPopout.jsx

@@ -66,7 +66,7 @@ function ActiveJobsPopout({details, onClose, situation}) {
             <div className='my-2 md:flex'>
               <Detail 
                   label='Offer Expire' 
-                  value={details.expire && `${details.expire.split(' ')[0]} ${details.expire.split(' ')[1].split('.')[0]}`}
+                  value={`${details.expire.split(' ')[0]} ${details.expire.split(' ')[1].split('.')[0]}`} 
               />
             </div>