From 83f325c58667498cc10db0d6d6688048d4145d90 Mon Sep 17 00:00:00 2001
From: Jiayuan <forrestchang7@gmail.com>
Date: Mon, 30 Mar 2026 23:27:09 +0800
Subject: [PATCH] fix(ui): apply mono font directly to code/pre elements

Browser UA stylesheet sets font-family: monospace on <code> and <pre>,
overriding the inherited Geist Mono from parent containers. Apply
font-mono explicitly on these elements so they use the project's
monospace font instead of the browser default.
---
 apps/web/components/common/rich-text-editor.css |  1 +
 apps/web/components/markdown/CodeBlock.tsx      | 10 +++++-----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/common/rich-text-editor.css b/apps/web/components/common/rich-text-editor.css
index 599a9555..47c3c416 100644
--- a/apps/web/components/common/rich-text-editor.css
+++ b/apps/web/components/common/rich-text-editor.css
@@ -94,6 +94,7 @@
 
 /* Code blocks */
 .rich-text-editor pre {
+  font-family: var(--font-mono, ui-monospace, monospace);
   background: var(--muted);
   border-radius: var(--radius);
   padding: 0.75rem 1rem;
diff --git a/apps/web/components/markdown/CodeBlock.tsx b/apps/web/components/markdown/CodeBlock.tsx
index 6bdd4d2c..ef69afb4 100644
--- a/apps/web/components/markdown/CodeBlock.tsx
+++ b/apps/web/components/markdown/CodeBlock.tsx
@@ -141,7 +141,7 @@ export function CodeBlock({
   if (mode === 'terminal') {
     return (
       <pre className={cn('font-mono text-sm whitespace-pre-wrap', className)}>
-        <code>{code}</code>
+        <code className="font-mono">{code}</code>
       </pre>
     )
   }
@@ -151,7 +151,7 @@ export function CodeBlock({
     if (isLoading || !highlighted) {
       return (
         <pre className={cn('font-mono text-sm whitespace-pre-wrap', className)}>
-          <code>{code}</code>
+          <code className="font-mono">{code}</code>
         </pre>
       )
     }
@@ -159,7 +159,7 @@ export function CodeBlock({
     return (
       <div
         className={cn(
-          'font-mono text-sm [&_pre]:!bg-transparent [&_pre]:!p-0 [&_pre]:whitespace-pre-wrap [&_pre]:break-all [&_code]:!bg-transparent',
+          'font-mono text-sm [&_pre]:!bg-transparent [&_pre]:!p-0 [&_pre]:whitespace-pre-wrap [&_pre]:break-all [&_code]:!bg-transparent [&_code]:font-mono [&_pre]:font-mono',
           className
         )}
         dangerouslySetInnerHTML={{ __html: highlighted }}
@@ -206,11 +206,11 @@ export function CodeBlock({
       <div className="p-3 overflow-x-auto">
         {isLoading || !highlighted ? (
           <pre className="font-mono text-sm whitespace-pre-wrap break-all">
-            <code>{code}</code>
+            <code className="font-mono">{code}</code>
           </pre>
         ) : (
           <div
-            className="font-mono text-sm [&_pre]:!bg-transparent [&_pre]:!m-0 [&_pre]:!p-0 [&_pre]:whitespace-pre-wrap [&_pre]:break-all [&_code]:!bg-transparent"
+            className="font-mono text-sm [&_pre]:!bg-transparent [&_pre]:!m-0 [&_pre]:!p-0 [&_pre]:whitespace-pre-wrap [&_pre]:break-all [&_code]:!bg-transparent [&_code]:font-mono [&_pre]:font-mono"
             dangerouslySetInnerHTML={{ __html: highlighted }}
           />
         )}