Add option to enable word-wrap in code blocks (desktop app)
Problem
When Claude outputs file contents or structured text inside fenced code blocks, the desktop app renders them with white-space: pre and a horizontal scrollbar. For non-code content (configs, markdown files, task boards, YAML) this makes reading extremely painful — you have to scroll left and right constantly to read each line.
This is especially bad for:
- Memory files, task boards, and other structured text Claude frequently outputs
- Any code block with lines longer than the viewport width
- Users who prefer narrower windows or have smaller screens
Current workaround
The only workaround is for Claude to output text as blockquotes (>) instead of code blocks. This wraps lines but loses the monospace font and background styling that makes structured content scannable.
Proposed solution
Add a setting in settings.json:
{ "codeBlockWordWrap": true }
When enabled, render code blocks with white-space: pre-wrap; word-wrap: break-word instead of white-space: pre. This is a one-line CSS change on the app side.
Alternatively, a per-block toggle (e.g. a wrap/unwrap button in the code block header) would let users choose on the fly.
This issue has 2 comments on GitHub. Read the full discussion on GitHub ↗