fix: prevent background scroll when roadmap modal is open

[sammy200-ui]

• Added overflow hidden to body when modal opens to lock background scroll
• Added cleanup function to restore scroll when modal closes
• Fixes scroll chaining issue where background scrolls after reaching modal bottom

Fixes #4684

Summary by CodeRabbit

• Bug Fixes
  • Modal windows now prevent page scrolling when opened, improving usability and preventing accidental interactions with background content.

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

[coderabbitai[bot]]

Walkthrough

The Modal component now prevents background page scrolling when mounted by setting document.body.style.overflow to 'hidden' and restoring it during cleanup. This addresses scroll chaining behavior where scrolling within a modal continued to scroll the background page content.

Changes

Cohort / File(s)	Summary
Modal scroll containment components/Modal.tsx	Adds document body overflow control in modal mount/cleanup lifecycle to lock background scroll while modal is open

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

• Single file with a straightforward side effect addition
• Simple property manipulation with standard cleanup pattern
• No complex logic or structural changes

Poem

🐰 A modal appears, the scroll must stay still, Background locked down with overflow's will, No chaining scrolls through the modal's great height, Focus contained—the user's delight! ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: preventing background scroll when the roadmap modal is open, which directly addresses the core fix implemented in the PR.
Linked Issues check	✅ Passed	The code changes directly address issue #4684 by implementing scroll locking on the document body during modal mount and restoring it on cleanup, which prevents scroll chaining and keeps background page non-scrollable while modal is open.
Out of Scope Changes check	✅ Passed	All changes in Modal.tsx are scoped to addressing the scroll chaining issue by adding overflow management; no unrelated or out-of-scope modifications are present.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

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

[netlify[bot]]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	17a8540c8a61ffe4808ee9dcce4c61a61c8f3c11
🔍 Latest deploy log	https://app.netlify.com/projects/asyncapi-website/deploys/69482794a7d51e0008bc2815
😎 Deploy Preview	https://deploy-preview-4710--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[codecov[bot]]

Codecov Report

:white_check_mark: All modified and coverable lines are covered by tests. :white_check_mark: Project coverage is 100.00%. Comparing base (52eca18) to head (17a8540). :warning: Report is 1 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff            @@
##            master     #4710   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           22        22           
  Lines          798       798           
  Branches       146       146           
=========================================
  Hits           798       798           

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[asyncapi-bot]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	41
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	33

Lighthouse ran on https://deploy-preview-4710--asyncapi-website.netlify.app/

[sammy200-ui]

@princerajpoot20 Modal is only used in RoadmapPill.tsxwith fixed inset-0 positioning Only one modal can be open at a time - users must close the current modal before accessing another roadmap item body.style.overflow is not set anywhere else in the codebase Global CSS has no overflow property on the body element. If multiple simultaneous modals or dynamic body overflow management become requirements in the future, that would warrant a more robust modal management system as a separate feature. For now, this fix addresses the specific bug without over-engineering.

the suggestion left by copilot and coderabbit is unnecessary for the current implementation.

[sammy200-ui]

Helloo @princerajpoot20 , just following up on this PR .Please let me know if any changes or improvements are needed from my side. Thanks!

[anshgoyalevil]

/rtm

[sammy200-ui]

@anshgoyalevil thanks for the approval !!