feat: implement mobile responsiveness for UI

[rajanarahul93]

feat: Implement mobile responsiveness

Summary

This pull request introduces comprehensive mobile responsiveness to the user interface. It adapts the layout for tablet and mobile screen sizes, ensuring all components are accessible and usable on smaller devices.

Root cause

The application was designed with a fixed-width layout suitable for desktop browsers. It lacked the necessary CSS media queries to adjust the layout for smaller viewports, leading to overflow and usability issues on mobile.

Changes

• Replaced the minimal media query with a robust one targeting screens up to 768px wide.
• Made the main chat container a full-height (100vh) flex container to utilize all available screen space.
• Adjusted the #chat-window to grow dynamically, filling the area between the header and input box.
• Modified the header controls to wrap cleanly with appropriate spacing.
• Resized the side panels to 90vw to prevent them from overflowing the screen.

Screenshots / Logs

Before: (Desktop layout on a mobile screen)

After: (Responsive layout on the same screen)

Testing

1. Opened index.html in a local browser.
2. Used browser developer tools to simulate various mobile devices (e.g., iPhone 12, Pixel 5).
3. Confirmed the layout adjusted correctly, with no horizontal scrollbars or overflowing elements.
4. Verified that side panels opened correctly and were usable.

• Expected: The UI is fluid and easy to navigate.
• Actual: The UI rendered as expected on all tested devices.

Related

• Closes Implement Mobile Responsiveness #26