feat(FN-2661): add keyboard-aware mobile chat layouts

- Add a shared useMobileKeyboard hook that tracks visualViewport overlap on mobile browsers
- Apply keyboard overlap CSS variables to QuickChatFAB so fullscreen mobile panels resize above the virtual keyboard
- Apply the same keyboard-aware sizing to ChatView mobile thread layout and auto-scroll messages when keyboard opens
- Expand ChatView, QuickChatFAB, and hook test coverage for mobile keyboard detection and viewport-resize behavior
This commit is contained in:
Fusion
2026-04-27 01:22:28 -07:00
committed by gsxdsm
parent fca0fce605
commit 90a28dfe23
8 changed files with 715 additions and 6 deletions

View File

@@ -768,6 +768,11 @@
display: none;
}
.chat-thread[style*="--keyboard-overlap"] {
height: calc(var(--vv-height, calc(100dvh - var(--keyboard-overlap, 0px))) - var(--header-height));
max-height: calc(var(--vv-height, calc(100dvh - var(--keyboard-overlap, 0px))) - var(--header-height));
}
/* On mobile, the "New Chat" affordance moves to a full-width pinned
footer. The desktop top-header button is hidden to free the screen
space for the search field and session list. */