fix(navbar): resolve element overlap on medium and small screen widths

[Akanksha-Shahi]

🛑 STOP: Assignment & File Scope Check

• I am assigned to this issue.
• I verified that this PR ONLY touches the required files.

Warning

PRs with unrelated files will not be reviewed and may be closed.

📋 PR Summary & Link

• Closes [UI/UX] Fix Navigation Bar Element Overlap on Medium and Small Screen Widths #1814
• Summary: Fixed navbar element overlap on medium and small screen widths by adding overflow-hidden to the main container, replacing flex-1 with shrink-0 on the logo and right controls sections to prevent them from stretching and colliding between sm and lg breakpoints.

📸 Proof of Work (Screenshots / Logs)

Important

No Pull Request will be merged without proof of testing!

• Frontend/UI changes: You MUST attach screenshots or screen recordings (GIFs/Videos) showing the UI changes.

Please drag & drop your screenshots/GIFs here:

🏷️ PR Type

• 🐛 type: bug
• ✨ type: feature
• 📖 type: docs
• 🧪 type: testing
• 🔒 type: security
• ⚡ type: performance
• 🎨 type: design
• ♻️ type: refactor
• 🛠️ type: devops
• ♿ type: accessibility

✅ Checklist

• My PR has a linked issue (Closes #1814)
• I have pulled the latest main and resolved any conflicts

[Akanksha-Shahi]

Hi, I have implemented this fix as part of PR #1885 which addresses
all three navbar issues (#1814, #1816, #1833) in the same Navbar.tsx
file. Please let me know if you'd like separate PRs for each issue.

[dipexplorer]

@Akanksha-Shahi, while adding the active states to the menu items, a few critical copy-paste errors slipped in that break the UI:

1. Missing Content: /alerts link inner content ( {tNav("alerts")}) was completely deleted, making the link empty and invisible.
2. Incorrect Active States: u copy-pasted isActive("/how-it-works") into the className of almost every single link (/alerts, /map, /reports/me, etc.) means all links will wrongly highlight themselves as active whenever the user visits the /how-it-works page! u need to change the string to match the respective route (e.g., isActive("/alerts") for the alerts link).

correct these mistakes & updates to this branch.

[github-actions]

Merge conflict detected.

@Akanksha-Shahi, please resolve the conflicts locally and update your branch within 12 hours. If unresolved, this PR will be closed.

[github-actions]

🎉 Congratulations @Akanksha-Shahi! Your Pull Request "fix(navbar): resolve element overlap on medium and small screen widths" has been successfully merged by @dipexplorer.

Thank you for your valuable contribution to SahiDawa! 🇮🇳
If this was for GSSoC 2026, your work is officially merged and valid. Keep up the great work and feel free to claim other open issues. 🚀

Follow us on LinkedIn: https://www.linkedin.com/company/ratloopz/ to get shoutout