[Feature]: Collapse chat input box on mobile when not focused

[chirino]

Before submitting

• I searched existing issues and did not find a duplicate.
• I am describing a concrete problem or use case, not just a vague idea.

Area

apps/web

Problem or use case

On mobile/narrow viewports (< 640px), the chat composer input box takes up significant vertical space even when the user is not actively typing. The full editor area, model picker, interaction mode buttons, and other toolbar controls are always visible, reducing the amount of screen real estate available for reading the conversation.

Proposed solution

• When the composer is not focused on mobile viewports, collapse it to a single compact row showing:
  • The current prompt text (truncated with ellipsis) or an "Ask anything..." placeholder
  • A send button
• Hide the following elements in the collapsed state:
  • The full Lexical text editor
  • The model/provider picker and all toolbar controls (Chat/Plan mode, Full access/Supervised, Plan sidebar toggle)
  • Image attachments preview
  • Approval/pending input panels
• When the user taps the collapsed input, expand it to the full composer with the editor focused.
• When focus leaves the composer entirely, collapse it back down.
• Desktop/wide-screen behavior remains completely unchanged.

Why this matters

• Mobile screens have limited vertical space; the full composer with toolbar occupies a disproportionate amount of it.
• Most of the time, users are reading the conversation — the full editor controls are only needed when composing a message.
• This pattern is consistent with how most mobile chat apps behave (e.g., iMessage, WhatsApp, Slack).

Smallest useful scope

• Apply only on viewports below the sm breakpoint (< 640px).
• Only affect the visual collapse — no changes to data flow or state management.

Alternatives considered

• CSS-only approach using focus-within — rejected because the editor needs to be fully hidden (not just resized) to prevent the Lexical placeholder from rendering through overflow.

Risks or tradeoffs

• Users may not immediately realize the collapsed bar is tappable, mitigated by showing the placeholder text and send button.
• Any prompt text typed and then blurred will appear truncated in the collapsed view, but the full text is preserved and shown on re-focus.

Examples or references

Standard mobile chat app UX (iMessage, WhatsApp, Slack) where the input bar is compact until tapped.

Contribution

• I would be open to helping implement this.