Fix: mentorship programs page responsive on smaller screens

[mrkeshav-05]

Proposed change

This PR makes the public link of program responsive on smaller screens.

Resolves: #3599

---

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
  • Refined milestone card spacing and alignment for improved visual consistency across different screen sizes.
  • Improved text truncation behavior in milestone details to prevent content overflow.

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

Walkthrough

The PR refactors spacing in CardDetailsPage.tsx from margin-based to flex/gap-based utilities, explicitly adds grid-cols-1 for single-column layout on smaller screens, and adds min-w-0 to the repository link container to improve truncation behavior.

Changes

Cohort / File(s)	Summary
Recent Milestones Layout & Spacing frontend/src/components/CardDetailsPage.tsx	Added explicit grid-cols-1 to Recent Milestones container; converted margin-based gaps (mr-4) to gap-2 utility across milestone item headers; added min-w-0 to repository link container for proper flex shrinking and truncation behavior.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related PRs

• updated line break issue #1345: Modifies CardDetailsPage.tsx with similar spacing conversions from margins to flex/gap utilities for line-break and truncation fixes.
• changed recent issues, recent releases to 2 column layout #1090: Adjusts grid/column classes and flex/gap behavior in the same CardDetailsPage.tsx component.
• feat: display related milestones on public program page #3441: Introduces the "Recent Milestones" UI section that this PR refines with spacing and truncation improvements.

Suggested reviewers

• arkid15r
• kasya

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	Title references 'mentorship programs page' and responsiveness on smaller screens, directly matching the main changes to CardDetailsPage component's responsive layout.
Description check	✅ Passed	Description mentions making the mentorship programs page responsive on smaller screens and references issue #3599, which aligns with the code changes to the Recent Milestones section layout.
Linked Issues check	✅ Passed	Code changes directly address #3599 requirements: grid layout adjusted for small screens (grid-cols-1), spacing refactored with gap utilities, and flex container constraints improved (min-w-0) to ensure proper truncation on mobile.
Out of Scope Changes check	✅ Passed	All changes are focused on CardDetailsPage responsive layout improvements specific to the Recent Milestones section, directly addressing the linked issue without introducing unrelated modifications.
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.}

[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]

@mrkeshav-05 thanks for this update! 👍🏼

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 87.70%. Comparing base (ffeb5ee) to head (8c4b9ca).
⚠️ Report is 9 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3674   +/-   ##
=======================================
  Coverage   87.70%   87.70%           
=======================================
  Files         462      462           
  Lines       14277    14277           
  Branches     1902     1902           
=======================================
  Hits        12521    12521           
  Misses       1344     1344           
  Partials      412      412           

Flag	Coverage Δ
backend	87.45% <ø> (ø)
frontend	88.38% <ø> (ø)

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

Files with missing lines	Coverage Δ
frontend/src/components/CardDetailsPage.tsx	87.59% <ø> (ø)

---

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 ffeb5ee...8c4b9ca. 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.