🐛 Navbar icons overlap (search icon) on mobile view

[Mohit5Upadhyay]

Description

In mobile view, the nav bar shows an issue where the Search icons overlap over the Github Icon. This results in a slightly cluttered UI and could affect usability.

Steps to Reproduce

1. Open https://docs.coderabbit.ai/ on a mobile device or in responsive view (DevTools).
2. Observe the navbar at the top-right.
3. The Search icon overlapping over the github icon .

Issue

nav-bar-overlap-issue.mp4

[linear]

ENG-2065 🐛 Navbar icons overlap (search icon) on mobile view

[traycerai]

Plan

Observations

I analyzed the CodeRabbit documentation site and identified the navbar icon overlap issue on mobile. The site uses Docusaurus with an Inkeep search plugin that adds a search icon to the navbar. The current CSS has some mobile-specific styles but lacks proper responsive handling for the search icon placement, causing it to overlap with the GitHub icon on mobile devices. The navbar configuration shows Discord and GitHub icons positioned on the right, and the Inkeep plugin likely injects its search icon in the same area without proper spacing considerations.

Approach

I'll fix the navbar icon overlap issue by adding targeted CSS rules for mobile devices. The solution involves:

1. Adding responsive spacing for navbar icons on mobile to prevent overlap
2. Improving the mobile layout of the right-side navbar items container
3. Adding specific styles for the Inkeep search component to ensure proper positioning
4. Cleaning up duplicate CSS rules that exist in the current stylesheet
5. Testing different mobile breakpoints to ensure icons have adequate spacing

The fix will be implemented entirely through CSS modifications without requiring component swizzling or major structural changes.

Reasoning

I examined the repository structure and identified this as a Docusaurus documentation site. I read the main configuration file to understand the navbar setup and discovered the Inkeep search plugin integration. I analyzed the custom CSS file and found existing mobile styles but noticed they don't address the search icon overlap issue. I also found duplicate CSS rules that need cleanup. Based on the GitHub issue description and my analysis, I determined the root cause is insufficient responsive styling for the navbar icons container on mobile devices.

Proposed File Changes

📄 src/css/custom.css ^(MODIFY) 🔗

I'll fix the navbar icon overlap issue on mobile by:

1. Removing duplicate CSS rules - Lines 121-151 are duplicates of lines 65-95, so I'll remove the duplicates

2. Adding proper mobile spacing for navbar icons - Add specific CSS rules to ensure adequate spacing between search icon, Discord icon, and GitHub icon on mobile devices

3. Improving the right navbar container layout - Enhance the .navbar__items.navbar__items--right styles to better handle multiple icons on mobile

4. Adding Inkeep search component styles - Add targeted styles for the Inkeep search component to prevent it from overlapping with other navbar icons

5. Adding responsive breakpoints - Include additional mobile breakpoints (480px, 768px) to ensure proper spacing across different mobile screen sizes

The specific changes include:

• Remove duplicate mobile CSS rules (lines 121-151)
• Add .navbar__items--right responsive styles with proper gap and flex properties
• Add Inkeep search component specific styles with proper margins
• Add media queries for different mobile breakpoints to ensure icons don't overlap
• Ensure proper z-index and positioning for overlapping elements

Import In IDE

🤖 Prompt for AI Agents

I have created the following plan after thorough exploration and analysis of the codebase. Follow the below plan verbatim. Trust the files and references. Do not re-verify what's written in the plan. Explore only when absolutely necessary. First implement all the proposed file changes and then I'll review all the changes together at the end.

### Observations

I analyzed the CodeRabbit documentation site and identified the navbar icon overlap issue on mobile. The site uses Docusaurus with an Inkeep search plugin that adds a search icon to the navbar. The current CSS has some mobile-specific styles but lacks proper responsive handling for the search icon placement, causing it to overlap with the GitHub icon on mobile devices. The navbar configuration shows Discord and GitHub icons positioned on the right, and the Inkeep plugin likely injects its search icon in the same area without proper spacing considerations.

### Approach

I'll fix the navbar icon overlap issue by adding targeted CSS rules for mobile devices. The solution involves:

1. **Adding responsive spacing** for navbar icons on mobile to prevent overlap
2. **Improving the mobile layout** of the right-side navbar items container
3. **Adding specific styles** for the Inkeep search component to ensure proper positioning
4. **Cleaning up duplicate CSS** rules that exist in the current stylesheet
5. **Testing different mobile breakpoints** to ensure icons have adequate spacing

The fix will be implemented entirely through CSS modifications without requiring component swizzling or major structural changes.

### Reasoning

I examined the repository structure and identified this as a Docusaurus documentation site. I read the main configuration file to understand the navbar setup and discovered the Inkeep search plugin integration. I analyzed the custom CSS file and found existing mobile styles but noticed they don't address the search icon overlap issue. I also found duplicate CSS rules that need cleanup. Based on the GitHub issue description and my analysis, I determined the root cause is insufficient responsive styling for the navbar icons container on mobile devices.

## Proposed File Changes

### src/css/custom.css(MODIFY)

I'll fix the navbar icon overlap issue on mobile by:

1. **Removing duplicate CSS rules** - Lines 121-151 are duplicates of lines 65-95, so I'll remove the duplicates

2. **Adding proper mobile spacing for navbar icons** - Add specific CSS rules to ensure adequate spacing between search icon, Discord icon, and GitHub icon on mobile devices

3. **Improving the right navbar container layout** - Enhance the `.navbar__items.navbar__items--right` styles to better handle multiple icons on mobile

4. **Adding Inkeep search component styles** - Add targeted styles for the Inkeep search component to prevent it from overlapping with other navbar icons

5. **Adding responsive breakpoints** - Include additional mobile breakpoints (480px, 768px) to ensure proper spacing across different mobile screen sizes

The specific changes include:
- Remove duplicate mobile CSS rules (lines 121-151)
- Add `.navbar__items--right` responsive styles with proper gap and flex properties
- Add Inkeep search component specific styles with proper margins
- Add media queries for different mobile breakpoints to ensure icons don't overlap
- Ensure proper z-index and positioning for overlapping elements

---

Developer Humor

\n> 🔍 Why did the search icon break up with the GitHub icon?\n> Because they had no space in their relationship! 📱\n> But now with proper CSS margins,\n> They're living in harmony again! ✨\n> No more overlap drama in the navbar! 🎭\n

---

Execution Information

Branch: main
Commit: ee5a787

---

💡 Tips

Supported Commands (Inside Comments)

• Use @traycerai generate to iterate on the previous version of the implementation plan.

Supported Commands (Inside Description)

• Add @traycerai ignore anywhere in the ticket description to prevent this ticket from being processed.
• Add @traycerai branch:<branch-name> anywhere in the ticket description to specify the target branch for the implementation plan.

Community

• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[anubhav126]

Hi, I would like to work on this issue, kindly assign it to me,