From a0295b20c436fd3f2bd6a6d294ae3cee005391e8 Mon Sep 17 00:00:00 2001 From: Diego Imbert <70353967+diegoimbert@users.noreply.github.com> Date: Sat, 5 Sep 2026 12:39:44 +0200 Subject: [PATCH] fix(frontend): render ordered lists in markdown descriptions (#10973) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(frontend): render ordered lists in markdown descriptions `GfmMarkdown` defaulted to `prose-xs`, which Tailwind Typography does not define — the class only ever matched four hand-rolled rules in app.css, all scoped to `ul`. Every surface on that default (script and flow descriptions, flow-graph notes, markdown job results) therefore rendered `
    ` with Preflight's `list-style: none` and no typography at all: no numbers, no heading or paragraph rhythm. Route the default through the shared `markdownProse` stacks instead, and cut the app.css list rules down to the dash glyph so ordered and unordered lists share Tailwind Typography's indentation and rhythm. Fixes #10971 Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01S6G5gDXJnm6uqch4uCPkPE * fix(frontend): address review nits on the markdown prose fix - default `GfmMarkdown` to the `sm` stack rather than `xs`: the AI-agent tool Message pane takes the default and has no ancestor font size, so `xs` left it smaller than its own label. The group note, whose wrapper is `text-2xs`, opts down explicitly. - regenerate `static/tailwind_full.css`, which raw apps are served and which still carried the deleted list rules. - correct the marker-color rationale: the typography config already maps markers to tertiary, so the rule steps them up rather than rescuing them. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01S6G5gDXJnm6uqch4uCPkPE * fix(frontend): make the note color override an arbitrary value `text-inherit` is not generated: this config replaces the Tailwind color palette outright and defines no `inherit` key, so `[&_*]:!text-inherit` compiled to nothing and notes still rendered in the prose stack's `text-primary`. Verified in the browser: a yellow note's list items now compute to `text-yellow-900`, matching the wrapper and the edit-mode textarea, in both themes. Also drop the `static/tailwind_full.css` regeneration. That file was generated with tailwind 3.4.1 against a config predating the typography theme overrides; rebuilding it today sweeps in 250KB of unrelated churn and would flip every raw app's `.prose` palette from stock gray to Windmill tokens. Its staleness predates this PR and is its own change. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01S6G5gDXJnm6uqch4uCPkPE --------- Co-authored-by: Claude Opus 5 (1M context) --- frontend/src/lib/assets/app.css | 23 ++++++------------- .../src/lib/components/DisplayResult.svelte | 3 ++- .../src/lib/components/GfmMarkdown.svelte | 7 +++--- .../lib/components/graph/GroupNoteArea.svelte | 6 ++--- .../src/lib/components/graph/noteColors.ts | 9 ++++++++ .../graph/renderers/nodes/NoteNode.svelte | 4 +++- frontend/src/lib/components/markdownProse.ts | 4 ++-- 7 files changed, 29 insertions(+), 27 deletions(-) diff --git a/frontend/src/lib/assets/app.css b/frontend/src/lib/assets/app.css index 760f4c0261..f6dc648234 100644 --- a/frontend/src/lib/assets/app.css +++ b/frontend/src/lib/assets/app.css @@ -209,33 +209,24 @@ U+1fac6, U+1fae0-1fae6, U+1fae8-1faea, U+1faef-1faf8; } - .prose-xs ul { - margin-top: 0.5rem; - list-style-type: '- '; - padding-left: 1.5rem; - } - + /* Bullets read as a dash rather than a disc. Only the glyph is overridden: + indentation and vertical rhythm stay with Tailwind Typography so ordered + and unordered lists line up with each other. */ .prose ul { - margin-top: 1.5rem; list-style-type: '- '; - padding-left: 3rem; } - /* The '- ' list markers, horizontal rules and blockquote bars otherwise - fall through to Tailwind Typography's default bullet/border colors, which - are nearly invisible on dark backgrounds (e.g. the AI chat). Use - theme-aware tokens so they stay readable in both light and dark mode. */ - .prose-xs ul > li::marker, - .prose ul > li::marker { + /* List markers, horizontal rules and blockquote bars take the tertiary/light + tokens the typography config maps them to, which is too faint to read on + the denser markdown surfaces (e.g. the AI chat). Step them up one. */ + .prose :is(ul, ol) > li::marker { color: rgb(var(--color-text-secondary)); } - .prose-xs hr, .prose hr { border-top-color: rgb(var(--color-border-normal)); } - .prose-xs blockquote, .prose blockquote { border-left-color: rgb(var(--color-border-normal)); } diff --git a/frontend/src/lib/components/DisplayResult.svelte b/frontend/src/lib/components/DisplayResult.svelte index 8208fb193e..47bafa4d5a 100644 --- a/frontend/src/lib/components/DisplayResult.svelte +++ b/frontend/src/lib/components/DisplayResult.svelte @@ -32,6 +32,7 @@ import Alert from './common/alert/Alert.svelte' import AutoDataTable from './table/AutoDataTable.svelte' import Markdown from 'svelte-exmarkdown' + import { markdownProse } from './markdownProse' import Toggle from './Toggle.svelte' import FileDownload from './common/fileDownload/FileDownload.svelte' @@ -1229,7 +1230,7 @@ {:else if !forceJson && resultKind === 'markdown'} -
    +
    {:else if largeObject || hasBigInt} diff --git a/frontend/src/lib/components/GfmMarkdown.svelte b/frontend/src/lib/components/GfmMarkdown.svelte index 50fa3cda45..7a30490ba9 100644 --- a/frontend/src/lib/components/GfmMarkdown.svelte +++ b/frontend/src/lib/components/GfmMarkdown.svelte @@ -6,12 +6,11 @@ interface Props { md: string noPadding?: boolean - /** Shared prose stack to render with. Omitted keeps the legacy `prose-xs`, - * which the flow-graph notes are laid out against. */ + /** Shared prose stack to render with. */ prose?: MarkdownProseSize } - let { md, noPadding, prose }: Props = $props() + let { md, noPadding, prose = 'sm' }: Props = $props() // Rendering markdown turns `![](url)` into a real ``, i.e. a request. On the // public replay page the source is a recording from an arbitrary origin and the @@ -21,7 +20,7 @@ let asPlainText = $derived(isOfflineReplay()) -
    +
    {#if asPlainText}

    {md}

    {:else} diff --git a/frontend/src/lib/components/graph/GroupNoteArea.svelte b/frontend/src/lib/components/graph/GroupNoteArea.svelte index 1b4562e8d0..ced0f4deae 100644 --- a/frontend/src/lib/components/graph/GroupNoteArea.svelte +++ b/frontend/src/lib/components/graph/GroupNoteArea.svelte @@ -1,7 +1,7 @@