The mobile QuickChat panel was unusable on iOS Safari: the input bar
rendered off-screen, the soft keyboard often did not open on FAB tap,
the panel slid up out of view on the second input focus, and the
header pill overflowed when the model name was long.
- The FAB JSX no longer emits inline right/bottom styles on mobile,
and the mobile media query pins every edge with !important so the
panel cannot be dragged off-screen by the desktop draggable hook.
- Body scroll is locked while the panel is open via overflow:hidden
on <html> and <body>, and the document is reset to scroll 0 on
open. This prevents iOS from leaking residual scroll into the
fixed-positioned panel between opens.
- An always-mounted, offscreen stealth input claims the iOS soft
keyboard inside the FAB click gesture (the real composer input is
initially `disabled` waiting for the chat session, and iOS will
not open the keyboard for a disabled input). Focus is transferred
synchronously to the real input once it becomes enabled.
- The composer input intercepts touchstart on mobile and re-focuses
with `preventScroll: true`, suppressing iOS's default focus-and-
scroll behavior that was shifting visualViewport.offsetTop and
sliding the panel up off-screen on a refocus.
- A useLayoutEffect mirrors visualViewport.height onto the panel as
--vv-height directly via the DOM, bypassing React state to avoid
the per-event reconciliation lag that read as visual jank during
the keyboard slide-in. On blur, the variable is cleared and a
short suppress window (~450ms) prevents iOS's mid-dismiss reports
from clobbering the regrowth, so the panel snaps back to full
height immediately while the keyboard finishes sliding down on
top of it.
- The model-tag pill in the header collapses to the provider icon
when the tag would otherwise exceed ~12 characters on mobile.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
49e58f084b