diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_client.module.css b/apps/nextjs/src/app/[locale]/boards/(content)/_client.module.css index 3dbf87f39..158ad16ae 100644 --- a/apps/nextjs/src/app/[locale]/boards/(content)/_client.module.css +++ b/apps/nextjs/src/app/[locale]/boards/(content)/_client.module.css @@ -9,7 +9,7 @@ } .gutter { - position: sticky; + position: relative; top: 0; align-self: start; padding-top: 24px; diff --git a/apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css b/apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css index 6ba183ba6..6c98e40a2 100644 --- a/apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css +++ b/apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css @@ -3,6 +3,7 @@ max-width: 100%; min-width: 0; overflow: visible; + overflow-x: auto; overscroll-behavior-inline: contain; } diff --git a/apps/nextjs/src/components/layout/header.tsx b/apps/nextjs/src/components/layout/header.tsx index 2c46608c0..8710fb631 100644 --- a/apps/nextjs/src/components/layout/header.tsx +++ b/apps/nextjs/src/components/layout/header.tsx @@ -18,7 +18,7 @@ interface Props { export const MainHeader = ({ logo, actions, hasNavigation = true }: Props) => { return ( - + {hasNavigation && } diff --git a/e2e/board-grid.spec.ts b/e2e/board-grid.spec.ts index f8c99e44b..0195c02cc 100644 --- a/e2e/board-grid.spec.ts +++ b/e2e/board-grid.spec.ts @@ -177,6 +177,7 @@ describe("Board grid", () => { const zoomedTileBox = await expectBoundingBoxAsync(logicalTile); expect(zoomedTileBox.width).toBeGreaterThan(normalZoomTileBox.width * 1.25); await expectHorizontalOverflowAsync(canvas); + await expectDocumentNotHorizontallyScrollableAsync(page); const overflowRailY = (await expectBoundingBoxAsync(rail)).y; await page.evaluate(() => window.scrollTo({ top: 300, behavior: "auto" })); await expect.poll(async () => (await expectBoundingBoxAsync(rail)).y).toBeGreaterThanOrEqual(0); @@ -348,6 +349,8 @@ describe("Board grid", () => { await page.setViewportSize({ width: 600, height: 1200 }); await expect(canvas).toHaveAttribute("data-canvas-scale", String(minimumCanvasScale)); + await expectHorizontalOverflowAsync(canvas); + await expectDocumentNotHorizontallyScrollableAsync(page); for (const direction of ["n", "ne", "e", "se", "s", "sw", "w", "nw"] as const) { await expectTargetSizeAsync(firstItem.locator(`:scope > [data-grid-resize-handle="${direction}"]`)); } @@ -823,8 +826,8 @@ describe("Board grid", () => { const stickyRailY = (await expectBoundingBoxAsync(rail)).y; await page.evaluate(() => window.scrollTo({ top: 500, behavior: "auto" })); + await expect.poll(async () => (await expectBoundingBoxAsync(rail)).y).toBeGreaterThanOrEqual(0); const scrolledRailY = (await expectBoundingBoxAsync(rail)).y; - expect(scrolledRailY).toBeGreaterThanOrEqual(0); expect(scrolledRailY).toBeLessThanOrEqual(stickyRailY + 0.5); await page.evaluate(() => window.scrollTo({ top: 0, behavior: "auto" }));