root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashboard): mobile quick-chat panel layout under iOS keyboard

Browse Source 
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>
This commit is contained in:
gsxdsm
2026-04-30 21:27:10 -07:00
parent 40620a9a50
commit 13ed470f9f
3 changed files with 81 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/quick-chat-mobile-keyboard.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@runfusion/fusion": patch
---
Fix the mobile QuickChat panel layout when the iOS keyboard opens. The panel now stays anchored to the visible viewport (no off-screen drift on a refocus after the keyboard was dismissed), the soft keyboard reliably comes up the moment the FAB is tapped (a stealth input claims focus inside the user gesture so iOS opens the keyboard even before the real composer is enabled), the panel snaps back to full height immediately on blur instead of trailing the keyboard slide-down, and the model name in the header pill collapses to a provider icon when it would otherwise overflow.