fix: prevent header wrapping on medium screens

[successbyte]

Description

This PR fixes the header layout issue on medium screen widths where navigation items and the GitHub button wrap between 1024px and 1100px.

The desktop navigation requires more horizontal space than 1024px provides, so this PR keeps the compact header visible until 1100px and only shows the full desktop navigation from 1100px upward.

It also renders the mobile navigation menu through a React portal into document.body. This prevents the fixed mobile menu from being constrained by the sticky/transformed navbar container at medium widths.

Related Issue

Closes #4898

Changes

• Shows compact header controls until 1100px.
• Shows full desktop navigation from 1100px+.
• Updates MobileNavMenu visibility to match the new 1100px breakpoint.
• Uses createPortal for MobileNavMenu so the overlay can use the full viewport height.

Screenshots / Testing

Video demo of issue:

header-issue.webm

Video demo of fix:

header-fix.webm

Expected behavior:

• No nav links or GitHub button text wrap between 1024px and 1100px.
• Hamburger menu opens correctly and uses the full available overlay height.
• Full desktop navigation appears normally at 1100px+.

Checklist

• The header no longer wraps in the reported medium-width range.
• The compact menu remains usable between 1024px and 1099px.
• The full desktop nav is preserved for larger screens.
• No logo size changes were made.

Summary by CodeRabbit

Release Notes

• Bug Fixes
  • Fixed mobile menu rendering behavior and improved hydration stability.
  • Adjusted responsive breakpoints for mobile menu visibility across screen sizes.

[netlify]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	ed8ab30
🔍 Latest deploy log	https://app.netlify.com/projects/asyncapi-website/deploys/6a200ca94f1d4700085ac64d
😎 Deploy Preview	https://deploy-preview-5536--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

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

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: b5c66163-8df2-4b04-92a5-5c2a937b60e8

📥 Commits

Reviewing files that changed from the base of the PR and between b1beb34 and ed8ab30.

📒 Files selected for processing (2)

• components/navigation/MobileNavMenu.tsx
• components/navigation/NavBar.tsx

---

📝 Walkthrough

Walkthrough

The PR fixes header layout wrapping on medium screen sizes by adjusting responsive breakpoints from lg to min-[1100px] and refactoring mobile menu rendering to use portals with mount-time detection for hydration safety.

Changes

Navigation Menu Responsive Fix

Layer / File(s)	Summary
Responsive breakpoint alignment components/navigation/MobileNavMenu.tsx, components/navigation/NavBar.tsx	Tailwind responsive breakpoints are updated from lg:hidden/lg:flex to min-[1100px]:hidden/min-[1100px]:flex across the mobile menu and desktop navigation containers to prevent content wrapping at intermediate screen widths (1020px–1150px).
Mobile menu portal and mount-time rendering components/navigation/NavBar.tsx	createPortal import is added and isMounted state is introduced in a mount-only useEffect to defer mobile menu rendering until hydration completes. MobileNavMenu is now rendered into document.body via createPortal only when both isMounted and mobileMenuOpen are true, eliminating the component from the main tree.

🎯 2 (Simple) | ⏱️ ~12 minutes

🐰 A tale of breakpoints large and wide,
Where 1100 pixels become our guide,
Portal magic carries menus through,
Hydration-safe and responsive too!
No wrapping text, the nav sits tight,
Our layout's fixed, our views are bright! 🎉

🚥 Pre-merge checks | ✅ 5

✅ 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 'fix: prevent header wrapping on medium screens' accurately reflects the main objective of the PR to resolve header wrapping issues.
Linked Issues check	✅ Passed	The code changes directly address issue #4898 by adjusting breakpoints to prevent wrapping between 1024-1100px and ensuring proper mobile menu rendering.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the header wrapping issue via breakpoint adjustments and mobile menu portal rendering, with no extraneous modifications.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.

---

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (b1beb34) to head (ed8ab30).
⚠️ Report is 67 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff            @@
##            master     #5536   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           23        23           
  Lines          931       931           
  Branches       180       180           
=========================================
  Hits           931       931           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

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

[asyncapi-bot]

⚡️ Lighthouse report for the changes in this PR:

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

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

[princerajpoot20]

FYI: #4898 (comment)