Skip to content

fix(mobile): keep the composer text box off the model button on RTL phones - #26090

Open
S3333F wants to merge 3 commits into
pingdotgg:mainfrom
S3333F:fix/mobile-rtl-compact-editor
Open

S3333F wants to merge 3 commits into
pingdotgg:mainfrom
S3333F:fix/mobile-rtl-compact-editor

Conversation

@S3333F

@S3333F S3333F commented Oct 27, 2026

Copy link
Copy Markdown

Problem

On an Android phone set to Arabic, the empty composer draws "Ask anything" on top of the model button, and the caret sits in the wrong place.

The compact composer places its text box over an empty slot in the row. It measures the slot with onLayout, which gives x from the left edge, and then sets left and right from it. In RTL, React Native swaps left and right styles by default, so the box lands in the mirrored spot, over the model button.

To reproduce: set the phone language to Arabic, open New thread, look at the composer.

Change

The inset math moves into a small worklet helper, compactEditorInsets. When I18nManager.isRTL is true it swaps the two insets, so the box lands back over its slot. LTR and the expanded composer are unchanged.

Scope and approval

Small fix for an obvious layout bug: one composer, one helper and its test, no change outside RTL. It is separate from #23587, which handles text direction, not this placement.

Verification

rtl-composer-before-after
  • Before: Android phone in Arabic, current app (top).
  • After: release APK built from this branch (preview variant, arm64-v8a), same phone and screen (bottom).
  • vp test run --project unit src/features/threads/compactEditorInsets.test.ts passes. The RTL case fails with the old math.
  • Full mobile suite passes. vp fmt --check, vp lint and tsc --noEmit are clean.
  • Not checked: iOS in RTL, I had no RTL iOS device.

Written with Claude Opus 5.5 in Claude Code in T3 Code.

@github-actions github-actions Bot added vouch:unvouched PR author is not yet trusted in the VOUCHED list. size:M 30-99 changed lines (additions + deletions). labels Oct 27, 2026
@macroscopeapp

macroscopeapp Bot commented Oct 27, 2026

Copy link
Copy Markdown
Contributor

Approvability

Verdict: Approved at bca6d82

Macroscope's review found this PR approvable — The compact mobile editor now adjusts its horizontal insets for RTL layouts to avoid overlapping the model button. The change is limited to positioning and preserves LTR and expanded-editor behavior.

You can add or adjust custom eligibility rules. Learn more.

@coderabbitai

coderabbitai Bot commented Oct 27, 2026 •

Copy link
Copy Markdown
Contributor

Review in Change Stack →

No actionable comments were generated in the recent review.

Recent review info
Run configuration
Commits

Reviewing files that changed from the base of the PR and between b3901ef and 26ab7c2.

Files selected for processing: 1
  • apps/mobile/src/features/threads/ThreadComposer.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

The compact thread editor calculates its insets from measured slot and row geometry. It uses the current layout direction to order the insets. Expanded-editor positioning remains 14 points from each side.

Changes: Compact editor positioning

Layer / File(s) Summary
Calculate compact editor insets
apps/mobile/src/features/threads/compactEditorInsets.ts, apps/mobile/src/features/threads/compactEditorInsets.test.ts
The worklet calculates insets from slot and row geometry and swaps them for RTL. Tests cover LTR and RTL inputs.
Use measured insets in ThreadComposer
apps/mobile/src/features/threads/ThreadComposer.tsx
When the editor is compact, ThreadComposer passes measured geometry and the current layout direction to the helper. Expanded positioning remains 14 points from each side.

Priority: Normal

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

Change: Bug fix

Possibly related issues

  • pingdotgg/t3code#24303: Both changes address separation between composer controls, although the issue concerns iOS and this change concerns RTL Android.

Suggested reviewers: juliusmarminge

Merge Risk: Minimal · up to 26ab7

No concrete merge-blocking defect was established in the compact editor positioning change.

Pre-merge checks: Passed 4
Check name Status Explanation
Title check Passed The title clearly and concisely describes the main RTL mobile composer fix.
Description check Passed The description includes the problem, change, scope justification, reproduction context, verification results, UI evidence, and the untested iOS RTL case.
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.
Finishing Touches
🧪 Generate unit tests (beta)
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:M 30-99 changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant