fix(mobile): let markdown code blocks wrap long lines

[Abdullah1738]

Problem

On mobile, fenced code blocks in messages only scroll sideways. Long lines, like a drafted comment or a long command, get cut off at the screen edge and you have to swipe back and forth inside a small box to read them. Web already has a per-block wrap toggle in ChatMarkdown; mobile has no way to wrap.

Change

Code blocks get a wrap button next to the copy button. When it's on, the block renders the same highlighted text in a plain padded view instead of the horizontal ScrollView, so lines wrap to the bubble width. It's per block and starts off, and uses the same labels as web ("Wrap lines" / "Disable line wrap"). The icon is text.alignleft on iOS (same as the file viewer's word wrap menu) and wrap_text on Android.

Only NativeMarkdownBlock.tsx changes.

Scope and approval

Small parity fix: it brings the existing web code block wrap toggle to the mobile markdown renderer. No new setting, no shared state, nothing outside the code block component.

Verification

• iOS Simulator (iPhone 17 Pro Max) and Android emulator (Android 14), T3 Code Dev against a local dev server: sent a message with a long single-line ts block. Before tapping, the line is clipped and scrolls horizontally. After tapping, it wraps across lines with highlighting intact. Tapping again goes back to scrolling. The copy button still works.
• tsc --noEmit for apps/mobile, vp lint and vp fmt are clean.
• Not checked on a physical Android device.

iOS before	iOS after

Android before	Android after

[macroscopeapp]

Approvability

Verdict: Approved at e0fcbad

Macroscope's review found this PR approvable — This one-file mobile markdown change adds a per-block line-wrap control while preserving horizontal scrolling by default. It reuses existing highlighting and copy behavior and introduces no schema, deployment, security, or static-analysis changes.

Notes:

• Diff unchanged. Approvability was decided on eligibility alone.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository: pingdotgg/t3code/.coderabbit.yaml
• Review profile: CHILL
• Plan: Advanced
• Run ID: d36c733d-60dc-43d9-a9d8-26ca118f1c86

📥 Commits

Reviewing files that changed from the base of the PR and between a1d9d72 and e0fcbad.

📒 Files selected for processing (1)

• apps/mobile/modules/t3-markdown-text/src/NativeMarkdownBlock.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

Native code blocks now include a line-wrap toggle. Wrapped code appears in a padded view; unwrapped code remains in a horizontal scroll view. The toggle exposes its selected state to accessibility services and uses a platform-specific icon.

Changes

Native code wrapping

Layer / File(s)	Summary
Wrapping control and layout apps/mobile/modules/t3-markdown-text/src/NativeMarkdownBlock.tsx	NativeCodeBlock tracks wrapping, initially off. An accessible toggle changes the state and icon. Wrapped code renders in a padded View; unwrapped code renders in a horizontal ScrollView. Both layouts reuse the highlighted code element.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Feature

Merge Risk: ⚪ Minimal · up to e0fcb

The toggle adds selectable wrapping for mobile code blocks, and no concrete issue requiring a fix before merge was established.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 1 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly describes the main change: adding line wrapping to mobile Markdown code blocks.
Description check	✅ Passed	The description covers the problem, change, scope, and focused verification. It explains why this small parity fix needs no prior approval and includes before-and-after screenshots for iOS and Android…

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

_{Comment @coderabbitai help to get the list of available commands.}

[maria-rcks]

Note

Written by claude-opus-5-5 on behalf of Maria

Hi! We are cleaning up open PRs, and this one does not say which model or harness was used to create it. If this change is really important, we recommend rebuilding the PR with a newer model and noting the model and harness in the PR description.

[maria-rcks]

Note

Written by claude-opus-5-5 on behalf of Maria

Reopening, this was closed by mistake. Sorry for the noise!

[juliusmarminge]

Note

Grok responding on behalf of Julius.

Closing as superseded by #16979, which replaced the mobile Markdown renderer with Enriched Markdown, so the NativeMarkdownBlock.tsx this PR changes no longer exists. A code-block wrap toggle would need to be rebuilt on top of Enriched; feel free to open a new PR against the new renderer if you want to pick it back up.

[Abdullah1738]

Picked this back up on top of Enriched: #19041, with the native button in pingdotgg/enriched-markdown#1.