From 7c0849fe2e449c25ff43a1d5993f6f75b2be3a59 Mon Sep 17 00:00:00 2001
From: Jacob <589761+jvzijp@users.noreply.github.com>
Date: Fri, 10 Apr 2026 02:52:41 +0200
Subject: [PATCH] fix(web): harmonize typography in chat messages and code
 blocks (#1861)

---
 apps/web/src/components/ChatMarkdown.tsx          |  2 +-
 apps/web/src/components/chat/MessagesTimeline.tsx | 14 +++++++-------
 apps/web/src/index.css                            |  3 +--
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/components/ChatMarkdown.tsx b/apps/web/src/components/ChatMarkdown.tsx
index 327e77e57c484b909d66eff00240e0f866396ad7..366f92315793a94aad34850ea5ce34e66a3522de 100644
--- a/apps/web/src/components/ChatMarkdown.tsx
+++ b/apps/web/src/components/ChatMarkdown.tsx
@@ -165,7 +165,7 @@ function MarkdownCodeBlock({ code, children }: { code: string; children: ReactNo
   );
 
   return (
-    <div className="chat-markdown-codeblock">
+    <div className="chat-markdown-codeblock leading-snug">
       <button
         type="button"
         className="chat-markdown-copy-button"
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 510082432860105dc840598712b5d6aaaf350c65..d733fb4769559f1bb862d3326fb79d7ace7ad6ee 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -428,7 +428,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
                       </Button>
                     )}
                   </div>
-                  <p className="text-right text-[10px] text-muted-foreground/30">
+                  <p className="text-right text-xs text-muted-foreground/50">
                     {formatTimestamp(row.message.createdAt, timestampFormat)}
                   </p>
                 </div>
@@ -515,7 +515,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
                     </div>
                   );
                 })()}
-                <p className="mt-1.5 text-[10px] text-muted-foreground/30">
+                <p className="mt-1.5 text-xs text-muted-foreground/50">
                   {formatMessageMeta(
                     row.message.createdAt,
                     row.message.streaming
@@ -703,7 +703,7 @@ const UserMessageBody = memo(function UserMessageBody(props: {
         }
 
         return (
-          <div className="wrap-break-word whitespace-pre-wrap font-mono text-sm leading-relaxed text-foreground">
+          <div className="whitespace-pre-wrap wrap-break-word text-sm leading-relaxed text-foreground">
             {inlineNodes}
           </div>
         );
@@ -731,7 +731,7 @@ const UserMessageBody = memo(function UserMessageBody(props: {
     }
 
     return (
-      <div className="wrap-break-word whitespace-pre-wrap font-mono text-sm leading-relaxed text-foreground">
+      <div className="whitespace-pre-wrap wrap-break-word text-sm leading-relaxed text-foreground">
         {inlineNodes}
       </div>
     );
@@ -742,9 +742,9 @@ const UserMessageBody = memo(function UserMessageBody(props: {
   }
 
   return (
-    <pre className="whitespace-pre-wrap wrap-break-word font-mono text-sm leading-relaxed text-foreground">
+    <div className="whitespace-pre-wrap wrap-break-word text-sm leading-relaxed text-foreground">
       {props.text}
-    </pre>
+    </div>
   );
 });
 
@@ -871,7 +871,7 @@ const SimpleWorkEntryRow = memo(function SimpleWorkEntryRow(props: {
           <div className="max-w-full">
             <p
               className={cn(
-                "truncate text-[11px] leading-5",
+                "truncate text-xs leading-5",
                 workToneClass(workEntry.tone),
                 preview ? "text-muted-foreground/70" : "",
               )}
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 120a3ea5eb232e56e1c2e58d750bc1a7eefb963d..71602ee05e5fc2b0f4b1e912d3751133f761fec5 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -335,8 +335,7 @@ label:has(> select#reasoning-effort) select {
   border: none;
   background: transparent;
   padding: 0;
-  line-height: 1.5;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
 }
 
 .chat-markdown .chat-markdown-codeblock {
-- 
2.54.0