Fix Project Health Dashboard responsiveness on small screens

[Dev10-sys]

Hi maintainers,
I’ve implemented a responsive fix for both dashboard pages mentioned in #3445.

I’m unable to self-assign the issue due to org permissions, so linking the PR here for review.

Please let me know if any changes are needed.

Related to #3445

[github-actions]

The linked issue must be assigned to the PR author.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Summary by CodeRabbit

• New Features

  • Added horizontally scrollable charts for improved mobile responsiveness
  • Introduced new metric displays: Stars/Forks, Issues breakdown, Open Pull Requests, and Days Metrics

• Style

  • Reorganized dashboard layout for enhanced responsiveness across screen sizes
  • Improved header structure with project information and key components
  • Optimized metrics container organization for better readability

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Walkthrough

The PR addresses dashboard responsiveness by restructuring layout containers and reorganizing chart presentations. Charts are converted from side-by-side layouts to individually scrollable blocks; header sections are expanded with responsive flex patterns; and new metric visualizations are added to the metrics dashboard page.

Changes

Cohort / File(s)	Summary
Metrics Dashboard Layout Restructuring frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx	Container classes updated to constrained scroll-safe wrappers; header reorganized with responsive flex/stack pattern; charts moved to individual horizontally-scrollable containers; new metric blocks added for Stars/Forks, Issues, and Pull Requests; Days Metrics bar chart introduced with reverseColors option.
Dashboard Page Type Annotations and Scroll Handling frontend/src/app/projects/dashboard/page.tsx	Type annotations replaced with inferred constant structures using as const; outer container converted to full-width overflow wrapper; charts wrapped in individual horizontally-scrollable blocks; layout adjustments for responsive spacing.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• Add bar with markers instead of gradient radial chart #1703: Related due to overlapping chart-level changes introducing/replacing charts with BarChart, updating Health/Days metrics rendering, and modifying charting components and data fields.
• Bug/fix scroll on Project Health Score click #2050: Related due to dashboard metrics layout reorganization and changes to MetricsScoreCircle usage patterns in the metrics page.
• Implement the overview dashboard and the navigation bar #1714: Related due to shared modifications to projects dashboard frontend components and layout structures.

Suggested labels

frontend

Suggested reviewers

• arkid15r
• kasya

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[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