fix: horizontal scrollbar appearing in Tools flyout menu

[abhix4]

Description

• The Tools flyout menu caused a horizontal scrollbar due to overflow-x-scroll
• Updated styles to use overflow-x-auto

Before:

After:

Screencast.from.2025-11-30.20-43-16.webm

Related issue(s)
#4652

Summary by CodeRabbit

• Bug Fixes
  • Refined flyout menu scrolling behavior and height handling to improve visual presentation and content accessibility.

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

[netlify]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	f26d4c3
🔍 Latest deploy log	https://app.netlify.com/projects/asyncapi-website/deploys/692efadc4e13370008ebb12c
😎 Deploy Preview	https://deploy-preview-4653--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.

[github-actions]

Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[coderabbitai]

Walkthrough

This pull request modifies the FlyoutMenu component's styling, changing the vertical height constraint from a fixed value to a maximum value and updating horizontal overflow behavior from scroll to auto. These CSS adjustments address scrollbar display issues without altering component structure or logic.

Changes

Cohort / File(s)	Summary
FlyoutMenu styling adjustment components/navigation/FlyoutMenu.tsx	Updated container className: replaced md:h-[80vh] overflow-x-scroll with md:max-h-[80vh] overflow-x-auto to refine height constraint and horizontal overflow handling

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Single file with CSS-only changes
• Straightforward className update addressing a known scrollbar issue
• No logic, structure, or export modifications

Possibly related issues

• [BUG] Tools flyout menu displayed an unintended horizontal scrollbar #4652: This PR directly implements the fix for the unintended horizontal scrollbar in the Tools flyout menu by replacing overflow-x-scroll with overflow-x-auto and adjusting the height constraint

Possibly related PRs

• fix: improved homepage and docs layout and added missing details to the design #4485: Modifies the same FlyoutMenu.tsx file with related styling updates to the container element

Suggested labels

ready-to-merge

Suggested reviewers

• akshatnema
• sambhavgupta0705
• derberg
• devilkiller-ag

Poem

🐰 A scrollbar too wide caused the menu to stumble,
So we changed the constraint with a CSS rumble,
From h to max-h, and scroll to auto's grace,
The flyout now fits in its proper place! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 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: fixing a horizontal scrollbar issue in the Tools flyout menu by updating CSS overflow properties.
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

---

📜 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 5f83885 and 742d534.

📒 Files selected for processing (1)

• components/navigation/FlyoutMenu.tsx (1 hunks)

⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: Redirect rules - asyncapi-website
• GitHub Check: Header rules - asyncapi-website
• GitHub Check: Pages changed - asyncapi-website
• GitHub Check: Lighthouse CI

🔇 Additional comments (1)

components/navigation/FlyoutMenu.tsx (1)

17-17: Good fix for horizontal scrollbar. Verify vertical overflow handling.

The change from overflow-x-scroll to overflow-x-auto correctly prevents the horizontal scrollbar from appearing unnecessarily, and switching from fixed height (h-[80vh]) to max height (max-h-[80vh]) is a good improvement for responsive design.

However, please verify how vertical overflow is handled when the menu content exceeds 80vh. Currently, there's no overflow-y specified on this container, and the nested div on line 21 has overflow-hidden. Test with many menu items to ensure users can scroll through all content without it being clipped.

If vertical scrolling isn't working as expected, consider adding overflow-y-auto to the className.

---

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (5f83885) to head (742d534).

Additional details and impacted files

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

☔ View full report in Codecov by Sentry.
📢 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	42
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	33

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