From 05c688112b2d07d06263cd9922d6070880b30dc8 Mon Sep 17 00:00:00 2001
From: linlin-husky <fan.linli@northeastern.edu>
Date: Thu, 3 Sep 2026 21:25:56 -0400
Subject: [PATCH 1/6] fix(PeopleTableDetails): fix selector specificity order
 for stylelint

---
 src/components/Reports/PeopleTableDetails.jsx |  49 +-
 .../Reports/PeopleTableDetails.module.css     | 532 +++++++++++++++---
 2 files changed, 514 insertions(+), 67 deletions(-)

diff --git a/src/components/Reports/PeopleTableDetails.jsx b/src/components/Reports/PeopleTableDetails.jsx
index 17d29ea540..bee2a6de8f 100644
--- a/src/components/Reports/PeopleTableDetails.jsx
+++ b/src/components/Reports/PeopleTableDetails.jsx
@@ -140,7 +140,6 @@ function PeopleTableDetails(props) {
     return filteredList;
   };
 
-  // REFACTORED: Toggle using state instead of direct DOM manipulation
   const toggleMoreResources = useCallback((id) => {
     setExpandedTasks((prev) => ({
       ...prev,
@@ -244,6 +243,7 @@ function PeopleTableDetails(props) {
           Clear Filters
         </button>
       </div>
+
       <div className={styles['people-table-scrollable']}>
         <table {...getTableProps()} className={styles.peopleTableReact}>
           <thead className={darkMode ? styles['reports-table-head-dark'] : undefined}>
@@ -283,8 +283,53 @@ function PeopleTableDetails(props) {
           </tbody>
         </table>
       </div>
+
+      <div className={styles['mobileCardContainer']}>
+        {filteredTasks.map((task) => (
+          <div key={task._id} className={`${styles['task-card']} ${darkMode ? styles['task-card-dark'] : ''}`}>
+            <div className={styles['task-header']}>
+              <span className={styles['people-report-task-name']}>{task.taskName}</span>
+              <span className={styles['task-status']}>{task.status || 'Started'}</span>
+            </div>
+            <div className={styles['task-details']}>
+              <div className={styles['task-info']}>
+                <div className={styles['sub-head']}>Priority</div>
+                <div className={styles['sub-details']}>{task.priority}</div>
+              </div>
+              <div className={styles['task-info']}>
+                <div className={styles['sub-head']}>Resources</div>
+                <div className={styles['sub-details']}>
+                  {(task.resources || []).flat().map((res, i) => (
+                    <img key={i} alt={res.name} src={res.profilePic || '/pfp-default.png'} className={styles['img-circle']} />
+                  ))}
+                </div>
+              </div>
+              <div className={styles['task-info']}>
+                <div className={styles['sub-head']}>Active</div>
+                <div className={styles['sub-details']}>{task.active}</div>
+              </div>
+              <div className={styles['task-info']}>
+                <div className={styles['sub-head']}>Assign</div>
+                <div className={styles['sub-details']}>{task.assign}</div>
+              </div>
+              <div className={styles['task-info']}>
+                <div className={styles['sub-head']}>Estimated Hours</div>
+                <div className={styles['sub-details']}>{task.estimatedHours}</div>
+              </div>
+              <div className={styles['task-info']}>
+                <div className={styles['sub-head']}>Start Date</div>
+                <div className={styles['sub-details']}>{task.startDate}</div>
+              </div>
+              <div className={styles['task-info']}>
+                <div className={styles['sub-head']}>End Date</div>
+                <div className={styles['sub-details']}>{task.endDate}</div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
     </>
   );
 }
 
-export default PeopleTableDetails;
+export default PeopleTableDetails;
\ No newline at end of file
diff --git a/src/components/Reports/PeopleTableDetails.module.css b/src/components/Reports/PeopleTableDetails.module.css
index 2a293a9ed9..7529db8f06 100644
--- a/src/components/Reports/PeopleTableDetails.module.css
+++ b/src/components/Reports/PeopleTableDetails.module.css
@@ -1,5 +1,4 @@
-/* stylelint-disable declaration-property-value-no-unknown, no-descending-specificity */
-.wrapper {
+/* .wrapper {
   overflow-x: auto;
   width: 100%;
   max-width: 100%;
@@ -55,7 +54,6 @@
   overflow: hidden;
 }
 
-/* Profile picture styling */
 .img-circle {
   border-radius: 50%;
   height: 30px;
@@ -99,7 +97,6 @@
   background-color: #fafafa;
 }
 
-/* ✅ merged hover style */
 .people-table-row-dark:hover {
   background-color: #232946 !important;
   color: #fff !important;
@@ -153,7 +150,7 @@
 
 .extra {
   display: none;
-  border: collapse;
+  border: none;
 }
 
 .extra1 {
@@ -173,32 +170,54 @@
 }
 
 .task-card-dark {
-  color: black;
+  color: #fff;
+  background-color: #232946;
+  border: 1px solid #444;
 }
 
 .task-header {
   background-color: #eee7f8;
   display: flex;
   justify-content: space-between;
+  align-items: flex-start;
+  gap: 10px;
   padding: 15px;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
-  align-items: flex-start;
+}
+
+.task-card-dark .task-header {
+  background-color: #1a1a2e;
+  color: #fff;
 }
 
 .task-status {
   display: flex;
   align-items: center;
-  padding: 5px 10px;
+  justify-content: center;
+  padding: 4px 10px;
   border-radius: 20px;
   background-color: #ffc107;
   color: #fff;
-  width: fit-content;
-  margin-left: 5px;
+  flex-shrink: 0;
+  white-space: nowrap;
+  margin-left: 0;
+}
+
+.task-card-dark .task-status {
+  background-color: #ca50db;
+  color: #fff;
 }
 
 .task-info {
   display: flex;
+  padding: 6px 0;
+  border-bottom: 1px solid #f2f2f2;
+}
+
+.task-card-dark .task-info {
+  border-bottom: 1px solid #374151;
+  color: #fff;
 }
 
 .sub-head {
@@ -206,12 +225,22 @@
   text-align: end;
   width: 50%;
   padding-right: 2%;
+  color: #4b5563;
+}
+
+.task-card-dark .sub-head {
+  color: #9ca3af;
 }
 
 .sub-details {
   text-align: start;
   width: 50%;
   padding-left: 2%;
+  color: #1f2937;
+}
+
+.task-card-dark .sub-details {
+  color: #fff;
 }
 
 .table-filter-container {
@@ -249,37 +278,44 @@
   color: #e7b1ef;
 }
 
-/* Dark mode styling for Clear Filters button */
-.wrapperDark .tasks-table-clear-filter-button {
-  background-color: #232946 !important;
-  border: 2px solid #5A67D8 !important;
-  color: #fff !important;
+.people-report-task-name {
+  flex: 1;
+  font-weight: 600;
+  font-size: 16px;
+  text-align: left;
+  overflow-wrap: break-word;
 }
 
-.wrapperDark .tasks-table-clear-filter-button:hover {
-  background-color: #1C2541 !important;
-  border-color: #ca50db !important;
+.people-table-scrollable {
+  width: 100%;
+  max-height: 600px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  box-sizing: border-box;
 }
 
-.people-report-task-name {
-  overflow-wrap: break-word;
-  min-width: 200px;
-  text-align: left;
+.people-table-scrollable::-webkit-scrollbar {
+  height: 8px;
+  width: 8px;
 }
 
-.task-name-word-break {
-  word-break: break-all;
+.people-table-scrollable::-webkit-scrollbar-track {
+  background: #162032;
+  border-radius: 4px;
 }
 
-.people-table-scrollable {
-  max-height: 600px;
-  overflow-y: auto;
-  width: 100%;
+.people-table-scrollable::-webkit-scrollbar-thumb {
+  background: #4b5563;
+  border-radius: 4px;
+}
+
+.people-table-scrollable::-webkit-scrollbar-thumb:hover {
+  background: #6b7280;
 }
 
 .peopleTableReact {
   width: 100%;
-  min-width: 720px;
+  min-width: 850px;
   border-collapse: collapse;
 }
 
@@ -304,6 +340,9 @@
 .peopleTableReact th:first-child,
 .peopleTableReact td:first-child {
   width: 28%;
+  min-width: 260px;
+  max-width: 350px;
+  overflow-wrap: break-word;
 }
 
 .peopleTableReact th:nth-child(4),
@@ -324,55 +363,412 @@
   color: #f9fafb;
 }
 
-.wrapperDark .people-table-scrollable {
-  background-color: #162032;
-  border: 1px solid #3a4460;
+.reports-table-head-dark {
+  background-color: #1a1a2e !important;
+  color: #fff !important;
+}
+
+.people-table-row-dark {
+  background-color: transparent !important;
+  color: #fff !important;
+}
+
+.people-table-row-dark > div,
+.reports-table-head-dark > div {
+  color: #fff !important;
+}
+
+.people-table-row-dark,
+.reports-table-head-dark {
+  border-bottom: 1px solid #444 !important;
+}
+
+.centerColumn {
+  text-align: center !important;
+}
+
+:global(.dark-mode) .peopleTableReact {
+  background-color: #1b2a41;
+  color: #f9fafb;
+}
+
+:global(.dark-mode) .people-table-row-dark {
+  background-color: #1b2a41 !important;
+  color: #f9fafb !important;
+}
+
+.mobileCardContainer {
+  display: none;
+}
+
+@media (width <= 600px) {
+  .people-table-scrollable {
+    display: none !important;
+  }
+
+  .mobileCardContainer {
+    display: block !important;
+    width: 100%;
+  }
+} */
+
+/* stylelint-disable declaration-property-value-no-unknown */
+.wrapper {
+  overflow-x: auto;
+  width: 100%;
+  max-width: 100%;
+  padding-inline: 0;
+  box-sizing: border-box;
+}
+
+.wrapperDark {
+  background-color: #1b2a41;
+  color: #e4e6eb;
+  padding-bottom: 16px;
   border-radius: 8px;
-  padding: 4px 0;
 }
 
-/* Dark mode for mobile modal cards */
-.task-card.task-card-dark {
-  background-color: #232946;
+.reports-table-head {
+  display: grid;
+  grid-template-columns: 3.5fr 0.8fr 0.8fr 1fr 0.6fr 0.6fr 1fr 0.8fr 0.8fr;
+  gap: 0;
+  align-items: center;
+  vertical-align: middle;
+  overflow: hidden;
+  background-color: #eee7f8;
+  margin-bottom: 4px;
+  border-radius: 4px;
+  min-height: 32px;
+  padding: 8px 16px;
+  font-size: 18px;
+  width: 100%;
+}
+
+.people-table-row {
+  display: grid;
+  grid-template-columns: 3.5fr 0.8fr 0.8fr 1fr 0.6fr 0.6fr 1fr 0.8fr 0.8fr;
+  gap: 0;
+  align-items: center;
+  vertical-align: middle;
+  min-height: 42px;
+  padding: 8px 16px;
+  cursor: pointer;
+  border-bottom: 1px solid #f8f7f8;
+  width: 100%;
+}
+
+.reports-table-head > div,
+.people-table-row > div {
+  padding: 8px;
+  text-align: left;
+  margin: 0;
+  vertical-align: middle;
+  font-size: 16px;
+  overflow-wrap: break-word;
+  white-space: normal;
+  overflow: hidden;
+}
+
+.img-circle {
+  border-radius: 50%;
+  height: 30px;
+  width: 30px;
+  object-fit: cover;
+  display: inline-block;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+
+.name {
+  display: inline-block;
+  margin-right: 4px;
+}
+
+.resourceMoreToggle {
+  display: inline-block;
+  margin-left: 4px;
+  cursor: pointer;
+}
+
+.dot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #bbb;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+:global(.dark-mode) .dot {
+  background-color: #3a4460;
+  color: #f1f1f1;
+}
+
+.people-table-row-dark {
+  background-color: transparent !important;
+  color: #fff !important;
+  border-bottom: 1px solid #444 !important;
+}
+
+.people-table-row:hover {
+  background-color: #fafafa;
+}
+
+.people-table-row-dark:hover {
+  background-color: #232946 !important;
+  color: #fff !important;
+}
+
+.people-table-body-row:hover {
+  background-color: #fafafa;
+}
+
+.people-table-body-row-dark:hover {
+  background-color: #1C2541;
+}
+
+.pic {
+  height: 20px;
+  width: 20px;
+  box-sizing: border-box;
+  border: 2px solid black;
+}
+
+.hours_text {
+  display: inline-block;
+  height: 25px;
+  width: 100px;
+  background: white;
+  resize: none;
+  overflow: hidden;
+  margin: 1px;
+  padding: 1px;
+  border: solid 1px black;
+}
+
+.rectangle {
+  display: inline-block;
+  width: 480px;
+  height: 120px;
+  background: white;
+  resize: none;
+  border-radius: 8px;
+  border: solid 2px #e4e4e4;
+  margin: auto;
+  padding: 8px;
+}
+
+.rectangle:focus,
+.rectangle:active {
+  outline-color: transparent;
+  border: none;
+  box-shadow: 0 0 3px 2px #ca50db;
+}
+
+.extra {
+  display: none;
+  border: none;
+}
+
+.extra1 {
+  border: none !important;
+}
+
+.task-details {
+  padding: 2%;
+}
+
+.task-card {
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+  margin-bottom: 20px;
+  overflow: hidden;
+}
+
+.task-card-dark {
   color: #fff;
+  background-color: #232946;
   border: 1px solid #444;
 }
 
-.task-card.task-card-dark .task-header {
+.task-header {
+  background-color: #eee7f8;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 15px;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+
+.task-card-dark .task-header {
   background-color: #1a1a2e;
   color: #fff;
 }
 
-.task-card.task-card-dark .task-status {
-  background-color: #ca50db;
+.task-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 10px;
+  border-radius: 20px;
+  background-color: #ffc107;
   color: #fff;
+  flex-shrink: 0;
+  white-space: nowrap;
+  margin-left: 0;
 }
 
-.task-card.task-card-dark .task-info {
+.task-card-dark .task-status {
+  background-color: #ca50db;
   color: #fff;
 }
 
-.task-card.task-card-dark .sub-head,
-.task-card.task-card-dark .sub-details {
+.task-info {
+  display: flex;
+  padding: 6px 0;
+  border-bottom: 1px solid #f2f2f2;
+}
+
+.task-card-dark .task-info {
+  border-bottom: 1px solid #374151;
   color: #fff;
 }
 
-/* Modal textarea dark mode */
-.task-card-dark .rectangle {
-  background: #232946;
+.sub-head {
+  font-weight: 600;
+  text-align: end;
+  width: 50%;
+  padding-right: 2%;
+  color: #4b5563;
+}
+
+.task-card-dark .sub-head {
+  color: #9ca3af;
+}
+
+.sub-details {
+  text-align: start;
+  width: 50%;
+  padding-left: 2%;
+  color: #1f2937;
+}
+
+.task-card-dark .sub-details {
   color: #fff;
-  border: 1.5px solid #444;
 }
 
-/* Desktop table dark mode */
+.table-filter-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.tasks-table-clear-filter-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  border: 2px solid #e7b1ef;
+  outline-color: #e7b1ef;
+  color: #ca50db;
+  border-radius: 4px;
+  width: 110px;
+  height: 30px;
+  cursor: pointer;
+  margin-left: auto;
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
+}
+
+.tasks-table-clear-filter-button:hover {
+  background-color: #fef5ff;
+  border-color: #ca50db;
+}
+
+:global(.dark-mode) .tasks-table-clear-filter-button {
+  background-color: #232946;
+  border: 2px solid #ca50db;
+  outline-color: #ca50db;
+  color: #e7b1ef;
+}
+
+.people-report-task-name {
+  flex: 1;
+  font-weight: 600;
+  font-size: 16px;
+  text-align: left;
+  overflow-wrap: break-word;
+}
+
+.people-table-scrollable {
+  width: 100%;
+  max-height: 600px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  box-sizing: border-box;
+}
+
+.people-table-scrollable::-webkit-scrollbar {
+  height: 8px;
+  width: 8px;
+}
+
+.people-table-scrollable::-webkit-scrollbar-track {
+  background: #162032;
+  border-radius: 4px;
+}
+
+.people-table-scrollable::-webkit-scrollbar-thumb {
+  background: #4b5563;
+  border-radius: 4px;
+}
+
+.people-table-scrollable::-webkit-scrollbar-thumb:hover {
+  background: #6b7280;
+}
+
+.reports-table-head-dark th {
+  background-color: #1b2a41;
+  color: #f9fafb;
+}
+
 .reports-table-head-dark {
   background-color: #1a1a2e !important;
   color: #fff !important;
+  border-bottom: 1px solid #444 !important;
 }
 
-.people-table-row-dark {
-  background-color: transparent !important;
-  color: #fff !important;
+.people-table-row-dark td {
+  border-color: #374151;
+}
+
+.peopleTableReact {
+  width: 100%;
+  min-width: 850px;
+  border-collapse: collapse;
+}
+
+.peopleTableReact th,
+.peopleTableReact td {
+  padding: 8px;
+  text-align: left;
+  overflow-wrap: break-word;
+  vertical-align: middle;
+}
+
+.peopleTableReact th:first-child,
+.peopleTableReact td:first-child {
+  width: 28%;
+  min-width: 260px;
+  max-width: 350px;
+  overflow-wrap: break-word;
 }
 
 .people-table-row-dark > div,
@@ -380,25 +776,31 @@
   color: #fff !important;
 }
 
-.people-table-row-dark .people-table-center-cell,
-.people-table-row-dark .people-table-end-cell {
-  color: #fff !important;
+.centerColumn {
+  text-align: center !important;
 }
 
-/* Table cell border for dark mode */
-.people-table-row-dark,
-.reports-table-head-dark {
-  border-bottom: 1px solid #444 !important;
+:global(.dark-mode) .peopleTableReact {
+  background-color: #1b2a41;
+  color: #f9fafb;
 }
 
-/* Table textarea dark mode */
-.people-table-row-dark .rectangle,
-.reports-table-head-dark .rectangle {
-  background: #232946;
-  color: #fff;
-  border: 1px solid #444;
+:global(.dark-mode) .people-table-row-dark {
+  background-color: #1b2a41 !important;
+  color: #f9fafb !important;
 }
 
-.centerColumn {
-  text-align: center !important;
+.mobileCardContainer {
+  display: none;
+}
+
+@media (width <= 600px) {
+  .people-table-scrollable {
+    display: none !important;
+  }
+
+  .mobileCardContainer {
+    display: block !important;
+    width: 100%;
+  }
 }
\ No newline at end of file

From 0db61ae792cb9447a9e578dccf8b75b45ea404fc Mon Sep 17 00:00:00 2001
From: linlin-husky <fan.linli@northeastern.edu>
Date: Thu, 3 Sep 2026 21:28:12 -0400
Subject: [PATCH 2/6] deleted commented out code

---
 .../Reports/PeopleTableDetails.module.css     | 415 ------------------
 1 file changed, 415 deletions(-)

diff --git a/src/components/Reports/PeopleTableDetails.module.css b/src/components/Reports/PeopleTableDetails.module.css
index 7529db8f06..db2024613b 100644
--- a/src/components/Reports/PeopleTableDetails.module.css
+++ b/src/components/Reports/PeopleTableDetails.module.css
@@ -1,418 +1,3 @@
-/* .wrapper {
-  overflow-x: auto;
-  width: 100%;
-  max-width: 100%;
-  padding-inline: 0;
-  box-sizing: border-box;
-}
-
-.wrapperDark {
-  background-color: #1b2a41;
-  color: #e4e6eb;
-  padding-bottom: 16px;
-  border-radius: 8px;
-}
-
-.reports-table-head {
-  display: grid;
-  grid-template-columns: 3.5fr 0.8fr 0.8fr 1fr 0.6fr 0.6fr 1fr 0.8fr 0.8fr;
-  gap: 0;
-  align-items: center;
-  vertical-align: middle;
-  overflow: hidden;
-  background-color: #eee7f8;
-  margin-bottom: 4px;
-  border-radius: 4px;
-  min-height: 32px;
-  padding: 8px 16px;
-  font-size: 18px;
-  width: 100%;
-}
-
-.people-table-row {
-  display: grid;
-  grid-template-columns: 3.5fr 0.8fr 0.8fr 1fr 0.6fr 0.6fr 1fr 0.8fr 0.8fr;
-  gap: 0;
-  align-items: center;
-  vertical-align: middle;
-  min-height: 42px;
-  padding: 8px 16px;
-  cursor: pointer;
-  border-bottom: 1px solid #f8f7f8;
-  width: 100%;
-}
-
-.reports-table-head > div,
-.people-table-row > div {
-  padding: 8px;
-  text-align: left;
-  margin: 0;
-  vertical-align: middle;
-  font-size: 16px;
-  overflow-wrap: break-word;
-  white-space: normal;
-  overflow: hidden;
-}
-
-.img-circle {
-  border-radius: 50%;
-  height: 30px;
-  width: 30px;
-  object-fit: cover;
-  display: inline-block;
-  margin-right: 4px;
-  vertical-align: middle;
-}
-
-.name {
-  display: inline-block;
-  margin-right: 4px;
-}
-
-.resourceMoreToggle {
-  display: inline-block;
-  margin-left: 4px;
-  cursor: pointer;
-}
-
-.dot {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background-color: #bbb;
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-}
-
-:global(.dark-mode) .dot {
-  background-color: #3a4460;
-  color: #f1f1f1;
-}
-
-.people-table-row:hover {
-  background-color: #fafafa;
-}
-
-.people-table-row-dark:hover {
-  background-color: #232946 !important;
-  color: #fff !important;
-}
-
-.people-table-body-row:hover {
-  background-color: #fafafa;
-}
-
-.people-table-body-row-dark:hover {
-  background-color: #1C2541;
-}
-
-.pic {
-  height: 20px;
-  width: 20px;
-  box-sizing: border-box;
-  border: 2px solid black;
-}
-
-.hours_text {
-  display: inline-block;
-  height: 25px;
-  width: 100px;
-  background: white;
-  resize: none;
-  overflow: hidden;
-  margin: 1px;
-  padding: 1px;
-  border: solid 1px black;
-}
-
-.rectangle {
-  display: inline-block;
-  width: 480px;
-  height: 120px;
-  background: white;
-  resize: none;
-  border-radius: 8px;
-  border: solid 2px #e4e4e4;
-  margin: auto;
-  padding: 8px;
-}
-
-.rectangle:focus,
-.rectangle:active {
-  outline-color: transparent;
-  border: none;
-  box-shadow: 0 0 3px 2px #ca50db;
-}
-
-.extra {
-  display: none;
-  border: none;
-}
-
-.extra1 {
-  border: none !important;
-}
-
-.task-details {
-  padding: 2%;
-}
-
-.task-card {
-  background-color: #fff;
-  border-radius: 10px;
-  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
-  margin-bottom: 20px;
-  overflow: hidden;
-}
-
-.task-card-dark {
-  color: #fff;
-  background-color: #232946;
-  border: 1px solid #444;
-}
-
-.task-header {
-  background-color: #eee7f8;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 10px;
-  padding: 15px;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
-}
-
-.task-card-dark .task-header {
-  background-color: #1a1a2e;
-  color: #fff;
-}
-
-.task-status {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px 10px;
-  border-radius: 20px;
-  background-color: #ffc107;
-  color: #fff;
-  flex-shrink: 0;
-  white-space: nowrap;
-  margin-left: 0;
-}
-
-.task-card-dark .task-status {
-  background-color: #ca50db;
-  color: #fff;
-}
-
-.task-info {
-  display: flex;
-  padding: 6px 0;
-  border-bottom: 1px solid #f2f2f2;
-}
-
-.task-card-dark .task-info {
-  border-bottom: 1px solid #374151;
-  color: #fff;
-}
-
-.sub-head {
-  font-weight: 600;
-  text-align: end;
-  width: 50%;
-  padding-right: 2%;
-  color: #4b5563;
-}
-
-.task-card-dark .sub-head {
-  color: #9ca3af;
-}
-
-.sub-details {
-  text-align: start;
-  width: 50%;
-  padding-left: 2%;
-  color: #1f2937;
-}
-
-.task-card-dark .sub-details {
-  color: #fff;
-}
-
-.table-filter-container {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.tasks-table-clear-filter-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: white;
-  border: 2px solid #e7b1ef;
-  outline-color: #e7b1ef;
-  color: #ca50db;
-  border-radius: 4px;
-  width: 110px;
-  height: 30px;
-  cursor: pointer;
-  margin-left: auto;
-  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
-}
-
-.tasks-table-clear-filter-button:hover {
-  background-color: #fef5ff;
-  border-color: #ca50db;
-}
-
-:global(.dark-mode) .tasks-table-clear-filter-button {
-  background-color: #232946;
-  border: 2px solid #ca50db;
-  outline-color: #ca50db;
-  color: #e7b1ef;
-}
-
-.people-report-task-name {
-  flex: 1;
-  font-weight: 600;
-  font-size: 16px;
-  text-align: left;
-  overflow-wrap: break-word;
-}
-
-.people-table-scrollable {
-  width: 100%;
-  max-height: 600px;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  box-sizing: border-box;
-}
-
-.people-table-scrollable::-webkit-scrollbar {
-  height: 8px;
-  width: 8px;
-}
-
-.people-table-scrollable::-webkit-scrollbar-track {
-  background: #162032;
-  border-radius: 4px;
-}
-
-.people-table-scrollable::-webkit-scrollbar-thumb {
-  background: #4b5563;
-  border-radius: 4px;
-}
-
-.people-table-scrollable::-webkit-scrollbar-thumb:hover {
-  background: #6b7280;
-}
-
-.peopleTableReact {
-  width: 100%;
-  min-width: 850px;
-  border-collapse: collapse;
-}
-
-.peopleTableReact th,
-.peopleTableReact td {
-  padding: 8px;
-  text-align: left;
-  overflow-wrap: break-word;
-  vertical-align: middle;
-}
-
-.peopleTableReact th {
-  background-color: #eee7f8;
-  font-size: 18px;
-}
-
-.peopleTableReact td {
-  border-bottom: 1px solid #f8f7f8;
-  font-size: 16px;
-}
-
-.peopleTableReact th:first-child,
-.peopleTableReact td:first-child {
-  width: 28%;
-  min-width: 260px;
-  max-width: 350px;
-  overflow-wrap: break-word;
-}
-
-.peopleTableReact th:nth-child(4),
-.peopleTableReact td:nth-child(4) {
-  width: 14%;
-}
-
-.peopleTableReact tbody tr:hover {
-  background-color: #fafafa;
-}
-
-.people-table-row-dark td {
-  border-color: #374151;
-}
-
-.reports-table-head-dark th {
-  background-color: #1b2a41;
-  color: #f9fafb;
-}
-
-.reports-table-head-dark {
-  background-color: #1a1a2e !important;
-  color: #fff !important;
-}
-
-.people-table-row-dark {
-  background-color: transparent !important;
-  color: #fff !important;
-}
-
-.people-table-row-dark > div,
-.reports-table-head-dark > div {
-  color: #fff !important;
-}
-
-.people-table-row-dark,
-.reports-table-head-dark {
-  border-bottom: 1px solid #444 !important;
-}
-
-.centerColumn {
-  text-align: center !important;
-}
-
-:global(.dark-mode) .peopleTableReact {
-  background-color: #1b2a41;
-  color: #f9fafb;
-}
-
-:global(.dark-mode) .people-table-row-dark {
-  background-color: #1b2a41 !important;
-  color: #f9fafb !important;
-}
-
-.mobileCardContainer {
-  display: none;
-}
-
-@media (width <= 600px) {
-  .people-table-scrollable {
-    display: none !important;
-  }
-
-  .mobileCardContainer {
-    display: block !important;
-    width: 100%;
-  }
-} */
-
-/* stylelint-disable declaration-property-value-no-unknown */
 .wrapper {
   overflow-x: auto;
   width: 100%;

From 20a50860046c37daf24026013c693feab71a26cc Mon Sep 17 00:00:00 2001
From: linlin-husky <fan.linli@northeastern.edu>
Date: Thu, 3 Sep 2026 21:48:40 -0400
Subject: [PATCH 3/6] test(PeopleTableDetails): use getAllByText to handle
 responsive duplicate elements

---
 src/components/Reports/__tests__/PeopleTableDetails.test.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Reports/__tests__/PeopleTableDetails.test.jsx b/src/components/Reports/__tests__/PeopleTableDetails.test.jsx
index b7bfd66c84..7a5c9bb7bb 100644
--- a/src/components/Reports/__tests__/PeopleTableDetails.test.jsx
+++ b/src/components/Reports/__tests__/PeopleTableDetails.test.jsx
@@ -64,7 +64,7 @@ describe('Unit Test case for PeopleTableDetails component', () => {
 
   it('Test 3 : Verify row data renders', () => {
     render(<PeopleTableDetails taskData={taskData} />);
-    expect(screen.getByText('Task 1')).toBeInTheDocument();
+    expect(screen.getAllByText('Task 1')[0]).toBeInTheDocument();;
     expect(screen.getByText('Task 2')).toBeInTheDocument();
     expect(screen.getByText('Task 3')).toBeInTheDocument();
   });

From d1333f16d22496ebbdce9d08a899c3152a34ae67 Mon Sep 17 00:00:00 2001
From: linlin-husky <fan.linli@northeastern.edu>
Date: Thu, 3 Sep 2026 21:54:20 -0400
Subject: [PATCH 4/6] test(PeopleTableDetails): fix remaining getByText for
 Project 2

---
 src/components/Reports/__tests__/PeopleTableDetails.test.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Reports/__tests__/PeopleTableDetails.test.jsx b/src/components/Reports/__tests__/PeopleTableDetails.test.jsx
index 7a5c9bb7bb..53fa7b337a 100644
--- a/src/components/Reports/__tests__/PeopleTableDetails.test.jsx
+++ b/src/components/Reports/__tests__/PeopleTableDetails.test.jsx
@@ -94,7 +94,7 @@ describe('Unit Test case for PeopleTableDetails component', () => {
   it('shows resource toggle button when there are more than 2 resources', () => {
     render(<PeopleTableDetails taskData={taskFixtureThreeNamedResources} />);
 
-    expect(screen.getByText('Project 2')).toBeInTheDocument();
+   expect(screen.getAllByText('Project 2')[0]).toBeInTheDocument();
     const toggleButton = screen.getByText('1+');
     expect(toggleButton).toBeInTheDocument();
   });

From 893758b622c5c7af92cdc2b2ec443ce31a52b445 Mon Sep 17 00:00:00 2001
From: linlin-husky <fan.linli@northeastern.edu>
Date: Thu, 3 Sep 2026 22:00:19 -0400
Subject: [PATCH 5/6] test(PeopleTableDetails): use getAllByText across all
 tests for responsive layout

---
 .../__tests__/PeopleTableDetails.test.jsx     | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/Reports/__tests__/PeopleTableDetails.test.jsx b/src/components/Reports/__tests__/PeopleTableDetails.test.jsx
index 53fa7b337a..6589022558 100644
--- a/src/components/Reports/__tests__/PeopleTableDetails.test.jsx
+++ b/src/components/Reports/__tests__/PeopleTableDetails.test.jsx
@@ -64,9 +64,9 @@ describe('Unit Test case for PeopleTableDetails component', () => {
 
   it('Test 3 : Verify row data renders', () => {
     render(<PeopleTableDetails taskData={taskData} />);
-    expect(screen.getAllByText('Task 1')[0]).toBeInTheDocument();;
-    expect(screen.getByText('Task 2')).toBeInTheDocument();
-    expect(screen.getByText('Task 3')).toBeInTheDocument();
+    expect(screen.getAllByText('Task 1')[0]).toBeInTheDocument();
+    expect(screen.getAllByText('Task 2')[0]).toBeInTheDocument();
+    expect(screen.getAllByText('Task 3')[0]).toBeInTheDocument();
   });
 
   it('displays a task with no resources and no start date', () => {
@@ -78,7 +78,7 @@ describe('Unit Test case for PeopleTableDetails component', () => {
 
     render(<PeopleTableDetails taskData={[taskWithoutResourcesOrStartDate]} />);
 
-    expect(screen.getByText('Unassigned task')).toBeInTheDocument();
+    expect(screen.getAllByText('Unassigned task')[0]).toBeInTheDocument();
   });
 
   it('Test 5 : Verify no toggle button if resources < 2', () => {
@@ -88,14 +88,14 @@ describe('Unit Test case for PeopleTableDetails component', () => {
 
   it('Test 6 : Verify button renders if resources > 2', () => {
     render(<PeopleTableDetails taskData={[getMockTask('1', 'P2', 3)]} />);
-    expect(screen.getByRole('button', { name: /^\d+\+$/ })).toBeInTheDocument();
+    expect(screen.getAllByRole('button', { name: /^\d+\+$/ })[0]).toBeInTheDocument();
   });
 
   it('shows resource toggle button when there are more than 2 resources', () => {
     render(<PeopleTableDetails taskData={taskFixtureThreeNamedResources} />);
 
-   expect(screen.getAllByText('Project 2')[0]).toBeInTheDocument();
-    const toggleButton = screen.getByText('1+');
+    expect(screen.getAllByText('Project 2')[0]).toBeInTheDocument();
+    const toggleButton = screen.getAllByText('1+')[0];
     expect(toggleButton).toBeInTheDocument();
   });
 
@@ -103,7 +103,7 @@ describe('Unit Test case for PeopleTableDetails component', () => {
     const taskId = taskFixtureThreeNamedResources[0]._id;
     render(<PeopleTableDetails taskData={taskFixtureThreeNamedResources} />);
 
-    const toggleButton = screen.getByRole('button', { name: /^\d+\+$/ });
+    const toggleButton = screen.getAllByRole('button', { name: /^\d+\+$/ })[0];
     expect(toggleButton).toBeInTheDocument();
     expect(screen.getByTestId(`extra-resources-${taskId}`)).toBeInTheDocument();
 
@@ -112,13 +112,13 @@ describe('Unit Test case for PeopleTableDetails component', () => {
       display: 'table-cell',
     });
 
-    fireEvent.click(screen.getByRole('button', { name: /^\d+\+$/ }));
+    fireEvent.click(screen.getAllByRole('button', { name: /^\d+\+$/ })[0]);
     expect(screen.getByTestId(`extra-resources-${taskId}`)).toHaveStyle({ display: 'none' });
   });
 
   it('Test 8 : Verify remaining resource count displayed', () => {
     render(<PeopleTableDetails taskData={[getMockTask('1', 'P2', 4)]} />);
-    expect(screen.getByText('2+')).toBeInTheDocument();
+    expect(screen.getAllByText('2+')[0]).toBeInTheDocument();
   });
 });
 
@@ -137,7 +137,7 @@ describe('TaskResourceCell', () => {
         {...baseProps}
       />,
     );
-    expect(screen.getByText('1+')).toBeInTheDocument();
+    expect(screen.getAllByText('1+')[0]).toBeInTheDocument();
   });
 
   it('shows the extra-resources block when the task is in expandedTasks', () => {
@@ -163,7 +163,7 @@ describe('TaskResourceCell', () => {
         toggleMoreResources={toggleMoreResources}
       />,
     );
-    fireEvent.click(screen.getByText('1+'));
+    fireEvent.click(screen.getAllByText('1+')[0]);
     expect(toggleMoreResources).toHaveBeenCalledWith(task._id);
   });
 });
@@ -185,4 +185,4 @@ describe('CenteredValueCell', () => {
     render(<CenteredValueCell value="2022-01-01" />);
     expect(screen.getByText('2022-01-01')).toHaveStyle({ textAlign: 'center' });
   });
-});
+});
\ No newline at end of file

From a25a95913f0f0feac6e51327d0e815932c6eca44 Mon Sep 17 00:00:00 2001
From: linlin-husky <fan.linli@northeastern.edu>
Date: Fri, 4 Sep 2026 16:56:11 -0400
Subject: [PATCH 6/6] refactor(Reports): format code with Prettier and add
 clear English comments to PeopleTableDetails

---
 src/components/Reports/PeopleTableDetails.jsx | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/components/Reports/PeopleTableDetails.jsx b/src/components/Reports/PeopleTableDetails.jsx
index bee2a6de8f..508513c8fe 100644
--- a/src/components/Reports/PeopleTableDetails.jsx
+++ b/src/components/Reports/PeopleTableDetails.jsx
@@ -4,6 +4,12 @@ import { useTable } from 'react-table';
 import styles from './PeopleTableDetails.module.css';
 import TableFilter from './TableFilter/TableFilter';
 
+/**
+ * TaskResourceCell Component
+ * Renders the primary profile pictures for assigned resources (up to 2),
+ * a collapse/expand toggle button for additional resources, and a hidden/visible 
+ * container for extra resources when expanded.
+ */
 export function TaskResourceCell({
   row,
   column,
@@ -57,6 +63,10 @@ export function TaskResourceCell({
   );
 }
 
+/**
+ * YesNoCell Component
+ * Renders a centered checkmark for 'Yes' values or a cross mark otherwise.
+ */
 export function YesNoCell({ value }) {
   return (
     <div style={{ textAlign: 'center' }}>
@@ -65,11 +75,21 @@ export function YesNoCell({ value }) {
   );
 }
 
+/**
+ * CenteredValueCell Component
+ * Renders any standard text value centered within its table cell.
+ */
 export function CenteredValueCell({ value }) {
   return <div style={{ textAlign: 'center' }}>{value}</div>;
 }
 
+/**
+ * PeopleTableDetails Main Component
+ * Manages filtering states, table data configuration using react-table, 
+ * desktop table layout, and responsive mobile card view.
+ */
 function PeopleTableDetails(props) {
+  // Filter search states
   const [name, setName] = useState('');
   const [priority, setPriority] = useState('');
   const [status, setStatus] = useState('');