diff --git a/src/app/chat/hooks/__tests__/chat-keyboard-geometry.test.ts b/src/app/chat/hooks/__tests__/chat-keyboard-geometry.test.ts index cc746e55..99e82a28 100644 --- a/src/app/chat/hooks/__tests__/chat-keyboard-geometry.test.ts +++ b/src/app/chat/hooks/__tests__/chat-keyboard-geometry.test.ts @@ -84,27 +84,36 @@ describe("resolveChatKeyboardInset", () => { describe("resolveChatKeyboardFallbackInset", () => { it.each([ - [{ layoutWidth: 320, layoutHeight: 568 }, 256], - [{ layoutWidth: 360, layoutHeight: 640 }, 285], - [{ layoutWidth: 390, layoutHeight: 844 }, 316], - [{ layoutWidth: 430, layoutHeight: 932 }, 347], + [{ layoutWidth: 320, layoutHeight: 568 }, 260], + [{ layoutWidth: 360, layoutHeight: 640 }, 291], + [{ layoutWidth: 390, layoutHeight: 844 }, 344], + [{ layoutWidth: 430, layoutHeight: 932 }, 356], ])("fits common viewport %o", (viewport, expectedInset) => { expect(resolveChatKeyboardFallbackInset(viewport)).toBe(expectedInset); }); + it("covers the reported 392 by 760 Facebook viewport", () => { + expect( + resolveChatKeyboardFallbackInset({ + layoutWidth: 392, + layoutHeight: 760, + }), + ).toBe(343); + }); + it("stays stable across tall viewports with the same width", () => { expect( resolveChatKeyboardFallbackInset({ layoutWidth: 390, layoutHeight: 760, }), - ).toBe(316); + ).toBe(343); expect( resolveChatKeyboardFallbackInset({ layoutWidth: 390, layoutHeight: 900, }), - ).toBe(316); + ).toBe(344); }); it("keeps the keyboard estimate within its bounds", () => { diff --git a/src/app/chat/hooks/__tests__/use-chat-keyboard-avoidance.test.tsx b/src/app/chat/hooks/__tests__/use-chat-keyboard-avoidance.test.tsx index 89603f8c..7fbce4f7 100644 --- a/src/app/chat/hooks/__tests__/use-chat-keyboard-avoidance.test.tsx +++ b/src/app/chat/hooks/__tests__/use-chat-keyboard-avoidance.test.tsx @@ -104,7 +104,7 @@ describe("useChatKeyboardAvoidance", () => { expect(getBottomInset(container)).toBe(""); act(() => vi.advanceTimersByTime(1)); - expect(getBottomInset(container)).toBe("316px"); + expect(getBottomInset(container)).toBe("344px"); expect(intervalSpy).not.toHaveBeenCalled(); }); @@ -188,7 +188,7 @@ describe("useChatKeyboardAvoidance", () => { renderHarness(root, false); renderHarness(root, true); act(() => vi.advanceTimersByTime(150)); - expect(getBottomInset(container)).toBe("316px"); + expect(getBottomInset(container)).toBe("344px"); visualViewport.height = 500; act(() => { @@ -203,7 +203,7 @@ describe("useChatKeyboardAvoidance", () => { renderHarness(root, false); renderHarness(root, true); act(() => vi.advanceTimersByTime(150)); - expect(getBottomInset(container)).toBe("316px"); + expect(getBottomInset(container)).toBe("344px"); renderHarness(root, false); diff --git a/src/app/chat/hooks/chat-keyboard-geometry.ts b/src/app/chat/hooks/chat-keyboard-geometry.ts index e3dd4c3a..5a980b26 100644 --- a/src/app/chat/hooks/chat-keyboard-geometry.ts +++ b/src/app/chat/hooks/chat-keyboard-geometry.ts @@ -1,8 +1,8 @@ export const CHAT_KEYBOARD_VISIBLE_THRESHOLD_PX = 80; export const CHAT_KEYBOARD_ZOOM_THRESHOLD = 1.05; export const CHAT_KEYBOARD_TARGET_GAP_PX = 16; -export const CHAT_KEYBOARD_FALLBACK_WIDTH_RATIO = 0.77; -export const CHAT_KEYBOARD_FALLBACK_HEIGHT_RATIO = 0.42; +export const CHAT_KEYBOARD_FALLBACK_WIDTH_RATIO = 0.84; +export const CHAT_KEYBOARD_FALLBACK_HEIGHT_RATIO = 0.43; export const CHAT_KEYBOARD_FALLBACK_MIN_PX = 240; export const CHAT_KEYBOARD_FALLBACK_MAX_PX = 340;