[Due for payment 2025-09-19] Merge flow – Misaligned radio button with long category name

[jponikarchuk]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: V9.1.92-1
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from TestRail: Exploratory
Email or phone of affected tester (no customers): Slottwo1 7423@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13 phone
App Component: Money Requests

Action Performed:

1. Launch app in both mweb and Android
2. Open workpace chat
3. Tap category
4. Add a long category - Advertisingradhe-krishna-dfgggggghhhhhhh-hhhhhhhhh-hhhhhhhhhghbbnnbbbb-radhe-radherradhe-krishncvbbnhhjjjjjjjh Hbb.com
5. Create 2 expenses with merchant and category. For any one expense select the long category
6. Open the expense in which long category is not selected
7. Tap more - merge - select the expense with long category
8. Note in mweb and Android

Expected Result:

In merge flow, when long category name is entered radio button placement must not be misaligned.

Actual Result:

In merge flow, when long category name is entered radio button placement is misaligned in android and not in mweb.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @garrettmknight

[melvin-bot]

Triggered auto assignment to @garrettmknight (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Triggered auto assignment to @marcaaron (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[Krishna2323]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Merge flow – Misaligned radio button with long category name

What is the root cause of that problem?

• There is no max width set to the text input and this is a know issue in android:
  

  App/src/pages/TransactionMerge/MergeFieldReview.tsx

  Line 39 in dd11c95

  <Text style={[styles.mr1, styles.textBold]}>{displayValue}</Text>

What changes do you think we should make in order to solve the problem?

• We should simply add styles.flex1 to the text styles.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

Result

[hoangzinh]

I fixed in this commit fc9e2e3