diff --git a/ui/src/e2e/chat-flow.follow-ups.e2e.test.ts b/ui/src/e2e/chat-flow.follow-ups.e2e.test.ts index 2160e5d42a6a..aa0ab9c1da4e 100644 --- a/ui/src/e2e/chat-flow.follow-ups.e2e.test.ts +++ b/ui/src/e2e/chat-flow.follow-ups.e2e.test.ts @@ -83,6 +83,15 @@ suite.define(() => { await startButton.waitFor({ state: "visible", timeout: 10_000 }); const moreActions = page.getByRole("button", { name: "More ways to start this task" }); expect(await moreActions.count()).toBe(1); + const [startBox, moreActionsBox] = await Promise.all([ + startButton.boundingBox(), + moreActions.boundingBox(), + ]); + expect(startBox).not.toBeNull(); + expect(moreActionsBox).not.toBeNull(); + expect( + (moreActionsBox?.x ?? 0) - ((startBox?.x ?? 0) + (startBox?.width ?? 0)), + ).toBeGreaterThanOrEqual(4); await moreActions.click(); await page .getByText("Copy prompt", { exact: true }) diff --git a/ui/src/styles/chat/layout.css b/ui/src/styles/chat/layout.css index 6ea65fad5ce9..3cb5fde36c18 100644 --- a/ui/src/styles/chat/layout.css +++ b/ui/src/styles/chat/layout.css @@ -1889,11 +1889,12 @@ button.chat-reply-preview--message:disabled { justify-self: end; } -/* Compact split control pinned to the card's top-right; both halves share one - fixed height so the chevron cap can never overhang the primary segment. */ +/* Paired actions stay pinned to the card's top-right and share one fixed height + while remaining visibly separate, independently rounded controls. */ .task-suggestion__split { display: inline-flex; align-items: stretch; + gap: 4px; height: 26px; } @@ -1903,16 +1904,12 @@ button.chat-reply-preview--message:disabled { gap: 5px; height: 26px; padding: 0 10px; - border-radius: var(--radius-md) 0 0 var(--radius-md); + border-radius: var(--radius-md); font-size: 12px; line-height: 1; white-space: nowrap; } -.task-suggestion__start:only-child { - border-radius: var(--radius-md); -} - .task-suggestion__start svg { width: 12px; height: 12px; @@ -1923,10 +1920,9 @@ button.chat-reply-preview--message:disabled { width: 26px; min-width: 26px; height: 26px; - margin-left: -1px; padding: 0; place-items: center; - border-radius: 0 var(--radius-md) var(--radius-md) 0; + border-radius: var(--radius-md); } .task-suggestion__menu-trigger svg {