← Back to PRs

#6521: fix: addressed style issue for chat compose and thread on mobile

by spencer-rafada open 2026-02-01 19:05 View on GitHub →
app: web-ui
## Bug Fixes #6412 and main thread from overflowing ## Fix - added `.chat-main` class selector in sidebar to avoid chat thread overflow - added styles for `.chat-compose__row` and `.chat-compose__actions` for mobile layout so the message button is on a single row and readable ## Testing - Fully Tested with Gateway Connection on different screens and responsiveness <img width="632" height="934" alt="image" src="https://github.com/user-attachments/assets/46cd678f-6c38-4663-ae68-0a23783db853" /> ## AI-Assisted - [x] Mark as AI-assisted in the PR title or description - Utilized Claude Code and Opus - [x] Confirm you understand what the code does <!-- greptile_comment --> <h2>Greptile Overview</h2> <h3>Greptile Summary</h3> This PR adjusts mobile chat layout styles to prevent overflow in the split-view chat UI and improve the compose area layout on small screens. - `ui/src/styles/chat/sidebar.css` adds a mobile (≤768px) override to allow `.chat-main` to shrink (`min-width: 0`), which helps prevent overflow when the sidebar/split layout is present. - `ui/src/styles/layout.mobile.css` updates the compose row on small screens (≤600px) to stack textarea + actions vertically and align the action buttons to the end, keeping the send button readable and avoiding wrap/overflow. These changes build on the existing chat layout in `ui/src/styles/chat/layout.css` and the `.chat-main` split container logic in `ui/src/ui/views/chat.ts`. <h3>Confidence Score: 5/5</h3> - This PR is safe to merge with minimal risk. - The change is limited to small, scoped CSS overrides that align with established flexbox patterns (min-width: 0 for flex children and mobile stacking). No JS/TS logic changes, and selectors match existing DOM structure (`chat.ts`) and base styles (`chat/layout.css`). - No files require special attention <!-- greptile_other_comments_section --> <sub>(2/5) Greptile learns from your feedback when you react with thumbs up/down!</sub> **Context used:** - Context from `dashboard` - CLAUDE.md ([source](https://app.greptile.com/review/custom-context?memory=fd949e91-5c3a-4ab5-90a1-cbe184fd6ce8)) - Context from `dashboard` - AGENTS.md ([source](https://app.greptile.com/review/custom-context?memory=0d0c8278-ef8e-4d6c-ab21-f5527e322f13)) <!-- /greptile_comment -->

Most Similar PRs