#6521: fix: addressed style issue for chat compose and thread on mobile
app: web-ui
Cluster:
Web UI Enhancements and Fixes
## 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
#11167: style(chat): UI: add mobile layout for chat compose actions
by junyiz · 2026-02-07
89.2%
#16593: fix: mobile compose row layout
by alewcock · 2026-02-14
84.2%
#9122: fix(webchat): constrain .chat-new-messages to button size
by ridermw · 2026-02-04
82.6%
#9411: Fix: Web UI long message overflow causing unreadable text
by vishaltandale00 · 2026-02-05
81.3%
#3721: fix(ui): webchat not displaying chat responses
by maxmaxrouge-rgb · 2026-01-29
80.5%
#7316: fix: /chat dashboard performance
by felipcsousa · 2026-02-02
80.1%
#9432: fix(ui): improve Firefox/Gecko compatibility for chat layout
by dbottme · 2026-02-05
79.9%
#9175: Fix: Constrain webchat 'New messages' icon size to prevent massive ...
by vishaltandale00 · 2026-02-04
79.2%
#2716: Fix #2678: markdown horizontal rules not rendering in web chat
by Ambar-13 · 2026-01-27
79.2%
#15204: fix(ui): preserve angle-bracketed text in chat
by bufordtjustice2918 · 2026-02-13
78.5%