From 7652fe214d8be9778a9f5ab47f5c855e295d22ea Mon Sep 17 00:00:00 2001
From: viettranx <viettranx@gmail.com>
Date: Sun, 8 Mar 2026 07:55:35 +0700
Subject: [PATCH] fix(ui): strip outer pre from ReactMarkdown to fix code block
 styling

ReactMarkdown wraps fenced code blocks in <pre><code>, but CodeBlock
renders its own <pre>. The outer <pre> inherited prose dark background,
causing nested styling conflicts. Override pre component to render
fragment, use not-prose on CodeBlock to fully escape prose styling.
---
 ui/web/src/components/shared/markdown-renderer.tsx | 10 +++++++---
 ui/web/src/index.css                               |  9 ---------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/ui/web/src/components/shared/markdown-renderer.tsx b/ui/web/src/components/shared/markdown-renderer.tsx
index 31cab6eb..3a685976 100644
--- a/ui/web/src/components/shared/markdown-renderer.tsx
+++ b/ui/web/src/components/shared/markdown-renderer.tsx
@@ -18,8 +18,8 @@ function CodeBlock({
   const lang = className?.replace("language-", "") ?? "";
 
   return (
-    <div className="group relative overflow-hidden rounded-md">
-      <div className="flex items-center justify-between rounded-t-md bg-muted px-3 py-1 text-xs text-muted-foreground">
+    <div className="not-prose group relative my-4 overflow-hidden rounded-md border">
+      <div className="flex items-center justify-between bg-muted px-3 py-1 text-xs text-muted-foreground">
         <span>{lang || "code"}</span>
         <button
           type="button"
@@ -30,7 +30,7 @@ function CodeBlock({
           {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
         </button>
       </div>
-      <pre className="!mt-0 !rounded-t-none !bg-muted/50 !text-foreground overflow-x-auto">
+      <pre className="overflow-x-auto bg-muted/50 p-4 text-sm text-foreground">
         <code className={className}>{children}</code>
       </pre>
     </div>
@@ -55,6 +55,10 @@ export function MarkdownRenderer({ content, className }: MarkdownRendererProps)
         remarkPlugins={[remarkGfm]}
         rehypePlugins={[rehypeHighlight]}
         components={{
+          pre({ children }) {
+            // Strip the outer <pre> from ReactMarkdown — CodeBlock renders its own
+            return <>{children}</>;
+          },
           code({ className, children, ...props }) {
             const isInline = !className;
             if (isInline) {
diff --git a/ui/web/src/index.css b/ui/web/src/index.css
index f051fe38..2ec90831 100644
--- a/ui/web/src/index.css
+++ b/ui/web/src/index.css
@@ -136,13 +136,4 @@
     font-family: system-ui, -apple-system, sans-serif;
   }
 
-  /* Override prose's dark pre background with theme-aware colors */
-  .prose pre {
-    background-color: var(--muted);
-    color: var(--foreground);
-  }
-  .prose pre code,
-  .prose pre code.hljs {
-    color: inherit;
-  }
 }