[Bug] Navbar and Layout CSS Not Responsive on Mobile View

[MAYANKSHARMA01010]

Description

The CSS styling for the navbar and other layout components is not optimized for mobile devices. On smaller screen sizes (e.g., phone view), the navigation items overlap, spacing is inconsistent, and the overall layout breaks.

Steps to Reproduce

1. Open the project in a browser.
2. Switch to mobile view using browser DevTools or open the site on a phone.
3. Observe the navbar and layout styling.

Expected Behavior

On smaller screens, the navbar and layout should adapt using responsive CSS (media queries, flex adjustments, etc.), ensuring proper alignment and usability.

Actual Behavior

On smaller screens, the navbar items overflow or misalign, and other layout sections do not adjust correctly.

Screenshots / Media

Environment

• OS: macOS
• Browser: Arc Browser
• Application Version: Latest commit on main branch

Additional Context

I can fix this issue by improving responsive design with CSS media queries and layout adjustments.
Please assign this issue to me so I can start working on it.

[Harsh-26626]

@MAYANKSHARMA01010 , you've worked with optimising for mobile previously right?

Please make sure that the CSS file does not have unnecessary extra lines, (saying cuz someone in NotesVault wrote 2500+ lines for this and we had to revert everything)

[MAYANKSHARMA01010]

OKAY

[Gunjan10-droid]

@Harsh-26626 could you assign me this issue?

[MAYANKSHARMA01010]

@Harsh-26626 what happend to my PR i have to do further work

[abhi-the-dumb]

Hey I have open a PR for this issue, hope it is upto your mark.

Let me know if you need some changes