diff --git a/ui/src/e2e/chat-flow.models-reasoning.e2e.test.ts b/ui/src/e2e/chat-flow.models-reasoning.e2e.test.ts index 92536bb45ee4..4fd7c53c8dc3 100644 --- a/ui/src/e2e/chat-flow.models-reasoning.e2e.test.ts +++ b/ui/src/e2e/chat-flow.models-reasoning.e2e.test.ts @@ -40,6 +40,49 @@ suite.define(() => { } }); + it("keeps high-velocity model scrolling inside the picker", async () => { + const context = await suite.newBrowserContext({ + locale: "en-US", + serviceWorkers: "block", + viewport: { height: 900, width: 1280 }, + }); + const page = await context.newPage(); + const models = [ + { id: "gpt-5.5", name: "GPT-5.5", provider: "openai" }, + ...Array.from({ length: 32 }, (_value, index) => ({ + id: `scroll-model-${index + 1}`, + name: `Scroll Model ${index + 1}`, + provider: "openai", + })), + ]; + await installMockGateway(page, { + models, + sessionKey: "agent:main:main", + }); + + try { + await page.goto(`${suite.server.baseUrl}chat`); + const main = page.getByRole("main"); + await main.locator('[data-chat-model-select="true"]').click(); + const modelScroller = main.locator(".chat-controls__provider-models"); + await page.evaluate(() => { + document.documentElement.style.overflowY = "auto"; + document.body.style.height = "1800px"; + window.scrollTo(0, 300); + }); + expect(await page.evaluate(() => window.scrollY)).toBe(300); + await modelScroller.hover(); + const outerScrollBeforeFling = await page.evaluate(() => window.scrollY); + expect(outerScrollBeforeFling).toBeGreaterThan(0); + await page.mouse.wheel(0, -5_000); + await page.waitForTimeout(100); + + expect(await page.evaluate(() => window.scrollY)).toBe(outerScrollBeforeFling); + } finally { + await suite.closeBrowserContext(context); + } + }); + it("keeps a session model override selected after switching away and back", async () => { const context = await suite.newBrowserContext({ locale: "en-US", diff --git a/ui/src/styles/chat/layout.css b/ui/src/styles/chat/layout.css index 04781d689b21..bd250ccad9b8 100644 --- a/ui/src/styles/chat/layout.css +++ b/ui/src/styles/chat/layout.css @@ -4041,6 +4041,7 @@ openclaw-chat-page { min-width: 0; padding: 8px; overflow-y: auto; + overscroll-behavior: none; } .chat-controls__provider-model-group {