From fe9f312cfc3021fca8b90adcddd6d4c62e4b975d Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Tue, 3 Mar 2026 09:28:49 -0600
Subject: [PATCH] fix(ui): ensure rendered code blocks match editor styling for
 GFM support

Override Tailwind Typography's hardcoded code block colors with app theme
variables so fenced code blocks (```) render consistently between the
MDXEditor and MarkdownBody views. Also styles inline code, removes the
default backtick pseudo-elements, and adds mention chip styles for the
rendered prose context.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 ui/src/index.css | 44 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/ui/src/index.css b/ui/src/index.css
index 6026dc59..cacbdb18 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -387,6 +387,50 @@
   overflow-x: auto;
 }
 
+/* Rendered markdown code blocks & inline code (prose/MarkdownBody context).
+   Matches the editor theme so rendered code looks consistent. */
+.prose pre {
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) - 3px);
+  background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+  color: var(--foreground);
+}
+
+.prose code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.84em;
+}
+
+/* Remove backtick pseudo-elements from inline code (prose default adds them) */
+.prose code::before,
+.prose code::after {
+  content: none;
+}
+
+/* Inline code background (not inside a code block) */
+.prose :not(pre) > code {
+  background-color: color-mix(in oklab, var(--accent) 60%, transparent);
+  padding: 0.15em 0.35em;
+  border-radius: 3px;
+  font-weight: 500;
+}
+
+/* Project mention chips rendered inside MarkdownBody */
+a.paperclip-project-mention-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 0 0.1rem;
+  padding: 0.05rem 0.45rem;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  font-size: 0.75rem;
+  line-height: 1.3;
+  text-decoration: none;
+  vertical-align: baseline;
+  white-space: nowrap;
+}
+
 /* Keep MDXEditor popups above app dialogs when editor is inside a modal. */
 .paperclip-mdxeditor-scope [class*="_dialogOverlay_"],
 .paperclip-mdxeditor [class*="_dialogOverlay_"] {