fix: sync iOS keyboard viewport updates (#341)

Author: Just-Insane

.changeset/fix-ios-keyboard-space.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Keep the mobile composer aligned to the live iOS keyboard height when switching keyboard modes.

src/app/hooks/ios-keyboard-fix/useKeyboardHeight.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest';
+
+import { getImmediateVisibleViewportHeight } from './useKeyboardHeight';
+
+describe('getImmediateVisibleViewportHeight', () => {
+  it('uses the saved keyboard height estimate on the first open', () => {
+    expect(getImmediateVisibleViewportHeight(900, 640, 280, false)).toBe(620);
+  });
+
+  it('falls back to the live viewport height when there is no saved estimate', () => {
+    expect(getImmediateVisibleViewportHeight(900, 640, 0, false)).toBe(640);
+  });
+
+  it('tracks the live viewport height once the keyboard CSS vars are active', () => {
+    expect(getImmediateVisibleViewportHeight(900, 700, 280, true)).toBe(700);
+  });
+});

src/app/hooks/ios-keyboard-fix/useKeyboardHeight.ts

@@ -38,6 +38,16 @@ let mountCount = 0;
 // across instances.
 let cssVarsApplied = false;
 
+export const getImmediateVisibleViewportHeight = (
+  baselineHeight: number,
+  viewportHeight: number,
+  savedKeyboardHeight: number,
+  varsAlreadyApplied: boolean
+): number => {
+  if (varsAlreadyApplied) return viewportHeight;
+  return savedKeyboardHeight > 0 ? baselineHeight - savedKeyboardHeight : viewportHeight;
+};
+
 function isEditableElement(element: Element | null): boolean {
   if (!(element instanceof HTMLElement)) return false;
 
@@ -131,11 +141,17 @@ export function useKeyboardHeight() {
       // immediate and stability-timer setCSSVars calls land on the same pixel
       // value — eliminating the second layout change that causes visible
       // timeline stutter during the keyboard animation.
-      if (!cssVarsApplied) {
-        const estimatedViewportHeight =
-          sharedSavedHeight > 0 ? baselineHeight - sharedSavedHeight : viewport.height;
-        setCSSVars(estimatedViewportHeight);
-      }
+      // Keep the CSS height pinned to the live viewport on every keyboard-mode
+      // resize. The React state still waits for a stable value, but the layout
+      // should not lag behind when iOS swaps between text and emoji keyboards.
+      setCSSVars(
+        getImmediateVisibleViewportHeight(
+          baselineHeight,
+          viewport.height,
+          sharedSavedHeight,
+          cssVarsApplied
+        )
+      );
 
       // Cancel any document scroll iOS may have applied as scroll-prediction.
       if (window.scrollY !== 0) {