horizontal scroll removed from medium screen display

src/components/FamilyAcc/index.jsx

@@ -21,6 +21,11 @@ export default function FamilyAcc() {
 
   const apiCall = useMemo(() => new SiteService(), []);
 
+  // This is to make sure it's called once and used everywhere
+  let memberId = localStorage.getItem("member_id");
+  let uid = localStorage.getItem("uid");
+  let sessionId = localStorage.getItem("session_token");
+
   const popUpHandler = () => {
     setPopUp(!popUp);
   };
@@ -56,9 +61,9 @@ export default function FamilyAcc() {
     try {
       if (first_name !== "" && last_name !== "") {
         let reqData = {
-          member_id: localStorage.getItem("member_id"),
-          uid: localStorage.getItem("uid"),
-          session_id: localStorage.getItem("session_token"),
+          member_id: memberId,
+          uid: uid,
+          session_id: sessionId,
           firstname: first_name,
           lastname: last_name,
           age: selectedAge,
@@ -98,11 +103,11 @@ export default function FamilyAcc() {
     setLoader(true);
     try {
       let reqData = {
-        member_id: localStorage.getItem("member_id"),
-        uid: localStorage.getItem("uid"),
-        sessionid: localStorage.getItem("session_token"),
+        member_id: memberId,
+        uid: uid,
+        session_id: sessionId,
         limit: 20,
-        offset: 1,
+        offset: 0,
         action: 22010,
       };
 
@@ -117,7 +122,7 @@ export default function FamilyAcc() {
       setLoader(false);
       throw new Error(error);
     }
-  }, [apiCall]);
+  }, [apiCall, memberId, sessionId, uid]);
 
   useEffect(() => {
     memberList();

src/components/MyActiveJobs/MyActiveJobTable.jsx

@@ -34,7 +34,7 @@ export default function MyActiveJobTable({MyJobList, className }) {
             <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
                 <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                     <tbody>
-                    {/*<tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">*/}
+                    {/*<tr className="text-base text-thin-light-gray border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">*/}
                     {/*    <td className="py-4">All Product</td>*/}
                     {/*    <td className="py-4 text-right">.</td>*/}
                     {/*</tr>*/}
@@ -55,7 +55,7 @@ export default function MyActiveJobTable({MyJobList, className }) {
                                                         />
                                                     </div>
                                                     <div className="flex flex-col">
-                                                        <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                                                        <h1 className="font-bold text-xl text-dark-gray dark:text-white">
                                                             {value.title}
                                                         </h1>
                                                         <div>

src/components/MyJobs/MyJobTable.jsx

@@ -45,9 +45,9 @@ export default function MyJobTable({MyJobList, className }) {
             </div>
             {MyJobList && MyJobList?.result_list &&
             <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
-                <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+                <table className="table-auto min-w-full text-sm text-left text-gray-500 dark:text-gray-400">
                     <tbody>
-                    <tr className="text-base text-thin-light-gray whitespace-nowrap border-b  default-border-b dark:border-[#5356fb29] ottom ">
+                    <tr className="text-base text-thin-light-gray border-b  default-border-b dark:border-[#5356fb29] ottom ">
                         <td className="py-4">All Product</td>
                         <td className="py-4 text-right">.</td>
                     </tr>
@@ -58,7 +58,7 @@ export default function MyJobTable({MyJobList, className }) {
                                 MyJobList.result_list.length > 0 &&
                                 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-4">
+                                        <td className="py-4">
                                             <div className="flex space-x-2 items-center">
                                                 <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
                                                     <img
@@ -68,7 +68,7 @@ export default function MyJobTable({MyJobList, className }) {
                                                     />
                                                 </div>
                                                 <div className="flex flex-col">
-                                                    <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                                                    <h1 className="font-bold text-xl text-dark-gray dark:text-white">
                                                         {value.title}
                                                     </h1>
                                                     <div>

src/components/jobPopout/JobListPopout.jsx

@@ -71,14 +71,14 @@ function JobListPopout({details, onClose, situation}) {
             <div className='my-3 md:flex'>
               <Detail 
                   label='Timeline' 
-                  value={`Dummy, no value found for created!`} 
+                  value={`${details.timeline_days} day(s)`}  
               />
             </div>
 
             <div className='my-3 md:flex'>
               <Detail 
                   label='Created' 
-                  value={`${details.timeline_days} day(s)`} 
+                  value={`Dummy, no value found for created!`}
               />
             </div>