Fix web chat stickiness at non-default zoom (#2368)

Treat subpixel browser scroll rounding as the visual bottom while preserving material overscroll protection.
2026-07-23 21:08:12 +02:00
parent 8a8f2baf80
commit b73592ccac
2 changed files with 86 additions and 1 deletions
@@ -199,6 +199,89 @@ describe("createWebStreamStrategy", () => {
    expect(renderLiveHeadRow).toHaveBeenCalledTimes(2);
  });

+  it("keeps bottom anchoring through subpixel browser rounding", () => {
+    const scrollTo = vi.fn();
+    HTMLElement.prototype.scrollTo = scrollTo;
+    const strategy = createWebStreamStrategy({ isMobileBreakpoint: false });
+    const viewportRef = React.createRef<StreamViewportHandle>();
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+
+    act(() => {
+      root?.render(
+        strategy.render({
+          agentId: "agent",
+          segments: {
+            historyVirtualized: [],
+            historyMounted: [userMessage(1)],
+            liveHead: [],
+          },
+          boundary: {
+            hasVirtualizedHistory: false,
+            hasMountedHistory: true,
+            hasLiveHead: false,
+          },
+          renderers: createRenderers(vi.fn()),
+          listEmptyComponent: null,
+          viewportRef,
+          routeBottomAnchorRequest: null,
+          isAuthoritativeHistoryReady: true,
+          onNearBottomChange: vi.fn(),
+          onNearHistoryStart: vi.fn(),
+          isLoadingOlderHistory: false,
+          hasOlderHistory: false,
+          scrollEnabled: true,
+          listStyle: null,
+          baseListContentContainerStyle: null,
+          forwardListContentContainerStyle: null,
+        }),
+      );
+    });
+
+    const scrollContainer = container.querySelector('[data-testid="agent-chat-scroll"]');
+    if (!(scrollContainer instanceof HTMLElement)) {
+      throw new Error("Expected agent chat scroll container");
+    }
+    Object.defineProperty(scrollContainer, "clientHeight", { configurable: true, value: 766 });
+    Object.defineProperty(scrollContainer, "scrollHeight", { configurable: true, value: 5725 });
+    Object.defineProperty(scrollContainer, "scrollTop", {
+      configurable: true,
+      value: 4959.1708984375,
+    });
+    scrollTo.mockClear();
+
+    act(() => {
+      viewportRef.current?.scrollToBottom("message-sent");
+    });
+
+    expect(scrollTo).toHaveBeenCalledWith({ top: 5725, behavior: "auto" });
+
+    scrollTo.mockClear();
+    Object.defineProperty(scrollContainer, "scrollTop", {
+      configurable: true,
+      value: 4960.5,
+    });
+
+    act(() => {
+      viewportRef.current?.scrollToBottom("message-sent");
+    });
+
+    expect(scrollTo).toHaveBeenCalledWith({ top: 5725, behavior: "auto" });
+
+    scrollTo.mockClear();
+    Object.defineProperty(scrollContainer, "scrollTop", {
+      configurable: true,
+      value: 4967,
+    });
+
+    act(() => {
+      viewportRef.current?.scrollToBottom("message-sent");
+    });
+
+    expect(scrollTo).not.toHaveBeenCalled();
+  });
+
  it("fires near-history-start when the user scrolls near the top", async () => {
    const strategy = createWebStreamStrategy({ isMobileBreakpoint: true });
    const viewportRef = React.createRef<StreamViewportHandle>();