feat(chat): responsive one-pane-at-a-time layout on phones - #495
Open
bambinounos wants to merge 3 commits into
Open
feat(chat): responsive one-pane-at-a-time layout on phones#495bambinounos wants to merge 3 commits into
bambinounos wants to merge 3 commits into
Conversation
On Android (PWA/TWA), 100vh includes the area behind the system bars, so the bottom row — message textarea and send button — rendered half off screen. Use 100dvh where supported, keeping h-screen as the fallback. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Below md (768px) the contact list and the conversation alternate as full width views driven by the existing /chat/:contactId route (Android back gesture works via router history). Adds a back button in the chat header and turns the notes/contact-info side panels into full-screen overlays. Desktop layout (>=768px) is unchanged. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The composer's intrinsic width (textarea default ~20ch + four fixed buttons) exceeded a phone screen, and flex min-width:auto kept the flex-1 chat panel from shrinking below it — bubbles (65% of the oversized panel) and the send button rendered past the right edge. min-w-0 on the panel and the textarea restores shrinking; shrink-0 keeps the send button at full size. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
ChatViewis a fixed three-pane desktop layout: a 320px contact list (w-80) plus the conversation pane. On a phone (~360-400px) the panes can't fit side by side, and the conversation pane can't even shrink to the viewport (the composer's intrinsic width — textarea default size + four fixed buttons — exceeds a phone screen because of flexbox'smin-width: auto), so message bubbles and the send button render past the right edge. The app is effectively unusable on mobile, which matters now that agents open it from a phone (PWA or browser).Fix (template-only, desktop unchanged)
One pane at a time below
md(768px), driven by the existing/chat/:contactIdroute:w-full md:w-80, hidden while a chat is open (hidden md:flex). Full-screen list on phones.min-w-0so it can actually shrink to the viewport (also on the textarea;shrink-0on the send button).md:hidden,ArrowLeft) in the chat header →router.push('/chat'), which the existing route watcher already handles. Since chat selection is route-based, Android's back gesture works for free.max-md:fixed max-md:inset-0 max-md:z-50 max-md:!w-full); both already have close buttons.h-screen→100dvhwhere supported (supports-[height:100dvh]:h-dvh) — on Android,100vhincludes the area behind the system bars, cutting off the composer's bottom half.At
>=768pxthe conditional classes reproduce today's classes exactly — desktop is pixel-identical.Testing