Fix modal overflow and improve responsiveness on small screens

[Isha-upadhyay]

Proposed change

Resolves #3390

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.

screenshots:

---

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
• 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

• Style
  • Redesigned modal layout with an enhanced header structure including title and optional description.
  • Improved body content organization with scrolling and summary section.
  • Added footer section with action buttons and visual dividers.
  • Enhanced responsive sizing and dark mode support throughout.
  • Updated typography and spacing for improved accessibility.

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

Walkthrough

The Modal component in the frontend was redesigned for improved responsiveness and structure. Changes include reducing modal size from "4xl" to "lg", restructuring the header with responsive typography, reorganizing the body with internal scrolling, redesigning the hints section, and adding a footer with improved button styling to address viewport overflow issues on mobile devices.

Changes

Cohort / File(s)

Summary

Modal component UI overhaul frontend/src/components/Modal.tsx

Comprehensive restructuring: modal size reduced to "lg" with responsive max-height; ModalContent expanded with Tailwind utility classes for dark mode and overflow handling; header reworked with h2 title and optional description; body reorganized with scrolling and Summary section; hint section moved to distinct block with "How to tackle it" heading; added visual divider and sticky footer; close button styling updated for improved accessibility across light/dark modes

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• Fix #1859: Added test to Modal Component #2016: Modal component structural and class changes directly impact the rendering, markup, and accessibility attributes that existing unit tests target.
• fixed the modal window where the close button was focused earlier #1196: Both PRs modify Modal.tsx's close button styling and focus/hover behavior patterns.

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