Improve Mobile Navbar Usability and Prevent Overflow Issues

[AK1007-2007]

The mobile navigation menu becomes difficult to use on smaller screens when expanding the "Tools" section. In some cases, important actions like Login/Signup/Logout move outside the visible viewport, affecting usability and navigation experience.

Tasks:

Improve scrolling behavior inside the mobile menu
Prevent dropdown content from overflowing off-screen
Ensure auth/navigation buttons remain accessible on small devices
Preserve current desktop layout and design
Maintain responsiveness across common mobile breakpoints

Suggested Areas:
frontend/src/components/shared/Navbar.jsx

Expected Outcome:
A smoother and fully accessible mobile navigation experience across all screen sizes without breaking the existing navbar structure.

[mdtauhid29]

Hi @AK1007-2007
This issue caught my attention and I'd love to contribute to it as part of GSSoC'26. In case it opens up or multiple contributors can work on it simultaneously, I'd be happy to jump in.

Thanks!

[Anusmita12]

Hi @kunalverma2512
I’d like to work on this issue as it focuses on improving mobile usability and overall user experience, which I’m really interested in contributing to. The issue seems well-scoped and impactful, and I’d love to take it up.

[kunalverma2512]

@Anusmita12 go ahead

Looking for your contribution

[kunalverma2512]

@Anusmita12 make sure you write what defficiencies currently it has and then work on it

comment those defficiences over here

[Anusmita12]

Tested the mobile navbar on smaller viewports and found a few issues that still need improvement:

• The current max-height setup doesn’t fully handle mobile browser address bar behavior properly, especially on smaller devices.
• It’s not very obvious that the expanded menu is scrollable on compact screens like iPhone SE widths.
• The nested “Contest Arsenal” section adds too much horizontal padding, which makes the content feel cramped on narrow screens.
• Some tool descriptions get squeezed on ~360px widths because of fixed spacing/padding.
• The Logout section seems to be missing its bottom border styling compared to the rest of the menu.
• On iOS/mobile devices, the background page can still scroll while the navbar menu is open.

I’ll work on cleaning these up while keeping the current desktop layout and overall navbar design unchanged.
@kunalverma2512

[kunalverma2512]

@Anusmita12 could you provide screenshot for current UI and then tell where things are lacking

[Anusmita12]

I had already implemented the fixes locally before opening the PR, so I don’t have exact all the before screenshots available right now. I’ve included a responsive testing video in the PR for reference.The issue was mainly noticeable on smaller mobile viewports when expanding the navbar/tools section, which affected scrolling, spacing, and accessibility of auth actions. @kunalverma2512

[kunalverma2512]

I had already implemented the fixes locally before opening the PR, so I don’t have exact all the before screenshots available right now. I’ve included a responsive testing video in the PR for reference.The issue was mainly noticeable on smaller mobile viewports when expanding the navbar/tools section, which affected scrolling, spacing, and accessibility of auth actions. @kunalverma2512

@Anusmita12 you can run project in new branch to know where navbar lacks so that you can get UI of navbar before your changes

[kunalverma2512]

@Anusmita12 its mandatory to show before and after with full reasoning

[kunalverma2512]

also try to attach your pr link here in issues comments as well so as to keep flexibility in jumping to other pages @Anusmita12

[Anusmita12]

Before:
https://github.com/user-attachments/assets/2e8d860a-1512-428c-9f30-e39a9e09265c

After:
https://github.com/user-attachments/assets/71ef2449-be80-4156-91e9-9a1d7425280b
On smaller mobile viewports, expanding the “Tools” section increases the navbar height significantly and pushes Login/Signup actions much further down the screen, affecting scrolling and accessibility. The PR improves mobile scrolling behavior, spacing, overflow handling, and keeps the desktop layout unchanged. @kunalverma2512
PR link: #87