[$250] Android & iOS - Rules - Long bot name is not truncated and is cut off at the end

[applause-bot]

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: 9.4.20-0
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 BrowserStack: #94131
Email or phone of affected tester (no customers): sdjnoisdjdosijsonssjo@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Samsung Galaxy S25 FE / Android 16
App Component: Workspace Settings

Action Performed:

Precondition:

• Enable Rules.

1. Launch Expensify app.
2. Go to workspace settings > Rules.
3. Tap Add agent rule.
4. Enter anything and save.
5. Dismiss the info modal.
6. Tap app back button.
7. Go to Account > Agents.
8. Open the RuleBot.
9. Edit the bot to long name and save it.
10. Go to workspace settings > Rules.
11. Scroll down to Agent rules.

Expected Result:

Long bot name will be truncated.

Actual Result:

Long bot name is not truncated and is cut off at the end.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

View all open jobs on GitHub

Applause Internal Information
Exported by: Mita Rachim
Bug ID: 7191447

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022070384097154150509
• Upwork Job ID: 2070384097154150509
• Last Price Increase: 2026-06-26

[applause-bot]

While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/ca44382b23310b131d861130eefbe3bd2a3727e24663fb97a530c2295e707a3f

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #94131

[melvin-bot]

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

[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.

[MelvinBot]

Proposal

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

A long RuleBot name shown in the Enforced by pill of the Agent rules section is not truncated — it overflows past the screen edge and is clipped (no ellipsis) on Android/iOS App.

What is the root cause of that problem?

The bot name renders inside a UserPill that lives in a flexRow right after the "Enforced by" label in AgentRulesSection.tsx:73-83.

The pill's inner Text already has numberOfLines={1} and userPillText has flexShrink: 1, so it would ellipsize — but only within a bounded pill width. The pill's outer View (UserPill.tsx:34) has no flexShrink. On narrow layouts it gets mw100 (maxWidth: '100%'), i.e. up to 100% of the row — but it's positioned after the "Enforced by" text, so the combined content exceeds the row width and the pill spills off the right edge. Because the pill never shrinks to share the row, its right portion (where the ellipsis would appear) is clipped off-screen.

By contrast, the working usage in ApprovalWorkflowSection places the pill standalone in its own column with no inline sibling competing for width, so the cap + inner flexShrink is enough there.

Why it manifests on mobile specifically

shouldUseNarrowLayout is true on App, applying styles.mw100 to the pill. With maxWidth: '100%' and no flexShrink, the pill claims full row width starting after the label, overflowing. On wide layouts the maxWidth: 260 cap masks it for many names.

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

Let the pill shrink to share the flex row so its inner text can ellipsize. Pass flexShrink1 to the UserPill in the "Enforced by" row of AgentRulesSection.tsx:

<UserPill
    accountID={ruleBotAccountID}
    avatar={ruleBot?.avatar}
    displayName={ruleBotDisplayName}
    email={ruleBot?.login}
    style={styles.flexShrink1}
/>

The "Enforced by" Text keeps its natural width (no flexShrink), so the label stays intact and the bot name truncates with an ellipsis. The pill's userPillText already has flexShrink: 1, so once the pill is bounded the ellipsis renders correctly.

What alternative solutions did you explore? (Optional)

• Adding flexShrink: 1 directly to the shared userPill style — rejected as broader/riskier since UserPill is used in several screens; scoping the change via the style prop here is safer.
• Allowing the row to wrap (flexWrap) — rejected because the expected result is truncation, not wrapping onto a new line.

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement [this](https://github.com/Expensify/App/issues/94643) to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.

[brunovjk]

I honestly think I missed this case when I was reviewing the PR. @yuwenmemon, do you think we can fix it with a follow-up PR? Thanks.

[yuwenmemon]

Yeah not a blocker but we can handle with a follow-up.