Add scoped typography settings

apps/web/src/components/ChatMarkdown.tsx

@@ -289,7 +289,7 @@ function ChatMarkdown({ text, cwd, isStreaming = false }: ChatMarkdownProps) {
   );
 
   return (
-    <div className="chat-markdown w-full min-w-0 text-sm leading-relaxed text-foreground/80">
+    <div className="chat-markdown app-chat-typography w-full min-w-0 text-foreground/80">
       <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
         {text}
       </ReactMarkdown>

apps/web/src/components/ComposerPromptEditor.tsx

@@ -1093,7 +1093,7 @@ function ComposerPromptEditorInner({
           contentEditable={
             <ContentEditable
               className={cn(
-                "block max-h-[200px] min-h-17.5 w-full overflow-y-auto whitespace-pre-wrap break-words bg-transparent text-[14px] leading-relaxed text-foreground focus:outline-none",
+                "app-chat-typography block max-h-[200px] min-h-17.5 w-full overflow-y-auto whitespace-pre-wrap break-words bg-transparent text-foreground focus:outline-none",
                 className,
               )}
               data-testid="composer-editor"
@@ -1104,7 +1104,7 @@ function ComposerPromptEditorInner({
           }
           placeholder={
             terminalContexts.length > 0 ? null : (
-              <div className="pointer-events-none absolute inset-0 text-[14px] leading-relaxed text-muted-foreground/35">
+              <div className="app-chat-typography pointer-events-none absolute inset-0 text-muted-foreground/35">
                 {placeholder}
               </div>
             )

apps/web/src/components/chat/MessagesTimeline.logic.ts

@@ -3,6 +3,7 @@ import { type TimelineEntry, type WorkLogEntry } from "../../session-logic";
 import { buildTurnDiffTree, type TurnDiffTreeNode } from "../../lib/turnDiffTree";
 import { type ChatMessage, type ProposedPlan, type TurnDiffSummary } from "../../types";
 import { estimateTimelineMessageHeight } from "../timelineHeight";
+import { type TypographySettings } from "../../typography";
 
 export const MAX_VISIBLE_WORK_LOG_ENTRIES = 6;
 
@@ -135,6 +136,7 @@ export function estimateMessagesTimelineRowHeight(
     timelineWidthPx: number | null;
     expandedWorkGroups?: Readonly<Record<string, boolean>>;
     turnDiffSummaryByAssistantMessageId?: ReadonlyMap<MessageId, TurnDiffSummary>;
+    typography?: TypographySettings;
   },
 ): number {
   switch (row.kind) {
@@ -147,6 +149,7 @@ export function estimateMessagesTimelineRowHeight(
     case "message": {
       let estimate = estimateTimelineMessageHeight(row.message, {
         timelineWidthPx: input.timelineWidthPx,
+        typography: input.typography,
       });
       const turnDiffSummary = input.turnDiffSummaryByAssistantMessageId?.get(row.message.id);
       if (turnDiffSummary && turnDiffSummary.files.length > 0) {

apps/web/src/components/chat/MessagesTimeline.tsx

@@ -56,6 +56,7 @@ import {
 import { cn } from "~/lib/utils";
 import { type TimestampFormat } from "@t3tools/contracts/settings";
 import { formatTimestamp } from "../../timestampFormat";
+import { useTypographySettings } from "../../hooks/useTypographySettings";
 import {
   buildInlineTerminalContextText,
   formatInlineTerminalContextLabel,
@@ -123,6 +124,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
   workspaceRoot,
   onVirtualizerSnapshot,
 }: MessagesTimelineProps) {
+  const typography = useTypographySettings();
   const timelineRootRef = useRef<HTMLDivElement | null>(null);
   const [timelineWidthPx, setTimelineWidthPx] = useState<number | null>(null);
 
@@ -223,6 +225,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
         expandedWorkGroups,
         timelineWidthPx,
         turnDiffSummaryByAssistantMessageId,
+        typography,
       });
     },
     measureElement: measureVirtualElement,
@@ -232,7 +235,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
   useEffect(() => {
     if (timelineWidthPx === null) return;
     rowVirtualizer.measure();
-  }, [rowVirtualizer, timelineWidthPx]);
+  }, [rowVirtualizer, timelineWidthPx, typography]);
   useEffect(() => {
     rowVirtualizer.shouldAdjustScrollPositionOnItemSizeChange = (item, _delta, instance) => {
       const viewportHeight = instance.scrollRect?.height ?? 0;
@@ -700,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="app-user-message-typography wrap-break-word whitespace-pre-wrap text-foreground">
             {inlineNodes}
           </div>
         );
@@ -728,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="app-user-message-typography wrap-break-word whitespace-pre-wrap text-foreground">
         {inlineNodes}
       </div>
     );
@@ -739,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="app-user-message-typography whitespace-pre-wrap wrap-break-word text-foreground">
       {props.text}
-    </pre>
+    </div>
   );
 });