diff --git a/ui/src/pages/chat/chat-responsive.browser.test.ts b/ui/src/pages/chat/chat-responsive.browser.test.ts index f9d3dcde0a41..c36365d21843 100644 --- a/ui/src/pages/chat/chat-responsive.browser.test.ts +++ b/ui/src/pages/chat/chat-responsive.browser.test.ts @@ -2010,6 +2010,51 @@ describeBrowserLayout.concurrent("chat responsive browser layout", () => { } }); + it.each(["dark", "light"] as const)( + "keeps punctuation attached to inline code in %s mode", + async (themeMode) => { + const page = await openBrowserPage(800, 400); + try { + await page.setContent( + ` +

Use status; then restart.

+ `, + ); + + const spacing = await page.locator(".chat-text code").evaluateAll((nodes) => + nodes.map((node) => { + const punctuation = node.nextSibling; + if (!(punctuation instanceof Text)) { + throw new Error("Expected punctuation text after inline code"); + } + const range = document.createRange(); + range.selectNodeContents(node); + const textRect = range.getBoundingClientRect(); + range.setStart(punctuation, 0); + range.setEnd(punctuation, 1); + const punctuationRect = range.getBoundingClientRect(); + range.detach(); + const chipRect = (node as HTMLElement).getBoundingClientRect(); + return { + horizontalGap: punctuationRect.left - textRect.right, + heightDelta: chipRect.height - punctuationRect.height, + }; + }), + ); + + expect(spacing).toHaveLength(2); + for (const { horizontalGap, heightDelta } of spacing) { + // Include the chip border/inset, but keep both measurements within a + // quarter of the 14px prose size across browser font metrics. + expect(horizontalGap).toBeLessThanOrEqual(3.75); + expect(heightDelta).toBeLessThanOrEqual(3.75); + } + } finally { + await closeBrowserPage(page); + } + }, + ); + it.each(["dark", "light"] as const)( "keeps mobile controls inside the viewport with touch targets in %s mode", async (themeMode) => { diff --git a/ui/src/styles/chat/text.css b/ui/src/styles/chat/text.css index b87c57ef9557..89d54991ef81 100644 --- a/ui/src/styles/chat/text.css +++ b/ui/src/styles/chat/text.css @@ -310,7 +310,7 @@ bubbles; --bg-muted/--border-strong separate in both modes without an override. */ .chat-text :where(:not(pre, a.markdown-file-link) > code) { background: var(--bg-muted); - padding: 0.15em 0.35em; + padding: 0.1em 0.2em; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); overflow-wrap: anywhere;