fix: docs dropdown alignment

[debasish5452v]

I was looking through the open issues and found #4932 about the Docs dropdown having some alignment issues on hover.

After checking the navbar component, I tracked down the problem to the FlyoutMenu.tsx file,, and The dropdown was using -ml-4 (negative left margin) with some other positioning classes that were conflicting with each other. And it was causing the dropdown to appear slightly offset.

Changes Made

I Removed the -ml-4 negative margin that was causing the misalignment.
And Cleaned up the positioning logic to use left-0 on mobile screens.
Also simplified the centering classes to left-1/2 with -translate-x-1/2 on medium screens and above.
The dropdown now aligns properly with the navbar at default zoom

Testing

I Tested it locally by hovering over the Docs menu item and the dropdown now appears aligned correctly without the visual shift.

Fixes #4932

Summary by CodeRabbit

Bug Fixes

• Enhanced language selection persistence with safer, centralized storage handling.
• Implemented automatic storage initialization on app startup to prevent runtime errors from missing values.

UI/UX

• Improved Flyout menu positioning and responsive alignment for better layout consistency.

Improvements

• Added robust error handling for storage operations to improve app stability.

_{✏️ 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	fa67058
🔍 Latest deploy log	https://app.netlify.com/projects/asyncapi-website/deploys/696485f20d42ff000892c909
😎 Deploy Preview	https://deploy-preview-4937--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]

📝 Walkthrough

Walkthrough

A new centralized localStorage utility module is introduced with three helper functions (getStorageItem, setStorageItem, initializeStorage) to safely manage browser storage. The app initializes storage on mount to prevent runtime errors. NavBar now uses the utility instead of direct localStorage access. FlyoutMenu's CSS positioning is simplified for improved layout alignment. ToolsCard's useEffect dependency array is simplified.

Changes

Cohort / File(s)	Summary
Storage Utility System utils/storage.ts, pages/_app.tsx, components/navigation/NavBar.tsx	New utils/storage.ts module exports three functions: getStorageItem() with fallback support, setStorageItem() with error handling, and initializeStorage() to clean null values. pages/_app.tsx now calls initializeStorage() in a useEffect on mount. NavBar.tsx replaces direct localStorage.setItem() call with setStorageItem() utility.
Navigation Layout Fixes components/navigation/FlyoutMenu.tsx	Simplifies Flyout container positioning by removing -ml-4, md:ml-12, lg:left-1/2, and lg:-translate-x-1/2 classes; replaces with left-0 and keeps md:left-1/2 with md:-translate-x-1/2 for corrected horizontal alignment.
Component Effect Cleanup components/tools/ToolsCard.tsx	Changes useEffect dependency array from [descriptionRef.current] to [], making truncation check run only on mount rather than on ref changes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A fluffy hop through storage clean,
With centerèd dropdowns, crisp and keen!
No null values lurking in the fray,
The flyout aligns in perfect way!
Storage utilities save the day! 🌟

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The PR includes several out-of-scope changes: a new storage utility module (utils/storage.ts), integration of storage utilities in NavBar.tsx, initializeStorage in _app.tsx, and a useEffect dependency array change in ToolsCard.tsx that are unrelated to the FlyoutMenu alignment fix.	Extract storage utility changes, _app.tsx initialization, and ToolsCard.tsx dependency array changes into separate PRs to isolate the FlyoutMenu alignment fix from unrelated modifications.
Linked Issues check	❓ Inconclusive	The PR successfully addresses the FlyoutMenu alignment issue (#4932) but also includes unrelated storage utilities and a dependency array change that fall outside the linked issue scope.	Review whether storage utility changes and the ToolsCard useEffect modification are intentional additions or should be addressed in separate PRs; clarify their necessity for the core alignment fix.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Title check	✅ Passed	The PR title 'fix: docs dropdown alignment' is directly related to the main objective of fixing the Docs dropdown menu misalignment issue, which is addressed primarily in FlyoutMenu.tsx. However, the changeset includes several unrelated changes (storage utilities, dependency array modification, localStorage refactoring) that are not reflected in the title.

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

✨ Finishing touches

• 📝 Generate docstrings

---

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 (2747eba) to head (fa67058).
⚠️ Report is 18 commits behind head on master.

Additional details and impacted files

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

☔ 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	41
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	33

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