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[bot]]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	99d64469d4675e915da6c8e02449166156edc3d9
🔍 Latest deploy log	https://app.netlify.com/projects/asyncapi-website/deploys/694e7ed24837b80008e729e5
😎 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.

[coderabbitai[bot]]

📝 Walkthrough

Walkthrough

Updated a single CSS class in the FlyoutMenu component: replaced overflow-x-scroll with overflow-x-auto in components/navigation/FlyoutMenu.tsx. No structural, logic, or export changes were made; md:h-[80vh] remains unchanged.

Changes

Cohort / File(s)	Summary
FlyoutMenu styling tweak components/navigation/FlyoutMenu.tsx	Replaced overflow-x-scroll with overflow-x-auto in the container className; no other edits or structural changes

Sequence Diagram(s)

(omitted — change is a single-file CSS tweak and does not alter control flow)

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related issues

• asyncapi/website#4652 — Targets the Tools flyout horizontal scrollbar; this change adjusts the same overflow behavior in FlyoutMenu.

Poem

🐰 I hopped in to tweak a tiny scroll,
Swapped "scroll" for "auto" to mend the hole,
The menu breathes easy, no longer wide,
A gentle CSS fix, snug and swift inside. 🥕

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 clearly describes the main change: replacing overflow-x-scroll with overflow-x-auto to fix a horizontal scrollbar issue in the Tools flyout menu.
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 742d534ed11b352808de28694ec9db5d4f6b5f05 and 99d64469d4675e915da6c8e02449166156edc3d9.

📒 Files selected for processing (1)

• components/navigation/FlyoutMenu.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• components/navigation/FlyoutMenu.tsx

⏰ 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: Test NodeJS PR - windows-latest

---

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[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 (6521774) to head (99d6446). :warning: Report is 1 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff            @@
##            master     #4653   +/-   ##
=========================================
  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	38
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	33

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

[abhix4]

@princerajpoot20 please review when you get time!

[princerajpoot20]

@abhix4 In the current implementation, we have a shadow border, but with your changes, I don’t see that. Please have a look at that.

[abhix4]

@princerajpoot20 , thank you for the feedback. updated .

https://github.com/user-attachments/assets/4c64d143-9efe-4038-a6c3-edfe08782ee6

[princerajpoot20]

/rtm