diff --git a/ui/src/components/MarkdownDocumentCardStyles.test.ts b/ui/src/components/MarkdownDocumentCardStyles.test.ts new file mode 100644 index 00000000000..3fcfd752a62 --- /dev/null +++ b/ui/src/components/MarkdownDocumentCardStyles.test.ts @@ -0,0 +1,24 @@ +import { readFileSync } from "node:fs"; +import { fileURLToPath } from "node:url"; +import { describe, expect, it } from "vitest"; + +const stylesheet = readFileSync(fileURLToPath(new URL("../index.css", import.meta.url)), "utf8"); + +function cssBlock(selector: string): string { + const start = stylesheet.indexOf(`${selector} {`); + expect(start, `Missing CSS selector: ${selector}`).toBeGreaterThanOrEqual(0); + + const bodyStart = stylesheet.indexOf("{", start); + const bodyEnd = stylesheet.indexOf("\n}", bodyStart); + expect(bodyStart, `Missing CSS block start: ${selector}`).toBeGreaterThanOrEqual(0); + expect(bodyEnd, `Missing CSS block end: ${selector}`).toBeGreaterThan(bodyStart); + + return stylesheet.slice(bodyStart + 1, bodyEnd); +} + +describe("markdown document card styles", () => { + it("removes the inherited markdown link underline so the card label shows one underline", () => { + expect(cssBlock(".paperclip-markdown a")).toContain("text-decoration: underline"); + expect(cssBlock(".paperclip-markdown a[data-sidebar-document-link]")).toContain("text-decoration: none"); + }); +}); diff --git a/ui/src/index.css b/ui/src/index.css index 15eff463006..d9e0f9aa191 100644 --- a/ui/src/index.css +++ b/ui/src/index.css @@ -2549,6 +2549,12 @@ a.paperclip-mention-chip[data-mention-kind="agent"]::before { text-decoration: none; } +/* Document cards underline only their label span; the card itself must not + inherit the markdown link underline, or the label shows two lines. */ +.paperclip-markdown a[data-sidebar-document-link] { + text-decoration: none; +} + .paperclip-markdown a.paperclip-mention-chip[data-mention-kind="issue"] { border-color: color-mix(in oklab, var(--foreground) 14%, var(--border) 86%); background: color-mix(in oklab, var(--accent) 42%, transparent);