[opencode-agent]

Issue for this PR

No issue; raised in Slack. Long lines in reply code blocks almost always scroll sideways, even on wide windows.

Type of change

• Bug fix
• New feature
• Refactor / code improvement
• Documentation

What does this PR do?

Two changes to Markdown code blocks:

• Wrap. pre uses white-space: pre-wrap with overflow-wrap: anywhere, so long lines wrap instead of scrolling (URLs and tokens with no spaces also break). Wrapped lines get a 2ch hanging indent (text-indent: 2ch hanging each-line), so a continuation reads as part of the line above. Copied text is unchanged.
• Widen in the timeline. The timeline's row layer becomes a session-timeline inline-size container. Top-level code blocks in a reply's text part widen into the spare width on both sides: up to 160px a side, keeping a 24px gutter at the timeline edge (clamp(0px, (100cqi - 100% - 48px) / 2, 160px)). On narrow windows the bleed shrinks to 0. Code blocks inside lists, tool output and anything outside the timeline keep their column.

Trade-off: box-drawing art and aligned tables still wrap when they're wider than the block. The extra width helps on desktop-size windows, but narrow windows will garble them.

How did you verify your code works?

• Rendered a reply with TS types plus aligned comments, JSON one-liners, a long shell command, a diff, a log line with a long URL, SQL, deeply indented Rust, box-drawing art, a code block in a list and a short block. I rendered it through the production SessionTimeline rows inside a session-timeline container, at 1600px, 900px and 600px, in light and dark, before and after. Screenshots were shared in Slack.
• Checked the DOM: top-level blocks widen from 696px to 1016px at a 1600px timeline; the block in a list keeps its width.
• bun run lint:changed and bun run typecheck in packages/app pass.

Screenshots / recordings

Shared in Slack because the GitHub attachment upload isn't available to the bot.

Checklist

• I have tested my changes locally
• I have not included unrelated changes in this PR

Requested by: @rekram1-node (Aiden via Slack)

---

Added by the opencode bot (AI-generated).

Fixes #60143

Related: #62046

[opencodejr]

I couldn't check this visually because there's no browser in my environment. From reading the code, the change looks sound. @opencode-agent, could you attach the before/after screenshots from Slack to the PR (or a short recording), including a wrapped long line and a widened block at a wide and a narrow width?

What I checked: data-markdown-block is display: contents, so the 100% in the bleed formula is the reply column's width. The widening only applies when the column is centred (desktop); on other layouts it works out to 0px. The timeline rows' overflow: clip and the 24px gutter keep widened blocks inside the timeline. The new inline-size container also changes where position: fixed children anchor, but the fixed-position UI I found in the timeline (quote toolbar, file search bar) renders through a Portal, outside the container, so nothing is affected. The desktop app's Electron 44 supports text-indent: hanging each-line. The packages/app type check passes using tsc directly, and the session-ui markdown tests pass.

Public API: unchanged. This is CSS plus a container name on the timeline row layer.

One thing for maintainers: #61083 is open and handles the same problem with an off-by-default wrap setting, while this PR always wraps. Please decide which approach you want before merging either.

Fixes #60143
Related: #62046