From 8dc4f5bd0566ffbe9e381e601d61b8e8876df2e1 Mon Sep 17 00:00:00 2001
From: Lawrence Chen <54008264+lawrencecchen@users.noreply.github.com>
Date: Mon, 23 Feb 2026 20:19:45 -0800
Subject: [PATCH] Fix ASCII diagram font rendering on concepts page (#420)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix ASCII diagram rendering: use system mono font for box-drawing chars

Geist Mono renders box-drawing characters (┌─┐│└┘) at double width,
breaking alignment in the concepts page diagram. Use system monospace
fonts (Menlo, Monaco, Consolas) for ascii-variant code blocks, which
handle these characters at correct single width.

* Fix CSS specificity: code element was overriding pre font-family

.docs-content code sets font-family to Geist Mono, which overrides
the system mono font set on the parent pre element. Geist Mono is
loaded with Latin subset only, lacking box-drawing glyphs (U+2500-257F),
so browsers fall back to CJK-aware fonts that render them double-width.

Fix: add font-family: inherit to .docs-content pre code so code
elements inside pre blocks inherit the correct font from their parent.
---
 web/app/components/code-block.tsx | 18 ++++++++++++++----
 web/app/globals.css               |  1 +
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/web/app/components/code-block.tsx b/web/app/components/code-block.tsx
index e915e9d6..e31537d6 100644
--- a/web/app/components/code-block.tsx
+++ b/web/app/components/code-block.tsx
@@ -48,11 +48,21 @@ export async function CodeBlock({
         </div>
       )}
       <pre
-        className={`bg-code-bg border border-border px-4 py-3 overflow-x-auto text-[13px] ${lineHeightClass} font-mono ${
-          title ? "rounded-b-lg" : "rounded-lg"
-        }`}
+        className={`bg-code-bg border border-border px-4 py-3 overflow-x-auto text-[13px] ${lineHeightClass} ${
+          variant === "ascii" ? "" : "font-mono "
+        }${title ? "rounded-b-lg" : "rounded-lg"}`}
+        style={
+          variant === "ascii"
+            ? {
+                fontFamily:
+                  "Menlo, Monaco, Consolas, 'Courier New', monospace",
+              }
+            : undefined
+        }
       >
-        <code>{children}</code>
+        <code style={variant === "ascii" ? { fontFamily: "inherit" } : undefined}>
+          {children}
+        </code>
       </pre>
     </div>
   );
diff --git a/web/app/globals.css b/web/app/globals.css
index a10df622..0ecea6bb 100644
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -168,6 +168,7 @@ body {
   background: none;
   padding: 0;
   font-size: 1em;
+  font-family: inherit;
 }
 
 /* Shiki dual theme */