Fix mobile navbar icon overlap (search and GitHub icons) #487

[devdattatalele]

🐛 Bug Fix: Mobile Navbar Icon Overlap

Fixes: #487

Problem

On mobile devices, the search icon was overlapping with the GitHub icon in the navbar, creating a cluttered UI and potentially affecting usability.

Solution

Added responsive CSS rules specifically targeting mobile viewports (≤996px) to:

• Proper spacing: Added gap property to .navbar__items--right for consistent spacing
• Icon margins: Added explicit margins to prevent overlap between navbar items
• Search component: Optimized search button sizing and positioning
• GitHub icon: Added specific styling for the GitHub link with proper padding
• Small screens: Extra responsive rules for very small screens (≤576px)

Changes

• Modified src/css/custom.css with mobile-specific CSS rules
• Uses Docusaurus's standard breakpoint (996px) for mobile detection
• Maintains existing desktop functionality while fixing mobile issues

Testing

The fix targets common mobile viewport sizes and should be tested on:

• Mobile devices in portrait mode
• Browser DevTools responsive mode
• Various screen sizes (320px - 768px)

Technical Details

• Uses CSS Grid gap property for reliable spacing
• Implements nested media queries for different mobile sizes
• Targets Docusaurus CSS class names (.navbar__items--right, .DocSearch-Button)
• Maintains accessibility with proper padding and minimum touch targets

[Mohit5Upadhyay]

Hi @devdattatalele 👋, thanks for working on this!

Modified src/css/custom.css with mobile-specific CSS rules

It looks like the PR currently shows no file changes, so the fix for the navbar overlap may not have been pushed to this branch yet. Could you please check and push the committed changes to update the PR?

This will help reviewers -- to review changes.