Root-cause tooling for the mobile white screen: the app had no error boundary anywhere, so any throw in the dashboard unmounted the entire tree and left a blank page. Other routes kept working because a fresh load re-mounted them, and navigating back to / blanked it again — exactly the reported behavior. AppErrorBoundary now renders the error name, message, stack, URL and user agent with Reload / Copy details buttons, so the actual failure is readable on the phone.
Responsive fixes (visible clipping on the right edge in mobile emulation): 100vw → 100%, 100dvh for the chat shell so mobile URL bars can't push the input row off screen, min-width: 0 on flex children so the attach / model / textarea / send row shrinks instead of overflowing, safe-area insets on header, drawer and input area, and message bubbles now wrap long tokens (overflow-wrap: anywhere, max-width on pre/img/table).
Mobile drawer (from the earlier commit): fixed sheet with overlay, explicit close control, and an empty-state message.
Perf: particle canvas pauses while the tab is hidden, honors prefers-reduced-motion, caps particle count (O(n²) link pass), and re-seeds only on real size changes. Chat auto-scroll now runs on message change instead of every render.
Test plan
Phone browser: sign in, land on / — either the chat renders, or the error card shows the real exception (paste it into #59)
Phone browser: no horizontal scroll; attach, model select, textarea and send all visible in one row
Phone browser: keyboard open — input row stays reachable
Conversations drawer: open, close via X and overlay, empty-state copy when no conversations
Long code block / long unbroken string in a reply stays inside the bubble
Desktop: sidebar, chat and input unchanged; background animation still runs
Background the tab, return — animation resumes
Notes
The white screen could not be reproduced in desktop mobile emulation (screenshot renders fine), so this ships the boundary as the diagnostic path rather than guessing at the throwing call site. Worth landing before the Capacitor Android wrap, since the same blank-screen failure mode would be much harder to inspect inside a WebView.
## Summary
- Closes #59
- **Root-cause tooling for the mobile white screen:** the app had **no error boundary anywhere**, so any throw in the dashboard unmounted the entire tree and left a blank page. Other routes kept working because a fresh load re-mounted them, and navigating back to `/` blanked it again — exactly the reported behavior. `AppErrorBoundary` now renders the error name, message, stack, URL and user agent with Reload / Copy details buttons, so the actual failure is readable **on the phone**.
- **Responsive fixes** (visible clipping on the right edge in mobile emulation): `100vw` → `100%`, `100dvh` for the chat shell so mobile URL bars can't push the input row off screen, `min-width: 0` on flex children so the attach / model / textarea / send row shrinks instead of overflowing, safe-area insets on header, drawer and input area, and message bubbles now wrap long tokens (`overflow-wrap: anywhere`, `max-width` on `pre`/`img`/`table`).
- **Mobile drawer** (from the earlier commit): fixed sheet with overlay, explicit close control, and an empty-state message.
- **Perf:** particle canvas pauses while the tab is hidden, honors `prefers-reduced-motion`, caps particle count (O(n²) link pass), and re-seeds only on real size changes. Chat auto-scroll now runs on message change instead of every render.
## Test plan
- [ ] Phone browser: sign in, land on `/` — either the chat renders, or the error card shows the real exception (paste it into #59)
- [ ] Phone browser: no horizontal scroll; attach, model select, textarea and send all visible in one row
- [ ] Phone browser: keyboard open — input row stays reachable
- [ ] Conversations drawer: open, close via X and overlay, empty-state copy when no conversations
- [ ] Long code block / long unbroken string in a reply stays inside the bubble
- [ ] Desktop: sidebar, chat and input unchanged; background animation still runs
- [ ] Background the tab, return — animation resumes
## Notes
The white screen could not be reproduced in desktop mobile emulation (screenshot renders fine), so this ships the boundary as the diagnostic path rather than guessing at the throwing call site. Worth landing before the Capacitor Android wrap, since the same blank-screen failure mode would be much harder to inspect inside a WebView.
Make the dashboard sidebar a clearer fixed sheet on small screens with an explicit close control and empty-list guidance so it is less likely to look like a blank page.
westfarn
changed title from Improve mobile conversation drawer layering and empty state (#59) to Mobile chat UX: error boundary + viewport-safe responsive layout (#59)2026-07-29 05:34:42 -07:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Summary
/blanked it again — exactly the reported behavior.AppErrorBoundarynow renders the error name, message, stack, URL and user agent with Reload / Copy details buttons, so the actual failure is readable on the phone.100vw→100%,100dvhfor the chat shell so mobile URL bars can't push the input row off screen,min-width: 0on flex children so the attach / model / textarea / send row shrinks instead of overflowing, safe-area insets on header, drawer and input area, and message bubbles now wrap long tokens (overflow-wrap: anywhere,max-widthonpre/img/table).prefers-reduced-motion, caps particle count (O(n²) link pass), and re-seeds only on real size changes. Chat auto-scroll now runs on message change instead of every render.Test plan
/— either the chat renders, or the error card shows the real exception (paste it into #59)Notes
The white screen could not be reproduced in desktop mobile emulation (screenshot renders fine), so this ships the boundary as the diagnostic path rather than guessing at the throwing call site. Worth landing before the Capacitor Android wrap, since the same blank-screen failure mode would be much harder to inspect inside a WebView.
Improve mobile conversation drawer layering and empty state (#59)to Mobile chat UX: error boundary + viewport-safe responsive layout (#59)