Fix Contributor “Read more” dialog overflows on mobile and small screens

[Isha-upadhyay]

Proposed change

Resolves #3369

This PR fixes an issue on the OWASP Nest Contributor page where the “Read more” modal overflowed the viewport on smaller screen sizes.

What was changed

• Made the modal layout fully responsive across screen sizes
• Ensured long titles and content wrap correctly instead of overflowing
• Added proper internal scrolling so content remains accessible on mobile
• Adjusted modal height constraints to prevent viewport overflow

The fix improves usability and readability without changing any backend logic or data flow.

---

screenshorts:

Testing

• Verified modal behavior locally using the frontend development server
• Tested with long titles and content on both desktop and mobile viewports
• Confirmed no content or actions overflow outside the modal

---

Checklist

• Required: I followed the contributing workflow
• Required: I verified that my code works as intended and resolves the issue
• Required: I ran make check-test locally
  (Partially run; unrelated environment-specific failures were not included in this UI-only PR)
• I used AI for code, documentation, tests, or communication related to this PR

[coderabbitai]

Caution

Review failed

The pull request is closed.

Summary by CodeRabbit

• Improvements
  • Enhanced modal component with responsive design and improved dark mode support.
  • Added hint section with icon and markdown rendering for additional context.
  • Improved modal structure with better organization of header, body, and footer areas.
  • Enhanced accessibility and responsiveness across screen sizes.

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

Walkthrough

The Modal component in the frontend has been redesigned with enhanced responsive styling, improved accessibility features, and better visual hierarchy. Changes include size adjustments, a new scrollable body structure, sticky footer positioning, and comprehensive dark mode support.

Changes

Cohort / File(s)

Summary

Modal Component Styling Update frontend/src/components/Modal.tsx

Modal size reduced from 4xl to lg with max-height constraints. ModalContent expanded with comprehensive Tailwind classes. ModalHeader now includes explicit title element (id="modal-title") and optional description. ModalBody converted to scrollable with fixed header. ModalFooter added as sticky bottom-aligned element with visual divider. Close button styling modernized and repositioned. Dark mode support added across all sections. Accessibility improvements include aria-labelledby linkage.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• fixed the modal window where the close button was focused earlier #1196: Modifies the same Modal.tsx component and updates close button styling and behavior.

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

[github-actions]

PR validation failed: No linked issue and no valid closing issue reference in PR description

[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