Nevigate to "Projects" Page Should Display Only Message When No Projects Are Assigned.

public/assets/vendor/css/core.css

@@ -2553,7 +2553,7 @@ progress {
 }
 
 .table-responsive {
-  overflow-x: auto;
+  /* overflow-x: auto; */
   -webkit-overflow-scrolling: touch;
 }
 

src/assets/vendor/css/core.css

@@ -2436,7 +2436,7 @@ progress {
 }
 
 .table-responsive {
-  overflow-x: auto;
+  /* overflow-x: auto; */
   -webkit-overflow-scrolling: touch;
 }
 

src/pages/project/ProjectList.jsx

@@ -264,14 +264,9 @@ const ProjectList = () => {
         )}
 
        {listView ? (
-          currentItems.length === 0 ? (
-            <div className="text-center text-muted mt-4">
-              No projects found.
-            </div>
-          ) : (
   <div className="card cursor-pointer">
-              <div className="card-body p-2">
-                <div className="table-responsive text-nowrap py-2 ">
+    <div className="card-body p-2" style={{ minHeight: "200px" }}>
+      <div className="table-responsive text-nowrap py-2">
         <table className="table m-3">
           <thead>
             <tr>
@@ -327,28 +322,47 @@ const ProjectList = () => {
                 </div>
               </th>
               <th
-                          className={`mx-2 ${HasManageProject ? "d-sm-table-cell" : "d-none"
+                className={`mx-2 ${
+                  HasManageProject ? "d-sm-table-cell" : "d-none"
                 }`}
               >
                 Action
               </th>
             </tr>
           </thead>
-                    <tbody className="table-border-bottom-0 overflow-auto">
-                      {currentItems.map((project) => (
+          <tbody className="table-border-bottom-0" style={{ height: "200px" }}>
+            {currentItems.length === 0 ? (
+              <tr>
+                <td
+                  colSpan="12"
+                  className="text-center"
+                  style={{
+                    verticalAlign: "middle",
+                    height: "200px",
+                    paddingTop: 0,
+                    paddingBottom: 0,
+                  }}
+                >
+                  <div className="d-flex flex-column justify-content-center align-items-center h-100">
+                    <p className="mb-0">No projects found</p>
+                  </div>
+                </td>
+              </tr>
+            ) : (
+              currentItems.map((project) => (
                 <ProjectListView
                   key={project.id}
                   projectData={project}
                   recall={sortingProject}
                 />
-                      ))}
+              ))
+            )}
           </tbody>
         </table>
       </div>
     </div>
   </div>
-          )
-        ) : (
+) : (
   <div className="row">
     {currentItems.map((project) => (
       <ProjectCard
@@ -358,10 +372,9 @@ const ProjectList = () => {
       />
     ))}
   </div>
-        )}
+)}
 
-
-        {!loading && totalPages > 1 && (
+{!loading && totalPages > 1 && (
   <nav>
     <ul className="pagination pagination-sm justify-content-end py-2">
       <li className={`page-item ${currentPage === 1 && "disabled"}`}>
@@ -385,11 +398,7 @@ const ProjectList = () => {
           </button>
         </li>
       ))}
-              <li
-                className={`page-item ${
-                  currentPage === totalPages && "disabled"
-                }`}
-              >
+      <li className={`page-item ${currentPage === totalPages && "disabled"}`}>
         <button
           className="page-link"
           onClick={() =>
@@ -401,7 +410,8 @@ const ProjectList = () => {
       </li>
     </ul>
   </nav>
-        )}
+)}
+
       </div>
     </>
   );