fix: Mobile layout breaks on screens narrower than 375px

[param20h]

🐛 Bug

On very small screens (iPhone SE), the sidebar overlaps the chat panel and buttons are clipped.

Expected Behavior

• Sidebar should be hidden by default on mobile with a hamburger toggle
• Chat panel should take full width

Difficulty: 🟡 Medium

[krishsharma-code]

/assign

Hey @param20h! 👋

I would love to take up this responsive layout bug under GSSoC 2026. Ensuring the UI remains flawless on narrower breakpoints like the iPhone SE is highly essential for mobile user experience.

My Fix Strategy:

1. Responsive Hidden Sidebar: Utilize Tailwind CSS responsive breakpoints (hidden md:flex) or explicit CSS media queries to hide the sidebar component by default on viewport widths narrower than md triggers.
2. Hamburger Toggle Component: Introduce a lightweight, interactive hamburger menu icon button that cleanly toggles the sidebar drawer open/close state overlay on mobile views.
3. Fluid Chat Panel Width: Configure the chat viewport wrapper component to occupy full screen width (w-full) dynamically when screen boundaries drop below 375px.
4. Element Layout Auditing: Audit and optimize flex wrappers, spacing paddings, and absolute button constraints to eliminate any text or asset clipping under restricted bounds.

I am ready to debug and apply this fix cleanly right away. Please assign this task to me! 🚀

[Muskan-S123]

Hii @param20h I would like to contribute in this issue
/claim

[Bhavy12-cell]

Hi @param20h
Please assign me this issue.

[param20h]

@Muskan-S123 Assigned

[Muskan-S123]

Hi @param20h, I've submitted PR #498 with the fix. Since I was formally assigned this issue, please consider reviewing mine. Thank you