13ed470f9f
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>
26 KiB
26 KiB