diff --git a/frontend/src/lib/assets/app.css b/frontend/src/lib/assets/app.css index 760f4c0261..ae4d33fce5 100644 --- a/frontend/src/lib/assets/app.css +++ b/frontend/src/lib/assets/app.css @@ -209,33 +209,25 @@ 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 { + /* 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 :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..2030bfd910 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 = 'xs' }: 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..7c3657618c 100644 --- a/frontend/src/lib/components/graph/GroupNoteArea.svelte +++ b/frontend/src/lib/components/graph/GroupNoteArea.svelte @@ -1,7 +1,7 @@