From 597c4b1d457d2207dee01863c6ade1078d7f6c83 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Sun, 15 Mar 2026 14:27:34 -0500
Subject: [PATCH] Fix code block styles with robust prose overrides

Previous attempt was being overridden by Tailwind prose/prose-invert
CSS variables. This fix:

- Overrides --tw-prose-pre-bg and --tw-prose-invert-pre-bg CSS variables
  on .paperclip-markdown to force dark background in both modes
- Uses .paperclip-markdown pre with \!important for bulletproof overrides
- Removes conflicting prose-pre: utility classes from MarkdownBody
- Adds explicit pre code reset (inherit color/size, no background)
- Verified visually with Playwright at desktop and mobile viewports

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/MarkdownBody.tsx |  2 +-
 ui/src/index.css                   | 36 +++++++++++++++++++++---------
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/ui/src/components/MarkdownBody.tsx b/ui/src/components/MarkdownBody.tsx
index 1242fa8a..683adc53 100644
--- a/ui/src/components/MarkdownBody.tsx
+++ b/ui/src/components/MarkdownBody.tsx
@@ -117,7 +117,7 @@ export function MarkdownBody({ children, className }: MarkdownBodyProps) {
   return (
     <div
       className={cn(
-        "paperclip-markdown prose prose-sm max-w-none break-words overflow-hidden prose-pre:my-1.5 prose-pre:px-2.5 prose-pre:py-2 prose-pre:overflow-x-auto prose-pre:whitespace-pre prose-code:break-all prose-code:text-[inherit]",
+        "paperclip-markdown prose prose-sm max-w-none break-words overflow-hidden",
         theme === "dark" && "prose-invert",
         className,
       )}
diff --git a/ui/src/index.css b/ui/src/index.css
index a2a3b794..1172f103 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -448,22 +448,38 @@
 }
 
 /* Rendered markdown code blocks & inline code (prose/MarkdownBody context).
-   Dark theme code blocks with compact sizing. */
-.prose pre {
-  border: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent);
-  border-radius: calc(var(--radius) - 3px);
-  background-color: #1e1e2e;
-  color: #cdd6f4;
-  padding: 0.5rem 0.65rem;
-  margin: 0.4rem 0;
-  overflow-x: auto;
+   Dark theme code blocks with compact sizing.
+   Override prose CSS variables so prose-invert can't revert to defaults. */
+.paperclip-markdown {
+  --tw-prose-pre-bg: #1e1e2e;
+  --tw-prose-pre-code: #cdd6f4;
+  --tw-prose-invert-pre-bg: #1e1e2e;
+  --tw-prose-invert-pre-code: #cdd6f4;
 }
 
-.prose code {
+.paperclip-markdown pre {
+  border: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent) !important;
+  border-radius: calc(var(--radius) - 3px) !important;
+  background-color: #1e1e2e !important;
+  color: #cdd6f4 !important;
+  padding: 0.5rem 0.65rem !important;
+  margin: 0.4rem 0 !important;
+  font-size: 0.78em !important;
+  overflow-x: auto;
+  white-space: pre;
+}
+
+.paperclip-markdown code {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   font-size: 0.78em;
 }
 
+.paperclip-markdown pre code {
+  font-size: inherit;
+  color: inherit;
+  background: none;
+}
+
 /* Remove backtick pseudo-elements from inline code (prose default adds them) */
 .prose code::before,
 .prose code::after {