Mobile responsiveness for Recent Milestones section

[dhirukumar]

Proposed change

Resolves #3599
Updated the grid layout classes to use a mobile-first approach:

Result

✅ Fully responsive layout across all screen sizes
✅ No overflow or layout breaking on mobile devices
✅ Improved user experience on smaller screens

Checklist

I followed the contributing workflow
I verified that my code works as intended and resolves the issue as described
I ran make check-test locally: all warnings addressed, tests passed

[coderabbitai]

Walkthrough

The change modifies grid container wrappers in CardDetailsPage.tsx to enforce explicit responsive grid behavior. It adjusts the RecentIssues/Milestones and RecentPullRequests/RecentReleases sections from default two-column layouts to single-column on small screens, switching to two columns at large breakpoints.

Changes

Cohort / File(s)	Summary
Grid Layout Responsiveness frontend/src/components/CardDetailsPage.tsx	Adjusts grid container wrappers for RecentIssues/Milestones and RecentPullRequests/RecentReleases sections to use explicit responsive grid with single-column default and two-column layout at large screens.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• changed recent issues, recent releases to 2 column layout #1090: Modifies the same file and grid containers in CardDetailsPage.tsx to change responsive layout behavior for recent sections.

Suggested labels

frontend

Suggested reviewers

• arkid15r
• kasya

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	Title clearly identifies the main change targeting the Recent Milestones section responsiveness on mobile, matching the core objective of the pull request.
Linked Issues check	✅ Passed	Changes implement responsive grid layout adjustments for CardDetailsPage component to fix mobile responsiveness issues identified in #3599 for Recent Milestones section.
Out of Scope Changes check	✅ Passed	All changes are narrowly focused on responsive grid layout in CardDetailsPage.tsx, directly addressing the mobile responsiveness objective from issue #3599.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The pull request description is directly related to the changeset, explaining the mobile-first responsive grid layout update that resolves issue #3599.

_{✏️ 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.}

[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

[kasya]

@dhirukumar your branch doesn't have recent changes from main that would show Recent milestones for programs at all 🤔
I'm wondering how did you test this out locally...

Closing this in favor of #3674