Code blocks not horizontally scrollable - text wraps and clips

[begna112]

Description

Markdown code blocks (fenced with triple backticks) are not horizontally scrollable on mobile. Long lines wrap or get clipped at the right edge of the block, making formatted content like ASCII diagrams, wide tables, and long code lines impossible to view fully.

The implementation has a horizontal ScrollView (MarkdownView.tsx line 188) that should enable scrolling, but two bugs prevent it from working.

Root Cause

1. SimpleSyntaxHighlighter text wraps instead of expanding horizontally

SimpleSyntaxHighlighter.tsx (lines 34-58) renders code as nested <Text> elements inside a <View>:

<View>                    ← no width constraint, no flexShrink: 0
  <Text style={...}>     ← no width constraint, wraps by default
    {tokens.map(token => <Text>{token.text}</Text>)}
  </Text>
</View>

In React Native, <Text> wraps by default to fit its parent container width. The outer <View> has no constraints to force it wider than the ScrollView viewport, so the text wraps within the viewport width and there's never any overflow content to scroll to.

Compare with tables (MarkdownView.tsx line 273) which work because they use <View> columns with explicit widths that force content wider than the viewport.

2. Missing nestedScrollEnabled on code block ScrollView

MarkdownView.tsx line 188:

<ScrollView
    style={{ flexGrow: 0, flexShrink: 0 }}
    horizontal={true}
    contentContainerStyle={{ paddingHorizontal: 16, paddingVertical: 16 }}
    showsHorizontalScrollIndicator={false}
>

The table ScrollView (line 267) has nestedScrollEnabled={true}, but the code block ScrollView does not. On Android, nested ScrollViews require explicit opt-in for nested scrolling.

Also Affected: Diff Views

Two diff view components have the same missing nestedScrollEnabled issue (though they're partially mitigated by the wrapLinesInDiffs user setting):

• ToolDiffView.tsx (line 51): Horizontal ScrollView when wrapLines is off — missing nestedScrollEnabled
• DiffView.tsx → UnifiedDiffInlineView (line 37): Same pattern — missing nestedScrollEnabled

Suggested Fix

SimpleSyntaxHighlighter.tsx

• Add flexShrink: 0 to the outer <View> to prevent it from collapsing
• Render each line as a separate row (similar to CodeLinesViewCore) so lines don't wrap
• Or apply platform-specific text wrapping prevention (web: whiteSpace: 'pre')

MarkdownView.tsx line 188

• Add nestedScrollEnabled={true} to the code block <ScrollView>

ToolDiffView.tsx line 51 and DiffView.tsx line 37

• Add nestedScrollEnabled={true} to both horizontal ScrollViews

Related

• Android: tables in markdown are nearly impossible to scroll horizontally #92 (table horizontal scrolling blocked by gesture hierarchy — same GestureDetector + Pressable interference applies to code blocks too)