Yuxuan fix project report pie chart responsiveness and readability

[CarolineYXW]

Description

Related PRS (if any):

This frontend PR is related to the #XXX backend PR.
To test this backend PR you need to checkout the #XXX frontend PR.
…

Main changes explained:

• Update the Project Reports pie charts to prevent member labels from overlapping on desktop.
• Improve responsive pie chart behavior by adjusting chart geometry based on the available container width.
• Replace external pie chart labels with a contained member list on screens 576px and below.
• Fix overlap between the pie chart center summary and the All/Select toggle.
• Fix the All/Select toggle styling and ensure multiple Project Report pie charts operate independently.
• Improve pie chart text and control readability in both light and dark modes.
• Improve dark-mode readability of the Tasks filter controls without changing their existing layout.
• Add regression tests for responsive chart behavior, multiple member selections, and independent chart instances.

How to test:

1. check into current branch
2. Run npm install, then run the frontend application locally.
3. Clear the browser site data/cache if needed.
4. Log in as an admin user.
5. Go to Dashboard → Reports → Reports → Projects.
6. Select a project that contains multiple team members and enable Show PieChart.
7. Verify that member labels and connector lines do not overlap on desktop.
8. Switch between All and Select and verify that the center summary and toggle do not overlap.
9. In Select mode, select multiple members and verify that the selected slices and total selected hours are displayed correctly.
10. Open both Project Report pie charts and verify that their All/Select controls work independently.
11. Resize the browser to mobile width (576px or below) and verify that the chart does not overflow horizontally and member information is displayed in the list below the chart.
12. Verify the Project Reports pie charts in both light mode and dark mode.
13. Go to Dashboard → Reports → Reports → Tasks in dark mode and verify that the filter text, dropdown values, Estimated Hours field, Active label, and Assign label are readable.

Screenshots or videos of changes:

Note:

Include the information the reviewers need to know.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	1d6a767
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a913d6e0bb86100087426ce
😎 Deploy Preview	https://deploy-preview-5475--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
4 New issues
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