aevgarik/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle markdown code blocks: dark background, smaller font, compact padding

Browse Source 
- Switch code block background from transparent accent to dark (#1e1e2e) with
  light text (#cdd6f4) for better readability in both light and dark modes
- Reduce code font size from 0.84em to 0.78em
- Compact padding and margins on pre blocks
- Hide MDXEditor code block toolbar by default, show on hover/focus to prevent
  overlap with code content on mobile
- Use horizontal scroll instead of word-wrap for code blocks to preserve formatting

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta
2026-03-15 10:48:27 -05:00
parent aea133ff9f
commit fe0d7d029a
2 changed files with 37 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 (
<div
className={cn(
"paperclip-markdown prose prose-sm max-w-none break-words overflow-hidden prose-pre:whitespace-pre-wrap prose-pre:break-words prose-code:break-all",
"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]",
theme === "dark" && "prose-invert",
className,
)}

46
ui/src/index.css
View File

@@ -411,30 +411,56 @@
.paperclip-mdxeditor-content code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.84em;
font-size: 0.78em;
}
.paperclip-mdxeditor-content pre {
margin: 0.5rem 0;
padding: 0.45rem 0.55rem;
border: 1px solid var(--border);
margin: 0.4rem 0;
padding: 0.5rem 0.65rem;
border: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent);
border-radius: calc(var(--radius) - 3px);
background: color-mix(in oklab, var(--accent) 50%, transparent);
background: #1e1e2e;
color: #cdd6f4;
overflow-x: auto;
}
/* MDXEditor code block language selector – keep it out of the way on small screens */
.paperclip-mdxeditor-content [class*="_codeMirrorWrapper_"] {
position: relative;
}
.paperclip-mdxeditor-content [class*="_codeMirrorToolbar_"],
.paperclip-mdxeditor-content [class*="_codeBlockToolbar_"] {
position: absolute;
top: 0.25rem;
right: 0.25rem;
z-index: 2;
opacity: 0;
transition: opacity 150ms ease;
}
.paperclip-mdxeditor-content [class*="_codeMirrorWrapper_"]:hover [class*="_codeMirrorToolbar_"],
.paperclip-mdxeditor-content [class*="_codeMirrorWrapper_"]:hover [class*="_codeBlockToolbar_"],
.paperclip-mdxeditor-content [class*="_codeMirrorWrapper_"]:focus-within [class*="_codeMirrorToolbar_"],
.paperclip-mdxeditor-content [class*="_codeMirrorWrapper_"]:focus-within [class*="_codeBlockToolbar_"] {
opacity: 1;
}
/* Rendered markdown code blocks & inline code (prose/MarkdownBody context).
Matches the editor theme so rendered code looks consistent. */
Dark theme code blocks with compact sizing. */
.prose pre {
border: 1px solid var(--border);
border: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent);
border-radius: calc(var(--radius) - 3px);
background-color: color-mix(in oklab, var(--accent) 50%, transparent);
color: var(--foreground);
background-color: #1e1e2e;
color: #cdd6f4;
padding: 0.5rem 0.65rem;
margin: 0.4rem 0;
overflow-x: auto;
}
.prose code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.84em;
font-size: 0.78em;
}
/* Remove backtick pseudo-elements from inline code (prose default adds them) */