Overlay branch overlay/web-android-enter on top of origin/main via Merge

•   26131fb6fa	Overlay branch overlay/web-android-enter on top of origin/main via Merge
|\
| • a808491	fix(web): detect keyboards that resize the layout viewport
• | a8dba9c	fix(mobile): the empty composer row shows only the provider icon (pingdotgg#23570)
• | 09bb9f1	fix(server): wake PR watches when remaining CI checks finish (pingdotgg#23904)
• | 05cd55d	fix(mobile): center Android composer text and pad wrapped drafts (pingdotgg#23829)
• | 50e151c	docs(connect): correct the relay webhook endpoint key (pingdotgg#23526)
• | 18e2742	fix(mobile): undo toasts keep their action on one row (pingdotgg#23910)
• | 5127302	feat(settings): add thread title instructions (pingdotgg#21882)

Author: Fire-

apps/web/src/lib/softwareKeyboard.test.ts

@@ -2,15 +2,21 @@ import { describe, expect, it, vi } from "vite-plus/test";
 
 import { createSoftwareKeyboardStore } from "./softwareKeyboard";
 
-function fixture(options: { native?: boolean; overlay?: boolean; desktop?: boolean } = {}) {
+function fixture(
+  options: { native?: boolean; overlay?: boolean; desktop?: boolean; coarse?: boolean } = {},
+) {
   const viewport = Object.assign(new EventTarget(), { width: 390, height: 844, scale: 1 });
   const keyboard = Object.assign(new EventTarget(), {
     boundingRect: { height: 0 },
     overlaysContent: options.overlay ?? false,
   });
   const win = {
+    innerWidth: 390,
     innerHeight: 844,
     visualViewport: viewport,
+    matchMedia: (query: string) => ({
+      matches: query === "(pointer: coarse)" && (options.coarse ?? true),
+    }),
     navigator: options.native ? { virtualKeyboard: keyboard } : {},
   };
   const store = createSoftwareKeyboardStore(win as unknown as Window, options.desktop ?? false);
@@ -91,6 +97,15 @@ describe("software keyboard detection", () => {
     unsubscribe();
   });
 
+  it("ignores window resizing even with a large height change", () => {
+    const { store, resize, win } = fixture({ coarse: false });
+    const unsubscribe = store.subscribe(() => {});
+    win.innerHeight = 500;
+    resize(500);
+    expect(store.getSnapshot()).toBe(false);
+    unsubscribe();
+  });
+
   it("ignores pinch zoom and recognizes keyboard changes at the new scale", () => {
     const { store, resize } = fixture();
     const unsubscribe = store.subscribe(() => {});
@@ -106,12 +121,49 @@ describe("software keyboard detection", () => {
   it("does not mistake rotation for an open keyboard", () => {
     const { store, resize, win } = fixture();
     const unsubscribe = store.subscribe(() => {});
-    win.innerHeight = 390;
+    Object.assign(win, { innerWidth: 844, innerHeight: 390 });
     resize(390, 844);
     expect(store.getSnapshot()).toBe(false);
     unsubscribe();
   });
 
+  it("detects a keyboard that resizes the layout viewport with the visual viewport", () => {
+    const { store, resize, viewport, win } = fixture();
+    const layoutResize = (height: number, width = viewport.width, scale = 1) => {
+      win.innerHeight = height;
+      resize(height / scale, width, scale);
+    };
+    const unsubscribe = store.subscribe(() => {});
+
+    layoutResize(500);
+    expect(store.getSnapshot()).toBe(true);
+    layoutResize(480);
+    expect(store.getSnapshot()).toBe(true);
+    layoutResize(480, 195, 2);
+    expect(store.getSnapshot()).toBe(true);
+    layoutResize(844, 195, 2);
+    expect(store.getSnapshot()).toBe(false);
+    layoutResize(800, 390);
+    expect(store.getSnapshot()).toBe(false);
+    layoutResize(460);
+    expect(store.getSnapshot()).toBe(true);
+    layoutResize(800);
+    expect(store.getSnapshot()).toBe(false);
+    unsubscribe();
+  });
+
+  it("detects a layout-resizing keyboard that opened before subscribing", () => {
+    const { store, resize, win } = fixture();
+    win.innerHeight = 500;
+    resize(500);
+    const unsubscribe = store.subscribe(() => {});
+    expect(store.getSnapshot()).toBe(true);
+    win.innerHeight = 844;
+    resize(844);
+    expect(store.getSnapshot()).toBe(false);
+    unsubscribe();
+  });
+
   it("recognizes keyboard closure despite viewport rounding at high zoom", () => {
     const { store, resize } = fixture();
     resize(211, 98, 4);

apps/web/src/lib/softwareKeyboard.ts

@@ -3,7 +3,10 @@ type VirtualKeyboard = EventTarget & {
   readonly overlaysContent: boolean;
 };
 
-type KeyboardWindow = Pick<Window, "innerHeight" | "visualViewport"> & {
+type KeyboardWindow = Pick<
+  Window,
+  "innerWidth" | "innerHeight" | "visualViewport" | "matchMedia"
+> & {
   readonly navigator: Navigator & { readonly virtualKeyboard?: VirtualKeyboard };
 };
 
@@ -23,6 +26,19 @@ export function createSoftwareKeyboardStore(win: KeyboardWindow | undefined, isD
   const viewport = isDesktop ? undefined : win?.visualViewport;
   const keyboard = isDesktop ? undefined : win?.navigator.virtualKeyboard;
   let previous = viewport ? viewportSnapshot(viewport) : undefined;
+  // Our interactive-widget=resizes-content makes browsers that honor it (Firefox Android)
+  // shrink the layout viewport with the visual one, so compare against the tallest layout
+  // seen at this width. A fine pointer means a desktop window resize, not a keyboard.
+  const tracksLayout = viewport !== undefined && win?.matchMedia("(pointer: coarse)").matches;
+  let fullLayout = win ? { width: win.innerWidth, height: win.innerHeight } : undefined;
+
+  const layoutShrunkByKeyboard = () => {
+    if (!tracksLayout || !win || !fullLayout) return false;
+    if (fullLayout.width !== win.innerWidth || win.innerHeight > fullLayout.height) {
+      fullLayout = { width: win.innerWidth, height: win.innerHeight };
+    }
+    return fullLayout.height - win.innerHeight > KEYBOARD_THRESHOLD;
+  };
 
   const getSnapshot = () => {
     // Chromium can expose the API while withholding geometry outside overlay mode.
@@ -45,7 +61,9 @@ export function createSoftwareKeyboardStore(win: KeyboardWindow | undefined, isD
     const scaledHeightDifference = previous
       ? (previous.height - current.height) * current.scale
       : 0;
-    if (Math.abs(current.height - win.innerHeight / current.scale) <= 1) {
+    if (layoutShrunkByKeyboard()) {
+      viewportOpen = true;
+    } else if (Math.abs(current.height - win.innerHeight / current.scale) <= 1) {
       viewportOpen = false;
     } else if (
       !viewportOpen &&
@@ -64,7 +82,9 @@ export function createSoftwareKeyboardStore(win: KeyboardWindow | undefined, isD
       if (viewport) {
         previous = viewportSnapshot(viewport);
         // A composer can mount after the keyboard has already opened.
-        viewportOpen = win.innerHeight - previous.height * previous.scale > KEYBOARD_THRESHOLD;
+        viewportOpen =
+          layoutShrunkByKeyboard() ||
+          win.innerHeight - previous.height * previous.scale > KEYBOARD_THRESHOLD;
         viewport.addEventListener("resize", onViewportResize);
       }
       keyboard?.addEventListener("geometrychange", notify);