Fix mobile code block rendering

packages/app/src/components/diff-viewer.tsx

@@ -189,7 +189,7 @@ const styles = StyleSheet.create((theme) => {
     },
     lineText: {
       fontFamily: Fonts.mono,
-      fontSize: theme.fontSize.xs,
+      fontSize: theme.fontSize.code,
       color: theme.colors.foreground,
       ...(isWeb
         ? {

packages/app/src/components/file-explorer-pane.tsx

@@ -1158,7 +1158,7 @@ const styles = StyleSheet.create((theme) => ({
   codeText: {
     color: theme.colors.foreground,
     fontFamily: Fonts.mono,
-    fontSize: theme.fontSize.sm,
+    fontSize: theme.fontSize.code,
     flexShrink: 0,
   },
   previewImageScrollContent: {

packages/app/src/components/file-pane.tsx

@@ -172,15 +172,15 @@ const codeLineStyles = StyleSheet.create((theme) => ({
   gutterText: {
     color: theme.colors.foreground,
     fontFamily: Fonts.mono,
-    fontSize: theme.fontSize.sm,
+    fontSize: theme.fontSize.code,
-    lineHeight: theme.fontSize.sm * 1.45,
+    lineHeight: theme.fontSize.code * 1.45,
     opacity: 0.4,
     userSelect: "none",
   },
   lineText: {
     fontFamily: Fonts.mono,
-    fontSize: theme.fontSize.sm,
+    fontSize: theme.fontSize.code,
-    lineHeight: theme.fontSize.sm * 1.45,
+    lineHeight: theme.fontSize.code * 1.45,
     flex: 1,
   },
 }));
@@ -216,9 +216,9 @@ function FilePreviewBody({
 
   const gutterWidth = useMemo(() => {
     if (!highlightedLines) return 0;
-    return lineNumberGutterWidth(highlightedLines.length, theme.fontSize.sm);
+    return lineNumberGutterWidth(highlightedLines.length, theme.fontSize.code);
-  }, [highlightedLines, theme.fontSize.sm]);
+  }, [highlightedLines, theme.fontSize.code]);
-  const lineHeight = theme.fontSize.sm * 1.45;
+  const lineHeight = theme.fontSize.code * 1.45;
   const lineSelection = useMemo(() => {
     if (!highlightedLines) {
       return null;

packages/app/src/components/highlighted-code-block.tsx

@@ -1,12 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {
+import { Pressable, View, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
-  Pressable,
-  Text,
-  View,
-  type StyleProp,
-  type TextStyle,
-  type ViewStyle,
-} from "react-native";
 import { StyleSheet } from "react-native-unistyles";
 import { MarkdownTextSpan } from "@/components/markdown-text";
 import * as Clipboard from "expo-clipboard";
@@ -47,6 +40,10 @@ function fenceLanguageToExtension(info: string | null | undefined): string | nul
   return LANGUAGE_ALIASES[normalized] ?? normalized;
 }
 
+function stripTerminalFenceNewline(code: string): string {
+  return code.endsWith("\n") ? code.slice(0, -1) : code;
+}
+
 // Cross-instance cache for tokenized code blocks. Tokenization is
 // theme-independent (colors are applied at render time), so the key is just
 // (language, code). Bounded by entry count — 200 is generous for a chat
@@ -88,23 +85,24 @@ export const HighlightedCodeBlock = React.memo(function HighlightedCodeBlock({
     () => splitFenceStyle(inheritedStyles, textStyle),
     [inheritedStyles, textStyle],
   );
+  const renderedCode = useMemo(() => stripTerminalFenceNewline(code), [code]);
 
   const keyedLines = useMemo<KeyedLine[] | null>(() => {
     const ext = fenceLanguageToExtension(language);
     if (!ext) return null;
-    const cacheKey = `${ext}:${code}`;
+    const cacheKey = `${ext}:${renderedCode}`;
     const cached = tokenizationCache.get(cacheKey);
     if (cached) return cached;
     let tokenizedLines: HighlightToken[][];
     try {
-      tokenizedLines = highlightCode(code, `x.${ext}`);
+      tokenizedLines = highlightCode(renderedCode, `x.${ext}`);
     } catch {
       return null;
     }
     const result = tokenizedLines.map(toKeyedLine);
     tokenizationCache.set(cacheKey, result);
     return result;
-  }, [code, language]);
+  }, [renderedCode, language]);
 
   const isCompact = useIsCompactFormFactor();
   const [isHovered, setIsHovered] = useState(false);
@@ -120,18 +118,9 @@ export const HighlightedCodeBlock = React.memo(function HighlightedCodeBlock({
       onPointerLeave={handlePointerLeave}
     >
       {keyedLines ? (
-        <MarkdownTextSpan style={innerTextStyle}>
+        <MarkdownTextSpan style={innerTextStyle}>{renderCodeSegments(keyedLines)}</MarkdownTextSpan>
-          {keyedLines.map((line, lineIndex) => (
-            <React.Fragment key={line.key}>
-              {lineIndex > 0 ? "\n" : null}
-              {line.tokens.map(({ key, token }) => (
-                <TokenSpan key={key} token={token} />
-              ))}
-            </React.Fragment>
-          ))}
-        </MarkdownTextSpan>
       ) : (
-        <MarkdownTextSpan style={innerTextStyle}>{code}</MarkdownTextSpan>
+        <MarkdownTextSpan style={innerTextStyle}>{renderedCode}</MarkdownTextSpan>
       )}
       <CopyButton getCode={getCode} visible={controlsVisible} />
     </View>
@@ -158,13 +147,38 @@ function toKeyedLine(tokens: HighlightToken[], lineIndex: number): KeyedLine {
   };
 }
 
+function renderCodeSegments(keyedLines: KeyedLine[]): React.ReactNode[] {
+  const segments: React.ReactNode[] = [];
+  for (let lineIndex = 0; lineIndex < keyedLines.length; lineIndex += 1) {
+    const line = keyedLines[lineIndex];
+    if (lineIndex > 0) {
+      segments.push(<CodeTextSpan key={`${line.key}-newline`} text={"\n"} />);
+    }
+    for (const { key, token } of line.tokens) {
+      segments.push(<TokenSpan key={`${line.key}-${key}`} token={token} />);
+    }
+  }
+  return segments;
+}
+
 interface TokenSpanProps {
   token: HighlightToken;
 }
 
 const TokenSpan = React.memo(function TokenSpan({ token }: TokenSpanProps) {
-  if (!token.style) return token.text;
+  return (
-  return <Text style={syntaxTokenStyleFor(token.style)}>{token.text}</Text>;
+    <MarkdownTextSpan style={token.style ? syntaxTokenStyleFor(token.style) : undefined}>
+      {token.text}
+    </MarkdownTextSpan>
+  );
+});
+
+interface CodeTextSpanProps {
+  text: string;
+}
+
+const CodeTextSpan = React.memo(function CodeTextSpan({ text }: CodeTextSpanProps) {
+  return <MarkdownTextSpan>{text}</MarkdownTextSpan>;
 });
 
 interface SplitStyles {
@@ -180,6 +194,7 @@ function splitFenceStyle(inheritedStyles: TextStyle, textStyle: TextStyle): Spli
   const textOnly: TextStyle = { ...WEB_SELECTABLE };
   if (fontFamily !== undefined) textOnly.fontFamily = fontFamily;
   if (fontSize !== undefined) textOnly.fontSize = fontSize;
+  if (fontSize !== undefined) textOnly.lineHeight = Math.round(fontSize * 1.45);
   if (color !== undefined) textOnly.color = color;
   return {
     containerStyle: [box as ViewStyle, CONTAINER_BASE],

packages/app/src/components/message.tsx

@@ -1975,7 +1975,7 @@ const activityLogStylesheet = StyleSheet.create((theme) => ({
   },
   metadataText: {
     color: theme.colors.foreground,
-    fontSize: theme.fontSize.xs,
+    fontSize: theme.fontSize.code,
     fontFamily: Fonts.mono,
     lineHeight: 16,
   },

packages/app/src/components/provider-diagnostic-sheet.tsx

@@ -608,7 +608,7 @@ const sheetStyles = StyleSheet.create((theme) => ({
   },
   monoHint: {
     fontFamily: Fonts.mono,
-    fontSize: theme.fontSize.xs,
+    fontSize: theme.fontSize.code,
     color: theme.colors.foregroundMuted,
     flexShrink: 0,
   },
@@ -717,7 +717,7 @@ const sheetStyles = StyleSheet.create((theme) => ({
   },
   codeText: {
     fontFamily: Fonts.mono,
-    fontSize: theme.fontSize.xs,
+    fontSize: theme.fontSize.code,
     color: theme.colors.foreground,
     lineHeight: 18,
   },

packages/app/src/components/tool-call-details.tsx

@@ -844,7 +844,7 @@ const styles = StyleSheet.create((theme) => {
     },
     scrollText: {
       fontFamily: Fonts.mono,
-      fontSize: theme.fontSize.xs,
+      fontSize: theme.fontSize.code,
       color: theme.colors.foreground,
       lineHeight: 18,
       ...(isWeb
@@ -859,7 +859,7 @@ const styles = StyleSheet.create((theme) => {
     },
     subAgentSessionText: {
       fontFamily: Fonts.mono,
-      fontSize: theme.fontSize.xs,
+      fontSize: theme.fontSize.code,
       color: theme.colors.foregroundMuted,
       lineHeight: 18,
       marginBottom: theme.spacing[2],
@@ -875,13 +875,13 @@ const styles = StyleSheet.create((theme) => {
     },
     subAgentActionTool: {
       fontFamily: Fonts.mono,
-      fontSize: theme.fontSize.xs,
+      fontSize: theme.fontSize.code,
       color: theme.colors.foregroundMuted,
       lineHeight: 18,
     },
     subAgentActionSummary: {
       fontFamily: Fonts.mono,
-      fontSize: theme.fontSize.xs,
+      fontSize: theme.fontSize.code,
       color: theme.colors.foreground,
       lineHeight: 18,
     },

packages/app/src/git/diff-pane.tsx

@@ -944,7 +944,7 @@ function DiffFileBody({
             hunk.newStart + hunk.newCount,
           );
         }
-        const gutterWidth = lineNumberGutterWidth(maxLineNo, theme.fontSize.xs);
+        const gutterWidth = lineNumberGutterWidth(maxLineNo, theme.fontSize.code);
 
         if (layout === "split") {
           const rows = buildSplitDiffRows(file);
@@ -2475,7 +2475,7 @@ const styles = StyleSheet.create((theme) => ({
     width: "100%",
     textAlign: "right",
     paddingRight: theme.spacing[2],
-    fontSize: theme.fontSize.xs,
+    fontSize: theme.fontSize.code,
     lineHeight: theme.lineHeight.diff,
     fontFamily: Fonts.mono,
     color: theme.colors.foregroundMuted,
@@ -2490,7 +2490,7 @@ const styles = StyleSheet.create((theme) => ({
   diffLineText: {
     flex: 1,
     paddingRight: theme.spacing[3],
-    fontSize: theme.fontSize.xs,
+    fontSize: theme.fontSize.code,
     lineHeight: theme.lineHeight.diff,
     fontFamily: Fonts.mono,
     color: theme.colors.foreground,

packages/app/src/panels/setup-panel.tsx

@@ -541,7 +541,7 @@ const styles = StyleSheet.create((theme) => ({
   },
   logText: {
     fontFamily: Fonts.mono,
-    fontSize: theme.fontSize.sm,
+    fontSize: theme.fontSize.code,
     lineHeight: 20,
     color: theme.colors.foreground,
   },

packages/app/src/screens/startup-splash-screen.tsx

@@ -234,7 +234,7 @@ const styles = StyleSheet.create((theme) => ({
   },
   errorMessage: {
     color: theme.colors.destructive,
-    fontSize: theme.fontSize.sm,
+    fontSize: theme.fontSize.code,
     lineHeight: 20,
     fontFamily: Fonts.mono,
   },
@@ -258,7 +258,7 @@ const styles = StyleSheet.create((theme) => ({
   },
   logsText: {
     fontFamily: Fonts.mono,
-    fontSize: theme.fontSize.xs,
+    fontSize: theme.fontSize.code,
     color: theme.colors.foreground,
     lineHeight: 18,
     ...(isWeb

packages/app/src/styles/markdown-styles.ts

@@ -170,7 +170,7 @@ export function createMarkdownStyles(theme: Theme) {
       borderRadius: theme.borderRadius.md,
       borderWidth: 0,
       fontFamily: Fonts.mono,
-      fontSize: theme.fontSize.sm,
+      fontSize: theme.fontSize.base - 3,
     },
 
     code_block: {
@@ -180,7 +180,7 @@ export function createMarkdownStyles(theme: Theme) {
       padding: theme.spacing[3],
       borderRadius: theme.borderRadius.md,
       fontFamily: Fonts.mono,
-      fontSize: theme.fontSize.sm,
+      fontSize: theme.fontSize.code,
       marginVertical: theme.spacing[2],
     },
 
@@ -193,7 +193,7 @@ export function createMarkdownStyles(theme: Theme) {
       borderWidth: 1,
       borderColor: theme.colors.border,
       fontFamily: Fonts.mono,
-      fontSize: theme.fontSize.sm,
+      fontSize: theme.fontSize.code,
       marginVertical: theme.spacing[3],
     },
 
@@ -388,18 +388,18 @@ export function createCompactMarkdownStyles(theme: Theme) {
 
     code_inline: {
       ...baseStyles.code_inline,
-      fontSize: theme.fontSize.xs,
+      fontSize: theme.fontSize.sm - 3,
     },
 
     code_block: {
       ...baseStyles.code_block,
-      fontSize: theme.fontSize.xs,
+      fontSize: theme.fontSize.code,
       padding: theme.spacing[2],
     },
 
     fence: {
       ...baseStyles.fence,
-      fontSize: theme.fontSize.xs,
+      fontSize: theme.fontSize.code,
       padding: theme.spacing[2],
     },
   };

packages/app/src/styles/theme.ts

@@ -434,6 +434,7 @@ export const SPACING = {
 
 export const FONT_SIZE = {
   xs: 12,
+  code: 12,
   sm: 14,
   base: 16,
   lg: 18,