fix: keep mobile composer above soft keyboard

webui/src/tests/thread-composer.test.tsx

@@ -134,6 +134,28 @@ function mockBlobUrls() {
   });
 }
 
+function stubVisualViewport({
+  height,
+  offsetTop = 0,
+}: {
+  height: number;
+  offsetTop?: number;
+}) {
+  const target = new EventTarget();
+  vi.stubGlobal("visualViewport", {
+    width: 390,
+    height,
+    offsetTop,
+    offsetLeft: 0,
+    pageTop: offsetTop,
+    pageLeft: 0,
+    scale: 1,
+    addEventListener: target.addEventListener.bind(target),
+    removeEventListener: target.removeEventListener.bind(target),
+    dispatchEvent: target.dispatchEvent.bind(target),
+  } as unknown as VisualViewport);
+}
+
 afterEach(() => {
   vi.restoreAllMocks();
   vi.unstubAllGlobals();
@@ -1124,6 +1146,33 @@ describe("ThreadComposer", () => {
     });
   });
 
+  it("keeps the slash command palette above a keyboard-constrained visual viewport", async () => {
+    vi.spyOn(HTMLFormElement.prototype, "getBoundingClientRect").mockReturnValue(
+      rect({ top: 120, bottom: 220, width: 390, height: 100 }),
+    );
+    Object.defineProperty(window, "innerHeight", {
+      value: 800,
+      configurable: true,
+    });
+    stubVisualViewport({ height: 300 });
+    render(
+      <ThreadComposer
+        onSend={vi.fn()}
+        placeholder="Ask anything..."
+        slashCommands={COMMANDS}
+      />,
+    );
+    const input = screen.getByLabelText("Message input");
+
+    fireEvent.change(input, { target: { value: "/" } });
+
+    await waitFor(() => {
+      const palette = screen.getByRole("listbox", { name: "Slash commands" });
+      expect(palette.className).toContain("bottom-full");
+      expect(palette).toHaveStyle({ maxHeight: "112px" });
+    });
+  });
+
   it("dismisses the slash command palette on outside click", () => {
     render(
       <div>