fix(mobile): stop Android user bubbles with code blocks from overlapping

[Brechard]

The bug

On Android, a user message that contains a fenced code block renders its paragraphs stacked on top of one another inside a hugely over-tall bubble, and the overflow paints over the rows that follow it in the feed. It is fully deterministic — scrolling away and back reproduces it at the same message.

Reproduced on the current Play Store release (1.0.2, versionCode 14) on a Pixel 8 / Android 16, and again from a clean checkout of main.

Before	After

Same seeded thread, same entry point, Pixel 8 / Android 16. A user message containing a fenced TypeScript block: before, the paragraphs are drawn on top of each other, the code block sits over the opening paragraph, and the trailing prose overflows the bubble and paints over the assistant reply below. After, the blocks are laid out in order and nothing overlaps.

Root cause

The user bubble sizes itself from its content — maxWidth: userBubbleMaxWidth with no width (ThreadFeed.tsx). MarkdownCodeBlock wraps its body in a horizontal ScrollView, so its intrinsic width is the width of its widest line, which is effectively unbounded. That forces the bubble's width to be clamped.

Android lays the bubble's children out during the unclamped intrinsic pass — where the surrounding paragraphs collapse to a single line — and never repositions them once the width is clamped back to maxWidth.

Actual view bounds from uiautomator dump on the broken bubble:

ViewGroup [191,1570][1038,2400]   <- bubble
  TextView [223,1593][1005,2205]  <- paragraph, 612px tall
  ViewGroup [223,1621][1005,2400] <- code block, placed 28px below the paragraph's TOP

The paragraph is laid out 612px tall, but its next sibling starts 28px after the paragraph's top — a 584px overlap. The bubble still reserves the full stacked height, which is the large empty region.

An assistant message with the identical code block renders correctly, because assistant rows are full width and never hit the clamp:

TextView  [51,487][1028,691]    paragraph
ViewGroup [51,745][1029,1011]   code block   <- starts after the paragraph
TextView  [51,1037][1028,1173]  next paragraph

iOS is unaffected: hasNativeSelectableMarkdownText() is true there, so markdown goes through the native T3SelectableMarkdownText view and there are no nested block children to mis-position. Android has no .android.tsx variant, so it falls back to the JS react-native-nitro-markdown renderer.

The fix

Pin the bubble's width when the message contains a block that renders as a horizontally scrollable View. This removes the intrinsic-width pass entirely, and is the same reason review-comment bubbles already carry an explicit width. The resulting width matches what the clamp would have produced, so nothing looks different other than being laid out correctly.

Covers fenced code blocks and GFM tables (same renderer shape). Bubbles without such a block are untouched and still hug their content.

Verification

A/B on a physical Pixel 8 against a disposable seeded environment with four message shapes:

Message	Before	After
Plain prose (control)	correct	correct, still hugs content
User + fenced code block	broken	correct
User + narrow table	correct	correct
Assistant + code block (control)	correct	correct

After the fix, child bounds are strictly sequential (paragraph → code block 298..614 → trailing paragraph 641..981).

Also verified on a real, long production thread where the bug was originally reported: the previously broken message now renders correctly, as do the rows around it.

vp lint, tsc --noEmit, and the mobile suite (618 tests) pass. The helper ships with unit tests.

Known limits

• The narrow-table case never actually broke at that width, so table detection is preventive — same mechanism, just untriggered until the table is wider than the bubble.
• Indented (four-space) code blocks are deliberately not detected; the check would fire on ordinary nested list continuations, and they are vanishingly rare in chat input.
• iOS was not rebuilt. The change is very likely a no-op there (the native view almost certainly already reports a wide intrinsic size, so those bubbles sit at max width already), but I did not confirm it on a simulator.

---

Note

Low Risk
Narrow mobile UI/layout change with unit-tested detection; no auth, data, or API impact.

Overview
Fixes Android layout where user messages with fenced code blocks (or wide GFM tables) stacked paragraphs on top of each other inside an over-tall bubble.

Adds hasWideMarkdownBlock to detect fenced code and GFM table delimiter rows (not inline code or prose with |). In ThreadFeed, when a user message contains such content, the bubble gets an explicit width: userBubbleMaxWidth—the same approach already used for review-comment bubbles—so Android skips the broken intrinsic-width layout pass. Plain prose bubbles still size from content only.

^{Reviewed by Cursor Bugbot for commit 5b44d84. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix Android user message bubbles with code blocks or tables overlapping

On Android, user message bubbles containing fenced code blocks or GFM tables were sizing intrinsically, causing paragraph layout to overlap. The fix introduces hasWideMarkdownBlock, which detects fenced code blocks (``` or ~~~) and GFM table delimiter rows via regex, then applies a fixed `userBubbleMaxWidth` to affected bubbles in `ThreadFeed.tsx`.

^{Macroscope summarized 5b44d84.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 98271a39-86a3-465e-8e95-e5e0e2e20240

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[macroscopeapp]

Approvability

Verdict: Approved 5b44d84

Straightforward Android UI bug fix that pins bubble width when code blocks or tables are detected, preventing layout overlap. The changes are self-contained, well-documented, follow existing patterns, and include unit tests.

^{You can customize Macroscope's approvability policy. Learn more.}