From f04fdd55943f4f8cf73b2c38587b409d650f1286 Mon Sep 17 00:00:00 2001 From: Josh Lehman Date: Thu, 13 Aug 2026 14:12:30 -0700 Subject: [PATCH] fix(ui): align transcript search corner radius (#123299) --- .../chat/chat-responsive.browser.test.ts | 22 ++++++++++++++++++- ui/src/styles/chat/layout.css | 5 +++++ 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/ui/src/pages/chat/chat-responsive.browser.test.ts b/ui/src/pages/chat/chat-responsive.browser.test.ts index c61ac21eafe8..8ec7bd8deb76 100644 --- a/ui/src/pages/chat/chat-responsive.browser.test.ts +++ b/ui/src/pages/chat/chat-responsive.browser.test.ts @@ -700,7 +700,7 @@ describeBrowserLayout.concurrent("chat responsive browser layout", () => { -
+
${iconSvg()} @@ -713,8 +713,28 @@ describeBrowserLayout.concurrent("chat responsive browser layout", () => { const searchBar = await getBoundingBox(page, ".agent-chat__search-bar"); const icons = await page.locator(".agent-chat__search-bar svg").all(); const input = page.locator(".agent-chat__search-bar input"); + const cornerRadii = await page.locator(".chat").evaluate((chat) => { + const search = chat.querySelector(".agent-chat__search-bar"); + if (!search) { + throw new Error("Expected transcript search bar"); + } + const radii = (element: Element) => { + const style = getComputedStyle(element); + return [ + style.borderTopLeftRadius, + style.borderTopRightRadius, + style.borderBottomRightRadius, + style.borderBottomLeftRadius, + ]; + }; + return { chat: radii(chat), search: radii(search) }; + }); expect(searchBar.height).toBeLessThan(64); + expect(cornerRadii).toEqual({ + chat: ["0px", "0px", "0px", "0px"], + search: ["0px", "0px", "14px", "14px"], + }); expect(icons).toHaveLength(2); for (const icon of icons) { const box = await icon.boundingBox(); diff --git a/ui/src/styles/chat/layout.css b/ui/src/styles/chat/layout.css index c0ba01094114..9e3dc5206192 100644 --- a/ui/src/styles/chat/layout.css +++ b/ui/src/styles/chat/layout.css @@ -146,12 +146,17 @@ openclaw-chat-page { /* Transcript search sits above the workbench. Keep the shared SVG icon from taking its intrinsic flex width and size the controls as compact chrome. */ +.chat:has(> .agent-chat__search-bar) { + border-radius: 0; +} + .agent-chat__search-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--border); + border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--card); }