hanh.tonguyen/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix code block styles with robust prose overrides

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/components/MarkdownBody.tsx
View File

@@ -117,7 +117,7 @@ export function MarkdownBody({ children, className }: MarkdownBodyProps) {
return ( return (
<div <div
className={cn( 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", theme === "dark" && "prose-invert",
className, className,
)} )}

36
ui/src/index.css
View File

@@ -448,22 +448,38 @@
} }
/* Rendered markdown code blocks & inline code (prose/MarkdownBody context). /* Rendered markdown code blocks & inline code (prose/MarkdownBody context).
Dark theme code blocks with compact sizing. */ Dark theme code blocks with compact sizing.
.prose pre { Override prose CSS variables so prose-invert can't revert to defaults. */
border: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent); .paperclip-markdown {
border-radius: calc(var(--radius) - 3px); --tw-prose-pre-bg: #1e1e2e;
background-color: #1e1e2e; --tw-prose-pre-code: #cdd6f4;
color: #cdd6f4; --tw-prose-invert-pre-bg: #1e1e2e;
padding: 0.5rem 0.65rem; --tw-prose-invert-pre-code: #cdd6f4;
margin: 0.4rem 0;
overflow-x: auto;
} }
.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-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.78em; 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) */ /* Remove backtick pseudo-elements from inline code (prose default adds them) */
.prose code::before, .prose code::before,
.prose code::after { .prose code::after {