Spaced Out search and mode icon

[cherylpinto]

Fix: Navbar icon overlap in mobile view

Description

This PR resolves an issue where the search icon and the mode toggle button (light/dark switch) overlapped in the navbar on smaller screens.
The overlap made it difficult for users to interact with either element, affecting the overall usability of the navigation bar.

Changes Made

• Adjusted spacing between the search icon and mode toggle button.
• Updated mobile view styling to ensure proper alignment without overlap.
• Ensured responsiveness across different screen sizes so that the layout remains consistent.

Expected Behavior

• Both the search icon and the mode toggle button are clearly visible and spaced apart.
• On smaller screens, the elements align properly without overlapping.
• The navigation bar maintains a clean and responsive layout across devices.

Screenshots

Before

After

Fixes #434

Type of Change

• New feature (e.g., new page, component, or functionality)
• Bug fix (non-breaking change that fixes an issue)
• UI/UX improvement (design, layout, or styling updates)
• Performance optimization (e.g., code splitting, caching)
• Documentation update (README, contribution guidelines, etc.)
• Other (please specify):

Checklist

• My code follows the style guidelines of this project.
• I have tested my changes across major browsers/devices
• My changes do not generate new console warnings or errors , I ran npm run build and attached scrrenshot in this PR.
• This is already assigned Issue to me, not an unassigned issue.

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs.

In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Your perks for contribution to this community 👇🏻

1. Get free Consultation use code recode50 to get free: Mentorship for free.

2. Get the Ebook for free use code recode at checkout: Data Science cheatsheet for Beginners.

3. Check out this weekly Newsletter: Sanjay's Newsletter.

If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[vercel]

@cherylpinto is attempting to deploy a commit to the recode Team on Vercel.

A member of the Team first needs to authorize it.

[Copilot]

Pull Request Overview

This PR fixes the navbar layout issue where the search icon and mode toggle button overlapped on mobile screens, improving navigation usability on smaller devices.

• Added responsive CSS styling for mobile screens (max-width: 768px)
• Implemented proper spacing between navbar elements using flexbox and gap properties
• Ensured consistent alignment and prevented element shrinkage

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

The margin-right: 30px on DocSearch-Button conflicts with the gap: 20px already applied to the parent container. This creates inconsistent spacing (50px total between search and toggle). Consider removing margin-right and relying solely on the gap property for consistent spacing.

Suggested change

	margin-right: 30px;
	}
	}

[iitzIrFan]

Thanks for this fix @cherylpinto
@sanjay-kv Ready to merge.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
recode-website	Ready	Preview	Comment	Aug 26, 2025 8:25am

[cherylpinto]

Hi @sanjay-kv I noticed you didn't add Gssoc and Labels to this PR, It would be really nice if you could do so. Thanks.

[cherylpinto]

@iitzIrFan @sanjay-kv Requesting you to please consider my request.