fix(chat): adapt input bar to soft keyboard in FB in-app browser

FB IAB on Xiaomi (and similar WebViews that don't shrink 100dvh) keeps the chat input covered by the soft keyboard. Fix by writing the visualViewport-derived keyboard height to a CSS variable on <html> and consuming it as padding-bottom on the chat input bar. - Add useKeyboardHeight hook (visualViewport + rAF batching, no re-renders) - Apply --keyboard-height + env(safe-area-inset-bottom) to .bar padding - Add scrollIntoView on textarea focus so the input stays visible - Add viewportFit: cover so safe-area-inset-bottom is reported
2026-06-24 14:13:01 +08:00
parent 42c03f8901
commit 853ae776f9
6 changed files with 109 additions and 4 deletions
@@ -32,6 +32,10 @@ export const metadata: Metadata = {
 export const viewport: Viewport = {
  // 浏览器顶栏 / Android PWA 顶栏颜色
  themeColor: "#f84d96",
+  // 让页面延伸到 notch / home indicator 区域，
+  // env(safe-area-inset-bottom) 才能取到非零值（见 chat-input-bar.module.css）。
+  // Next.js 16 的 Viewport 类型未列出此键，但 generate-viewport.md 允许附加原始 meta 值。
+  viewportFit: "cover",
 };

 export default function RootLayout({