fix(web): ensure readable text in code blocks before Shiki loads

Quentin Gliech and Claude Opus 4.6 (1M context) created 1 month ago

Set prose-pre:text-foreground so code blocks have proper contrast
against bg-muted even when Shiki hasn't loaded yet (no .shiki class).
Previously the text color came from prose-invert which could be
near-white in some contexts.

Also add an UnlabeledCodeBlock story to test this case.

Co-Authored-By: Claude Opus 4.6 (1M context) <[e-mail]>

Change summary

webui2/src/components/content/markdown.stories.tsx | 14 ++++++++++++++
webui2/src/components/content/markdown.tsx         |  4 ++--
2 files changed, 16 insertions(+), 2 deletions(-)

Detailed changes

webui2/src/components/content/markdown.stories.tsx

@@ -93,3 +93,17 @@ The problem was that \`buildQuery()\` wasn't escaping special characters in labe
 Closes #42.`,
   },
 };
+
+export const UnlabeledCodeBlock: Story = {
+  args: {
+    content: `Here is a code block without a language:
+
+\`\`\`
+# Please enter the title and comment message. The first non-empty line will be
+# used as the title. Lines starting with '#' will be ignored.
+# An empty title aborts the operation.
+\`\`\`
+
+And some text after.`,
+  },
+};

webui2/src/components/content/markdown.tsx

@@ -180,11 +180,11 @@ export function Markdown({ content, className, repoContext }: MarkdownProps) {
         "prose prose-sm dark:prose-invert max-w-none",
         // Code blocks: border, rounded corners, fallback bg for non-highlighted blocks.
         // Shiki adds .shiki class which overrides the background via CSS in index.css.
-        "prose-pre:rounded-md prose-pre:border prose-pre:border-border prose-pre:bg-muted prose-pre:text-sm prose-pre:overflow-x-auto",
+        "prose-pre:rounded-md prose-pre:border prose-pre:border-border prose-pre:bg-muted prose-pre:text-foreground prose-pre:text-sm prose-pre:overflow-x-auto",
         // Inline code: muted background pill
         "prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded-sm prose-code:text-sm prose-code:before:content-none prose-code:after:content-none",
         // Reset inline code styles inside highlighted code blocks
-        "prose-pre:prose-code:bg-transparent prose-pre:prose-code:p-0 prose-pre:prose-code:text-inherit",
+        "prose-pre:prose-code:bg-transparent prose-pre:prose-code:p-0",
         "prose-img:inline prose-img:my-0",
         className,
       )}