From b4c620b157c10dd9a9e3bf61be3abfe16010f4e9 Mon Sep 17 00:00:00 2001 From: RoboClaw Date: Mon, 24 Aug 2026 12:43:53 -0700 Subject: [PATCH] fix(ui): compact touch tool rows (#128839) Co-authored-by: roboclaw-bot <309084314+roboclaw-bot@users.noreply.github.com> Co-authored-by: Tak Hoffman <781889+Takhoffman@users.noreply.github.com> --- .../chat/chat-responsive.browser.test.ts | 33 +++++++++++++++---- ui/src/styles/chat/tool-cards.css | 1 - 2 files changed, 26 insertions(+), 8 deletions(-) diff --git a/ui/src/pages/chat/chat-responsive.browser.test.ts b/ui/src/pages/chat/chat-responsive.browser.test.ts index 1593d8554531..74835c0f053a 100644 --- a/ui/src/pages/chat/chat-responsive.browser.test.ts +++ b/ui/src/pages/chat/chat-responsive.browser.test.ts @@ -1299,10 +1299,11 @@ describeBrowserLayout.concurrent("chat responsive browser layout", () => { }); it.each([ - [430, 720], - [1366, 900], - ] as const)("keeps activity disclosures compact at %sx%s", async (width, height) => { - const page = await openBrowserPage(width, height); + { label: "narrow desktop", width: 430, height: 720, hasTouch: false }, + { label: "desktop", width: 1366, height: 900, hasTouch: false }, + { label: "mobile touch", width: 430, height: 720, hasTouch: true }, + ])("keeps activity disclosures compact on $label", async ({ width, height, hasTouch }) => { + const page = await openBrowserPage(width, height, { hasTouch, isolated: true }); try { await page.setContent( `${activityAlignmentHtml()}`, @@ -1320,21 +1321,39 @@ describeBrowserLayout.concurrent("chat responsive browser layout", () => { const activity = document.querySelector(".chat-activity-group__summary")!; const label = activity.querySelector(".chat-activity-group__label")!; const chevron = activity.querySelector(".chat-tool-row__chevron")!; + const toolRows = [ + ...document.querySelectorAll( + ".chat-activity-group__body .chat-tool-msg-summary", + ), + ]; + const firstToolStyle = getComputedStyle(toolRows[0]!); + const firstToolRect = toolRows[0]!.getBoundingClientRect(); + const secondToolRect = toolRows[1]!.getBoundingClientRect(); return { activity: getComputedStyle(activity).userSelect, activityBackground: getComputedStyle(activity).backgroundColor, + activityPaddingBlock: [ + getComputedStyle(activity).paddingTop, + getComputedStyle(activity).paddingBottom, + ], chevronGap: chevron.getBoundingClientRect().left - label.getBoundingClientRect().right, - tool: getComputedStyle(document.querySelector(".chat-tool-msg-summary")!) - .userSelect, + tool: firstToolStyle.userSelect, + toolPaddingBlock: [firstToolStyle.paddingTop, firstToolStyle.paddingBottom], + toolRowGap: secondToolRect.top - firstToolRect.bottom, }; }); - expect(styles).toEqual({ + const { toolRowGap, ...disclosureStyles } = styles; + expect(disclosureStyles).toEqual({ activity: "text", activityBackground: "rgba(0, 0, 0, 0)", + activityPaddingBlock: hasTouch ? ["8px", "8px"] : ["5px", "5px"], // Summary gap (8px) less the chevron's own -3px inset. chevronGap: 5, tool: "text", + toolPaddingBlock: ["3px", "3px"], }); + expect(toolRowGap).toBeGreaterThanOrEqual(0); + expect(toolRowGap).toBeLessThanOrEqual(2); } finally { await closeBrowserPage(page); } diff --git a/ui/src/styles/chat/tool-cards.css b/ui/src/styles/chat/tool-cards.css index cc53e48f0cf5..5a8881948864 100644 --- a/ui/src/styles/chat/tool-cards.css +++ b/ui/src/styles/chat/tool-cards.css @@ -2254,7 +2254,6 @@ openclaw-tooltip.chat-tasks-status__preview { } @media (pointer: coarse) { - .chat-tool-msg-summary, .chat-activity-group__summary { padding-top: 8px; padding-bottom: 8px;