diff --git a/ui/src/pages/chat/chat-responsive.browser.test.ts b/ui/src/pages/chat/chat-responsive.browser.test.ts index 368fa32acaee..76277c07fa7b 100644 --- a/ui/src/pages/chat/chat-responsive.browser.test.ts +++ b/ui/src/pages/chat/chat-responsive.browser.test.ts @@ -248,6 +248,47 @@ function activityAlignmentHtml() { `; } +function completedWorkSpacingHtml() { + return ` +
+
+
+
+
+
+
Prompt
+
+
You
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
Final reply
+
+
Assistant
+
+
+
+
+
+ `; +} + function chatFooterActionsHtml() { return `
@@ -596,14 +637,14 @@ async function openFixture(width: number, height: number, opts: ChatFixtureOptio async function openBrowserPage( width: number, height: number, - options: { isolated?: boolean } = {}, + options: { hasTouch?: boolean; isolated?: boolean } = {}, ): Promise { sharedBrowser ??= await chromium.launch({ executablePath: chromiumExecutablePath, headless: true, }); if (options.isolated) { - return await sharedBrowser.newPage({ viewport: { width, height } }); + return await sharedBrowser.newPage({ hasTouch: options.hasTouch, viewport: { width, height } }); } // Static setContent fixtures do not mutate context-owned storage or routes, // so they can share one context while their pages remain concurrent. @@ -1225,6 +1266,46 @@ describeBrowserLayout.concurrent("chat responsive browser layout", () => { } }); + it.each([ + { label: "desktop", width: 1366, hasTouch: false, expectedGap: 9 }, + { label: "narrow touch", width: 430, hasTouch: true, expectedGap: 23 }, + { label: "wide touch", width: 1366, hasTouch: true, expectedGap: 23 }, + ])("balances completed-work spacing on $label", async ({ width, hasTouch, expectedGap }) => { + const page = await openBrowserPage(width, 720, { hasTouch, isolated: true }); + try { + await page.setContent( + `${completedWorkSpacingHtml()}`, + ); + await waitForLayoutSettled(page, "[data-spacing-row], .chat-group--work"); + + const gaps = await page.evaluate(() => { + const rows = [...document.querySelectorAll("[data-spacing-row]")]; + let offset = 0; + for (const row of rows) { + row.style.transform = `translateY(${offset}px)`; + offset += row.getBoundingClientRect().height; + } + const prompt = document.querySelector( + '[data-spacing-row="prompt"] .chat-group', + )!; + const summary = document.querySelector(".chat-work-group > button")!; + const separator = document.querySelector(".chat-work-group__separator")!; + const reply = document.querySelector( + '[data-spacing-row="reply"] .chat-group', + )!; + return { + after: reply.getBoundingClientRect().top - separator.getBoundingClientRect().bottom, + before: summary.getBoundingClientRect().top - prompt.getBoundingClientRect().bottom, + }; + }); + + expect(gaps.before).toBeCloseTo(expectedGap, 0); + expect(gaps.after).toBeCloseTo(expectedGap, 0); + } finally { + await closeBrowserPage(page); + } + }); + it("insets only the bundled logo inside the unchanged avatar box", async () => { const page = await openBrowserPage(430, 720); try { diff --git a/ui/src/styles/chat/tool-cards.css b/ui/src/styles/chat/tool-cards.css index 38c50bcdbf1c..a55b0fc790cf 100644 --- a/ui/src/styles/chat/tool-cards.css +++ b/ui/src/styles/chat/tool-cards.css @@ -1130,10 +1130,10 @@ } /* Completed-turn work rollup: slim "Worked for X" disclosure standing in for - the turn's intermediate tool/commentary groups. Sits snug above the final - reply, aligned with the message column via a gutter matching the avatar. */ + the turn's intermediate tool/commentary groups. Keep it equally separated + from the prompt and final reply. */ .chat-group--work { - padding-bottom: 8px; + padding-block: 9px; } .chat-work-group .chat-activity-group__label {