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>
This commit is contained in:
Dotta
2026-03-15 14:27:34 -05:00
parent 6f931b8405
commit 597c4b1d45
2 changed files with 27 additions and 11 deletions

View File

@@ -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,
)}