add

frontend/src/app/projects/page.jsx

@@ -181,33 +181,35 @@ const ProjectsPage = () => {
             topbarTitle="Project"
             requiredButtons={["title", "add", "search"]}
           />
-          {isMobile ? (
-            <div className={styles.cardContainer}>
-              <MobileSearchBar />
-              {sampleData.map((data, key) => (
+
+          <div className={styles.cardContainer}>
+            <MobileSearchBar />
+            {isMobile &&
+              sampleData.map((data, key) => (
                 <Card
                   data={data}
                   key={key}
                   onClick={() => router.push("/projects/view")}
                 />
               ))}
-            </div>
-          ) : (
-            <div className={styles.tableContainer}>
-              <table className={styles.table}>
-                <thead>
-                  <tr>
-                    <th>Name</th>
-                    <th>Version</th>
-                    <th>CPU Used/Limit</th>
-                    <th>Memory Used/Limit</th>
-                    <th>Storage Used/Limit</th>
-                    <th>Date Created</th>
-                    <th></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {sampleData.map((project, index) => {
+          </div>
+
+          <div className={styles.tableContainer}>
+            <table className={styles.table}>
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Version</th>
+                  <th>CPU Used/Limit</th>
+                  <th>Memory Used/Limit</th>
+                  <th>Storage Used/Limit</th>
+                  <th>Date Created</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {!isMobile &&
+                  sampleData.map((project, index) => {
                     return (
                       <tr
                         key={index}
@@ -256,10 +258,9 @@ const ProjectsPage = () => {
                       </tr>
                     );
                   })}
-                </tbody>
-              </table>
-            </div>
-          )}
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>

frontend/src/app/projects/styles.module.css

@@ -92,4 +92,13 @@
   gap: 12px;
   align-self: stretch;
   overflow: auto;
+  display: none;
+}
+@media (max-width: 768px) {
+  .cardContainer {
+    display: flex;
+  }
+  .tableContainer {
+    display: none;
+  }
 }