Linlin fix(reports): resolve text overlap and chart label crowding in TotalProjectReport

[linlin-husky]

Description

This PR resolves critical UI layout, text overlap, and responsiveness issues across extreme resolutions and zoom levels in the TotalProjectReport and TotalReportBarGraph components.

• Fixes layout overflow and text/number vertical collision in TotalProjectReport.
• Resolves SVG chart X-axis label crowding and clipping in TotalReportBarGraph by applying proper word-wrapping and -35deg label rotation.
• Fixes a PostCSS build error caused by unclosed CSS comments in module stylesheets.
  Fixes # UI/UX Bug Fix (Reports & Charts - High Priority)

Related PRS (if any):

PR3502

Main changes explained:

• Container & Layout Stacking: Updated TotalReport.module.css to include word-break: break-word, overflow: visible, and switched .totalItem from row to flex-direction: column to completely prevent narrow-screen text and number overlapping.
• Chart Label Optimization: Updated TotalReportBarGraph.module.css by adding a -35deg rotation to X-axis year labels and fine-tuning typography scaling to eliminate crowding.
• Build Error Fix: Cleaned up unclosed comment blocks in stylesheets to ensure smooth PostCSS and Vite compilation.

How to test:

1. Check out the current branch (linlin_contributors_report_fix).
2. Run npm install and start the app locally (npm run start:local).
3. Clear site data/cache to avoid stale styles.
4. Log in as an admin/owner user.
5. Navigate to Dashboard -> Reports -> Total Project Report / Bar Graph.
6. Verify that numbers, titles, and bar chart X-axis labels (years) no longer overlap or crowd each other on narrow/zoomed screens.
7. Verify this new feature and layout stability work seamlessly in dark mode.

Screenshots or videos of changes:

Before the change

Before.the.change.mov

After the change

report.after.the.change.mov

Note:

Please ensure proper dark mode contrast and layout stability are verified during review.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	80bba71
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a9b1b7069d33a00087bc23a
😎 Deploy Preview	https://deploy-preview-5507--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
0 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

[iAbhi001]

If the labels remain horizontal after a hard refresh, paste a comment like this:
Hi @linlin-husky, thanks for working on this!

I tested the branch locally, but the −35 ∘rotation for the X-axis year labels does not appear to be applied (see screenshot below—labels are still rendering horizontally at 0∘).

Could you confirm:
Is the rotation intended only under specific media query breakpoints, or globally on the chart?
If global, could you double-check the selector targeting the SVG elements in TotalReportBarGraph.module.css?
The text stacking fix under the Total Project Report metrics looks good and is functioning properly.