Changes in Employee list at pagination and at mobile view then scrollbar is shown.

src/components/DailyProgressRport/TaskReportList.jsx

@@ -192,6 +192,7 @@ const TaskReportList = () => {
   if (isLoading) return <TaskReportListSkeleton />;
   if (isError) return <div>Loading....</div>;
   return (
+    <div>
       <div className="mt-2 table-responsive text-nowrap">
         <table className="table">
           <thead>
@@ -287,13 +288,17 @@ const TaskReportList = () => {
             ))}
           </tbody>
         </table>
-      {data?.data?.length > 0 && (
+
+      </div>
+      {
+        data?.data?.length > 0 && (
           <Pagination
             currentPage={currentPage}
             totalPages={data.totalPages}
             onPageChange={paginate}
           />
-      )}
+        )
+      }
     </div >
   );
 };

src/components/Directory/ListViewContact.jsx

@@ -160,8 +160,7 @@ const ListViewContact = ({ data, Pagination }) => {
                           </div>
                         ) : (
                           <i
-                            className={`bx  ${
-                              isPending && activeContact === row.id
+                            className={`bx  ${isPending && activeContact === row.id
                                 ? "bx-loader-alt bx-spin"
                                 : "bx-recycle"
                               } me-1 text-primary cursor-pointer`}
@@ -188,14 +187,14 @@ const ListViewContact = ({ data, Pagination }) => {
                 )}
               </tbody>
             </table>
+          </div>
+        </div>
         {Pagination && (
           <div className="d-flex justify-content-start">
             {Pagination}
           </div>
         )}
       </div>
-        </div>
-      </div>
     </>
   );
 };

src/components/Expenses/ExpenseList.jsx

@@ -67,8 +67,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
           key = item.status?.displayName || "Unknown";
           break;
         case "submittedBy":
-          key = `${item.createdBy?.firstName ?? ""} ${
-            item.createdBy?.lastName ?? ""
+          key = `${item.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
             }`.trim();
           break;
         case "project":
@@ -110,8 +109,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
       label: "Submitted By",
       align: "text-start",
       getValue: (e) =>
-        `${e.createdBy?.firstName ?? ""} ${
-          e.createdBy?.lastName ?? ""
+        `${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
           }`.trim() || "N/A",
       customRender: (e) => (
         <div className="d-flex align-items-center">
@@ -122,8 +120,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
             lastName={e.createdBy?.lastName}
           />
           <span className="text-truncate">
-            {`${e.createdBy?.firstName ?? ""} ${
-              e.createdBy?.lastName ?? ""
+            {`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
               }`.trim() || "N/A"}
           </span>
         </div>
@@ -152,8 +149,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
       align: "text-center",
       getValue: (e) => (
         <span
-          className={`badge bg-label-${
-            getColorNameFromHex(e?.status?.color) || "secondary"
+          className={`badge bg-label-${getColorNameFromHex(e?.status?.color) || "secondary"
             }`}
         >
           {e.status?.name || "Unknown"}
@@ -299,6 +295,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                 )}
               </tbody>
             </table>
+          </div>
+        </div>
         {data?.data?.length > 0 && (
           <Pagination
             currentPage={currentPage}
@@ -307,8 +305,6 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
           />
         )}
       </div>
-        </div>
-      </div>
     </>
   );
 };

src/pages/employee/EmployeeList.jsx

@@ -664,7 +664,8 @@ const EmployeeList = () => {
                       ))}
                   </tbody>
                 </table>               
-
+              </div>
+            </div>
              {displayData?.length > 0 && (
                   <Pagination
                     currentPage={currentPage}
@@ -673,8 +674,6 @@ const EmployeeList = () => {
                   />
                 )}
           </div>
-            </div>
-          </div>
         ) : (
           <div className="card">
             <div className="text-center">