Fix mobile responsive view issues

[Copilot]

This PR fixes several mobile responsive design issues that were causing layout problems on small screens:

Issues Fixed

1. Avatar Circle Text Overflow

The user and bot avatar circles displayed text that was too large (16px) causing it to wrap to multiple lines or overflow the circle boundaries.

Before: Text would wrap or overflow in avatar circles
After: Reduced font size to 12px and circle size to 28px for clean single-line display

2. Logo Overlapping Toolbar Buttons

The QueryWeaver logo (60px height) was overlapping with the top toolbar buttons (theme toggle, GitHub link) on mobile devices.

Before: Logo would cover toolbar buttons making them inaccessible
After: Reduced logo height to 40px on mobile screens to prevent overlap

3. Header Text Not Fitting Screen

The header text "Natural Language to SQL Generator" was too large for mobile screens and would wrap to multiple lines.

Before: Header text wrapped across multiple lines
After: Reduced font size from 18px to 16px for better mobile fitting

4. Button Container Elements Too Wide

The three dropdown boxes (Select Database, Upload Schema, Select Database Type) had minimum widths of 180px each, making them too wide for mobile screens.

Before: Dropdown elements would overflow screen width or force horizontal scrolling
After:

• Reduced min-width from 180px to 100px
• Reduced padding and font size for better space utilization
• Hidden vertical separators on mobile to save space
• Added flex-wrap to button container for better responsiveness

Technical Changes

All fixes were implemented in api/static/css/responsive.css using targeted mobile media queries (@media (max-width: 768px)) to ensure desktop layouts remain unchanged.

Testing

• ✅ Verified on mobile viewport (375px width)
• ✅ Verified on small mobile (320px width)
• ✅ Verified on tablet (768px width)
• ✅ Confirmed desktop layout unchanged (1200px width)
• ✅ All unit tests passing

Fixes #66.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
queryweaver	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 10, 2025 2:03pm