Linlin fix people report UI

[linlin-husky]

Description

Optimized the PeopleTableDetails component to deliver a fully responsive experience across viewports. This includes implementing a robust mobile card view with proper text wrapping for long task names, fixing UI compression bugs on status badges, and standardizing dark mode styling with custom scrollbars.

Related PRs (if any):

PR 2005
PR2650

Main changes explained:

• Refined Mobile Card Header Layout: Updated PeopleTableDetails.module.css and PeopleTableDetails.jsx to use flexbox (align-items: flex-start, gap: 10px, flex: 1, and flex-shrink: 0) ensuring long task names wrap correctly without compressing or overflowing the "Started" status badges on narrow screens ($\le 600px$).
• Optimized Dark Mode & Scrollbar Customization: Cleaned up legacy redundant styles and standardized dark mode color palettes for cards and tables. Added explicit WebKit scrollbar styling (::-webkit-scrollbar, ::-webkit-scrollbar-thumb) to ensure smooth and visible scrolling behavior in dark mode.
• Code Cleanup & Quality Assurance: Removed unused legacy code and fixed all stylelint warnings (such as redundant longhand properties and specificity orders) to ensure a clean, maintainable build.

How to test:

1. Check out to the current branch (Linlin-fix-people-report-ui).
2. Run npm install and npm run start:local to run this PR locally.
3. Clear site data/cache if necessary.
4. Log in as an admin or regular user.
5. Navigate to Reports → People Report / Task Details table.
6. Verify Desktop View: Test horizontal scrolling with minimum table width constraints and verify clean rendering in both light and dark modes.
7. Verify Mobile Card View: Resize the window ($\le 600px$) or use mobile device emulation to check that long task names wrap properly and status tags remain aligned without distortion.
8. Verify Dark Mode: Toggle dark mode to check overall contrast, text readability, and custom scrollbar visibility.

Screenshots or videos of changes:

Uploading Screen Recording 2026-09-03 at 9.15.52 PM.mov…

Note:

• Fully tested across desktop and mobile viewports with stylelint checks passing successfully.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	a25a959
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a9b307236daa90008956e99
😎 Deploy Preview	https://deploy-preview-5503--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[iAbhi001]

Please don't consider my previous comment as it was done by mistake.