diff --git a/apps/ui/e2e/__screens__/bridge-prs.png b/apps/ui/e2e/__screens__/bridge-prs.png index 6ef2eff0f..5490feded 100644 Binary files a/apps/ui/e2e/__screens__/bridge-prs.png and b/apps/ui/e2e/__screens__/bridge-prs.png differ diff --git a/apps/ui/e2e/__screens__/bridge.png b/apps/ui/e2e/__screens__/bridge.png index 93218282c..d5251bdf2 100644 Binary files a/apps/ui/e2e/__screens__/bridge.png and b/apps/ui/e2e/__screens__/bridge.png differ diff --git a/apps/ui/e2e/visual-smoke.spec.ts b/apps/ui/e2e/visual-smoke.spec.ts index 2c6de4937..03878b4cb 100644 --- a/apps/ui/e2e/visual-smoke.spec.ts +++ b/apps/ui/e2e/visual-smoke.spec.ts @@ -160,9 +160,17 @@ test.describe("visual smoke — legacy-palette baseline", () => { test("bridge — PRs board", async ({ page }) => { await page.goto("/#/"); await page.locator(".bridge").waitFor({ state: "visible" }); - // The PRs seg button (Bridge.tsx:154-158) — label "PRs · N", matched on - // its stable prefix so the live count doesn't perturb the selector. + // The tab seg must not move when the PRs tab hides the grouping seg, or + // the control slides out from under the pointer. + const tabSeg = page.locator('[aria-label="Board view"]'); + const onIssues = await tabSeg.boundingBox(); + // The PRs seg button — label "PRs · N", matched on its stable prefix so + // the live count doesn't perturb the selector. await page.getByRole("button", { name: /^PRs/ }).click(); + await page.locator('[aria-label="Board grouping"]').waitFor({ + state: "detached", + }); + expect(await tabSeg.boundingBox()).toEqual(onIssues); // Wait on a populated PR card in the board (Bridge.tsx `.bridge-grid` > // `.bridge-cell` > `.cx-card`), not the grid container — the grid renders // even with no cards, so gating on a card guarantees the populated board is diff --git a/apps/ui/src/app.css b/apps/ui/src/app.css index 7f4830b6e..b7350fadb 100644 --- a/apps/ui/src/app.css +++ b/apps/ui/src/app.css @@ -501,6 +501,12 @@ color: var(--cx-text-dim); } +/* The tab seg sits by the heading. Sharing the auto margin with the grouping + seg would slide it right whenever the PRs tab hides that seg. */ +.bridge-toolbar .bridge-tabs { + margin-left: 0; +} + .seg { display: flex; margin-left: auto; diff --git a/apps/ui/src/components/Bridge.tsx b/apps/ui/src/components/Bridge.tsx index 6fe764109..f181eeffb 100644 --- a/apps/ui/src/components/Bridge.tsx +++ b/apps/ui/src/components/Bridge.tsx @@ -573,7 +573,7 @@ export const Bridge: Component = () => { {boardAgents().length} agents · {inFlight()} in-flight issues -