diff --git a/e2e/tests/season-schedule.spec.ts b/e2e/tests/season-schedule.spec.ts index 75bc0b2..898cdad 100644 --- a/e2e/tests/season-schedule.spec.ts +++ b/e2e/tests/season-schedule.spec.ts @@ -184,6 +184,30 @@ test.describe("Season schedules", () => { await expect(page.getByRole("tab", { name: "Stats" })).toBeVisible(); }); + test("scrolls the page over expanded desktop momentum stats", async ({ page }) => { + await page.setViewportSize({ width: 1440, height: 900 }); + await page.goto("/"); + await page.getByTestId("live-dashboard-game-401873297").click(); + const panel = page.getByTestId("game-stats-panel"); + await panel.getByRole("tab", { name: "Momentum" }).click(); + const content = panel.getByRole("tabpanel"); + await expect(content.getByText("Win Probability Over Time")).toBeVisible(); + const sidebar = page.getByTestId("schedule-sidebar"); + // Hovering the whole tall panel can scroll Firefox to the document bottom. + // Position its top within the viewport, leaving room to wheel downward. + await content.evaluate((element) => { + window.scrollTo(0, element.getBoundingClientRect().top + window.scrollY - 600); + }); + const contentBox = await content.boundingBox(); + await page.mouse.move(contentBox!.x + 20, contentBox!.y + 20); + const before = await page.evaluate(() => window.scrollY); + await page.mouse.wheel(0, 500); + await expect.poll(() => page.evaluate(() => window.scrollY)).toBeGreaterThan(before); + await expect.poll(async () => (await sidebar.boundingBox())!.y).toBeGreaterThanOrEqual(23); + await page.mouse.wheel(0, -500); + await expect.poll(() => page.evaluate(() => window.scrollY)).toBeLessThanOrEqual(before); + }); + test("keeps the field visible between drives on wide screens", async ({ page }) => { await page.unroute("**/api/game-stats/**"); await page.route("**/api/game-stats/**", async (route) => { diff --git a/src/app/globals.css b/src/app/globals.css index 4ff90a8..e929da1 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -121,14 +121,14 @@ @apply border-border outline-ring/50; } html { - /* Prevent horizontal scroll and overscroll bounce on mobile */ - overflow-x: hidden; + /* Clip horizontal overflow without creating a scroll container that breaks sticky layout. */ + overflow-x: clip; overscroll-behavior-x: none; } body { @apply bg-background text-foreground; - /* Prevent horizontal scroll and overscroll bounce on mobile */ - overflow-x: hidden; + /* Clip horizontal overflow without creating a scroll container that breaks sticky layout. */ + overflow-x: clip; overscroll-behavior-x: none; /* Prevent pull-to-refresh and overscroll effects */ overscroll-behavior-y: contain; diff --git a/src/app/page.tsx b/src/app/page.tsx index e5bd45b..c5b2991 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -106,7 +106,7 @@ function BracketApp() {
{isLoading && !stats ? (