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

fix(dashboard): keep mobile chat input anchored under iOS keyboard

Browse Source 
Suppress iOS auto-scroll-into-view on the chat textarea and lock body
overflow while the keyboard is open so visualViewport.offsetTop stays
zero and the composer remains pinned above the keyboard.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-05-01 07:33:11 -07:00
parent 23134cf14d
commit bdf91f8fd6
2 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,5 @@
---
"@runfusion/fusion": patch
---
Fix mobile chat view layout when the iOS keyboard is up so the message input stays anchored above the keyboard instead of being pushed to the top of the screen.

6
packages/dashboard/app/components/ChatView.tsx
View File

@@ -834,20 +834,18 @@ export function ChatView({ projectId, addToast }: ChatViewProps) {
}, [keyboardOverlap]); }, [keyboardOverlap]);
// Lock body scroll on mobile while the keyboard is up so iOS can't shift // Lock body scroll on mobile while the keyboard is up so iOS can't shift
// the visual viewport (offsetTop > 0) and push the input off the top. // the visual viewport (offsetTop > 0). Avoid forcing window.scrollTo(0, 0),
// which can jump the page when send briefly toggles focus.
useEffect(() => { useEffect(() => {
if (!isMobile || !keyboardOpen) return; if (!isMobile || !keyboardOpen) return;
const scrollY = window.scrollY;
const html = document.documentElement; const html = document.documentElement;
const body = document.body; const body = document.body;
const prev = { htmlOverflow: html.style.overflow, bodyOverflow: body.style.overflow }; const prev = { htmlOverflow: html.style.overflow, bodyOverflow: body.style.overflow };
window.scrollTo(0, 0);
html.style.overflow = "hidden"; html.style.overflow = "hidden";
body.style.overflow = "hidden"; body.style.overflow = "hidden";
return () => { return () => {
html.style.overflow = prev.htmlOverflow; html.style.overflow = prev.htmlOverflow;
body.style.overflow = prev.bodyOverflow; body.style.overflow = prev.bodyOverflow;
window.scrollTo(0, scrollY);
}; };
}, [isMobile, keyboardOpen]); }, [isMobile, keyboardOpen]);