[Bug]:File path overflows card border on iPhone 12 Pro

[Isha-upadhyay]

Proposed change

Resolves #2989

This PR fixes a mobile responsiveness issue where long inline code snippets
and URLs in issue summaries caused cards to overflow horizontally on small
screens.

The fix enables safe word wrapping for Markdown-rendered content, including
inline code and links, allowing cards to expand vertically on mobile devices
without affecting the desktop layout.

screenshots before change ->

screenshots after change ->

Checklist

• Required: I read and followed the contributing guidelines
• Required: I ran make check-test locally and all tests passed
• I used AI for code, documentation, or tests in this PR

[coderabbitai]

Summary by CodeRabbit

• Style
  • Improved text wrapping and word-breaking in project summaries for better readability and consistent display across various screen sizes.
  • Links and inline code now break more naturally to avoid layout overflow.
  • Preserves existing text color theming and overall visual consistency.

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

Walkthrough

Changed Card.tsx to render project summaries with additional CSS utility classes that enable breaking and wrapping for long text (including targeted rules for code and a), preserving existing color theming to prevent horizontal overflow in small viewports.

Changes

Cohort / File(s)	Summary
Card component styling frontend/src/components/Card.tsx	Replaced single-line Markdown className with an expanded set of classes adding overflow-wrap-anywhere, break-words, and targeted break rules for code and a elements to prevent summary text (e.g., long file paths) from overflowing the card.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• Fixed contribute page responsiveness #1127: Modifies Card container layout classes; touches the same component and may interact with visual overflow/layout changes.
• fixed responsiveness issue in chapters page #1453: Adjusts project summary Markdown rendering/styling in Card.tsx; directly related to className/style changes.
• Use markdown-it for mentorship portal summaries #2762: Changes how summaries are rendered using the Markdown component and break rules; related to text-wrapping behavior.

Suggested reviewers

• kasya

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the bug being fixed: a file path overflow issue on iPhone 12 Pro, which matches the core change in Card.tsx to enable text wrapping.
Description check	✅ Passed	The description is directly related to the changeset, explaining the mobile responsiveness issue, the fix applied, and including before/after screenshots demonstrating the fix.
Linked Issues check	✅ Passed	The PR addresses issue #2989 by implementing CSS text-wrapping styles in Card.tsx that resolve the file path overflow problem on small screens, meeting the stated objective of enabling proper wrapping for inline code and links.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the overflow issue through CSS modifications in Card.tsx; no unrelated modifications are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fb1c30d and 474d518.

📒 Files selected for processing (1)

• frontend/src/components/Card.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• frontend/src/components/Card.tsx

---

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

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b782d00 and 91217bc.

⛔ Files ignored due to path filters (1)

• frontend/package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (1)

• frontend/src/components/Card.tsx

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: Rajgupta36
Repo: OWASP/Nest PR: 2288
File: frontend/src/components/ActionButton.tsx:0-0
Timestamp: 2025-09-17T02:42:41.928Z
Learning: In frontend/src/components/ActionButton.tsx, the user Rajgupta36 intentionally changed text-blue-600 to text-[#1D7BD7] to align the text color with the border color (#1D7BD7) for visual consistency, prioritizing design alignment over theme tokens.

📚 Learning: 2025-09-17T02:42:41.928Z

Learnt from: Rajgupta36
Repo: OWASP/Nest PR: 2288
File: frontend/src/components/ActionButton.tsx:0-0
Timestamp: 2025-09-17T02:42:41.928Z
Learning: In frontend/src/components/ActionButton.tsx, the user Rajgupta36 intentionally changed text-blue-600 to text-[#1D7BD7] to align the text color with the border color (#1D7BD7) for visual consistency, prioritizing design alignment over theme tokens.

Applied to files:

• frontend/src/components/Card.tsx

🧬 Code graph analysis (1)

frontend/src/components/Card.tsx (1)

frontend/src/components/MarkdownWrapper.tsx (1)

• Markdown (5-20)

[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

[arkid15r]

@Isha-upadhyay thanks for fixing that!

Please take closer attention to the contribution guidelines next time -- make check reformatted your code.

[Isha-upadhyay]

Thanks for the feedback, @arkid15r
I’ll run make check earlier and follow the guidelines more closely next time.