From fe0d7d029ac42d185e4452509764e22a6d5d9f1b Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Sun, 15 Mar 2026 10:48:27 -0500
Subject: [PATCH] Restyle markdown code blocks: dark background, smaller font,
 compact padding

- 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>
---
 ui/src/components/MarkdownBody.tsx |  2 +-
 ui/src/index.css                   | 46 +++++++++++++++++++++++-------
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/ui/src/components/MarkdownBody.tsx b/ui/src/components/MarkdownBody.tsx
index ca9624c0..1242fa8a 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: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,
       )}
diff --git a/ui/src/index.css b/ui/src/index.css
index 3ba08932..3b8a5af6 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -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) */