Maked Project Health Dashboard responsive

[anurag2787]

Proposed change

This PR fixes layout issues on small screens in the Project Health Dashboard and Metrics pages.

Resolves #3445

Before FIx

After Fix

Checklist

• Required: I followed the contributing workflow
• Required: I verified that my code works as intended and resolves the issue as described
• Required: I ran make check-test locally: all warnings addressed, tests passed
• I used AI for code, documentation, tests, or communication related to this PR

[coderabbitai]

Summary by CodeRabbit

Style

• Improved responsive design across the dashboard with adjusted layout breakpoints for better alignment with screen sizes.
• Optimized component sizing and typography scaling to provide an enhanced experience on mobile and larger devices.
• Fine-tuned UI proportions for improved visual consistency across viewport sizes.

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

Walkthrough

Delayed horizontal layout breakpoints from md to lg across dashboard/nav, adjusted metrics page header to be responsive, and reduced several component/icon base sizes with small-screen responsive overrides.

Changes

Cohort / File(s)	Change Summary
Dashboard layout & navbar frontend/src/app/projects/dashboard/layout.tsx, frontend/src/components/ProjectsDashboardNavBar.tsx	Changed responsive breakpoint usage from md → lg, altering when containers switch between flex-col and flex-row and adjusting alignment on medium viewports.
Metrics page header frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx	Replaced a single-row header container with a responsive flex layout that stacks on small screens and spaces on larger screens; made project name typography responsive (text-lg default, text-2xl on larger screens).
Compact component sizing frontend/src/components/GeneralCompliantComponent.tsx, frontend/src/components/MetricsScoreCircle.tsx	Reduced base container and icon sizes (e.g., h-14 w-14 → h-10 w-10) and added sm: overrides; decreased default text sizes with sm: increases; preserved existing behavior and conditional rendering.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Implement the overview dashboard and the navigation bar #1714: Touches the dashboard layout and navbar files with similar responsive breakpoint changes.
• Bug/fix scroll on Project Health Score click #2050: Modifies MetricsScoreCircle.tsx, overlapping with component sizing and metrics UI adjustments.

Suggested reviewers

• arkid15r
• aramattamara

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title contains a typo ('Maked' instead of 'Made') but accurately describes the main change of making the Project Health Dashboard responsive.
Description check	✅ Passed	The description clearly explains the purpose of the PR, references the linked issue (#3445), includes before/after screenshots, and verifies the fix works as intended.
Linked Issues check	✅ Passed	The code changes address all requirements from issue #3445: responsive layout adjustments across dashboard and metrics pages with updated breakpoints and responsive sizing for both desktop and small screens.
Out of Scope Changes check	✅ Passed	All changes are focused on responsive layout adjustments (breakpoint changes, sizing updates) directly addressing the issue; no unrelated refactoring or feature additions detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/src/app/projects/dashboard/metrics/`[projectKey]/page.tsx:
- Line 75: In the JSX div in page.tsx that currently uses className "flex gap-2
overflow-x-auto pb-1 sm:w-auto sm:w-full sm:overflow-visible", remove the
redundant/conflicting small-screen width class (either remove "sm:w-auto" or
"sm:w-full") so Tailwind behavior is explicit; decide whether the small
breakpoint should be auto width or full width, keep the chosen "sm:w-*" and
update the className on that div accordingly.

[kasya]

@anurag2787 this looks good 👍🏼
Thank you!

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.57%. Comparing base (b177dfe) to head (a6ee022).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3495   +/-   ##
=======================================
  Coverage   85.57%   85.57%           
=======================================
  Files         461      461           
  Lines       14236    14236           
  Branches     1897     1897           
=======================================
  Hits        12182    12182           
  Misses       1679     1679           
  Partials      375      375           

Flag	Coverage Δ
backend	84.47% <ø> (ø)
frontend	88.62% <100.00%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
...p/projects/dashboard/metrics/[projectKey]/page.tsx	95.45% <ø> (ø)
...ntend/src/components/GeneralCompliantComponent.tsx	100.00% <ø> (ø)
frontend/src/components/MetricsScoreCircle.tsx	100.00% <100.00%> (ø)
...rontend/src/components/ProjectsDashboardNavBar.tsx	100.00% <ø> (ø)

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b177dfe...a6ee022. Read the comment docs.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[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