diff --git a/ui/src/lib/issue-chat-scroll.test.ts b/ui/src/lib/issue-chat-scroll.test.ts index 491369ad..1c23e058 100644 --- a/ui/src/lib/issue-chat-scroll.test.ts +++ b/ui/src/lib/issue-chat-scroll.test.ts @@ -3,6 +3,7 @@ import { describe, expect, it, vi } from "vitest"; import { captureComposerViewportSnapshot, + isWindowScrollable, restoreComposerViewportSnapshot, shouldPreserveComposerViewport, } from "./issue-chat-scroll"; @@ -39,6 +40,38 @@ describe("issue-chat-scroll", () => { composer.remove(); }); + it("does not scroll the window when the document body is overflow:hidden (desktop shell)", () => { + // The desktop app shell pins the body to overflow:hidden inside a fixed + // h-dvh flex column, so a window scroll would translate the whole shell + // (sidebar included) off-screen — paperclipai/paperclip#7972. + const composer = document.createElement("div"); + document.body.appendChild(composer); + document.body.style.overflow = "hidden"; + const scrollByMock = vi.spyOn(window, "scrollBy").mockImplementation(() => {}); + + mockTop(composer, 420); + const snapshot = captureComposerViewportSnapshot(composer); + + mockTop(composer, 560); + restoreComposerViewportSnapshot(snapshot, composer); + + expect(scrollByMock).not.toHaveBeenCalled(); + + scrollByMock.mockRestore(); + document.body.style.overflow = ""; + composer.remove(); + }); + + it("reports the document as scrollable only when the body is not clipped", () => { + document.body.style.overflow = ""; + expect(isWindowScrollable()).toBe(true); + + document.body.style.overflow = "hidden"; + expect(isWindowScrollable()).toBe(false); + + document.body.style.overflow = ""; + }); + it("restores main-content scroll when the layout uses an internal scroller", () => { const mainContent = document.createElement("main"); mainContent.id = "main-content"; diff --git a/ui/src/lib/issue-chat-scroll.ts b/ui/src/lib/issue-chat-scroll.ts index b70f3d92..6054e079 100644 --- a/ui/src/lib/issue-chat-scroll.ts +++ b/ui/src/lib/issue-chat-scroll.ts @@ -6,6 +6,34 @@ export interface ComposerViewportSnapshot { composerViewportTop: number; } +/** + * The page itself is only a usable scroll target when the document can actually + * scroll. The desktop app shell pins the body to `overflow: hidden` and renders + * a fixed-height (`h-dvh`) flex column, so scrolling the window there does not + * move content — it translates the entire shell (sidebar included) out of the + * viewport, the regression reported in paperclipai/paperclip#7972. The mobile + * shell and the auth-free perf fixture leave the body scrollable, where window + * scrolling is the correct behaviour. + */ +export function isWindowScrollable( + doc: Document = document, + win: Window = window, +): boolean { + const candidates = [doc.scrollingElement, doc.documentElement, doc.body]; + for (const element of candidates) { + if (!(element instanceof HTMLElement)) continue; + const style = win.getComputedStyle(element); + // Check both the `overflow-y` longhand and the `overflow` shorthand: the + // shell sets `body.style.overflow` (the shorthand) and some engines (incl. + // jsdom) do not derive the longhand from it in computed style. + const clipped = (value: string) => value === "hidden" || value === "clip"; + if (clipped(style.overflowY) || clipped(style.overflow)) { + return false; + } + } + return true; +} + export function resolveIssueChatScrollTarget( doc: Document = document, win: Window = window, @@ -66,5 +94,11 @@ export function restoreComposerViewportSnapshot( return; } + // Falling back to the window is only safe when the page itself scrolls. In + // the fixed-height desktop shell the body is `overflow: hidden`, so a window + // scroll would shift the whole app shell — sidebar included — off-screen + // (paperclipai/paperclip#7972). There is nothing to restore in that case. + if (!isWindowScrollable(doc, win)) return; + win.scrollBy({ top: delta, left: 0, behavior: "auto" }); }