collapse composer pills to icons on narrow screens#7269
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request improves the mobile responsiveness of the chat composer by collapsing pills to icons on narrow viewports using the useIsMobile hook, and updating CSS classes to allow wrapping. Feedback points out that the pill container in SharedComposer does not use the updated .unsloth-composer-left class or flex-wrap, which could cause layout overflow or clipping on mobile devices, and suggests applying the class there as well.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
|
@codex review |
|
Codex Review: Didn't find any major issues. Nice work! Reviewed commit: ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback". |
|
Manually confirmed before and after behaviour works as expected in Chrome DevTools. Nice work @NilayYadav. |
2 participants
On phones the composer's toolbar row was wider than the composer itself, so the Search and Code chips got cut off at the right edge. The compact icon-only pill mode already existed, but only kicked in when there were more than 4 pills. With the default 4 it never triggered, so phones got the full labelled row. Now narrow viewports collapse too.
The chip group goes from 374px to 138px, which leaves enough room for the mic and send buttons to sit on the same line the composer drops from three rows to one. Desktop is unchanged.
Also lets the group wrap instead of clipping, as a fallback: at exactly 768px the labelled row only has 18px of slack, so a longer translated label would overflow again.
Before:
After:
