[Due for payment 2026-06-18] [Due for payment 2026-05-07] New Feature: Improve approval workflow readability with user pill component and tooltip for "+X more" and limit attendee display two rows with avatar + name and truncate remaining with “+X more"

[m-natarajan]

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:
Reproducible in staging?:
Reproducible in production?:
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @shawnborton
Slack conversation (hyperlinked to channel name): #Convert

Action Performed:

Description:

Approval workflow rows can become difficult to scan when many users are listed. Currently, the names appear as plain text, which makes it harder to quickly identify users and visually parse the workflow.
To improve readability, we should introduce a small “user pill” component that includes the user’s avatar alongside their name. This will make the list easier to scan and help users quickly recognize approvers.
Additionally, when workflows contain more users than can be displayed, the “+X more” indicator should include a tooltip showing the additional users.
Selecting the “+X more” element should continue to behave as it currently does by opening the full Right-Hand Panel (RHP) with the complete workflow details.

Steps to Reproduce for improving approval workflow readability:

1. Navigate to Workspace > Workflows
2. Open an approval workflow with multiple users listed
3. Observe the workflow rows containing several approvers

Expected Result:

Approvers are displayed using a user pill component that includes:
Small avatar
User name
This makes workflow rows easier to visually scan.
The “+X more” indicator includes a tooltip listing additional users.
Clicking or tapping “+X more” opens the Right-Hand Panel (RHP) with the full workflow, as it currently does.

Actual Result:

Approvers are displayed as plain text, which can be difficult to scan when many users are listed.

Steps to Reproduce for limiting attendee display two rows with avatar + name and truncate remaining with “+X more":

Action Performed:

1. Create an expense
2. Add many attendees to the expense
3. View the attendee list in the expense details.

Expected Result:

Attendees are displayed using avatar + name components.
The attendee list shows a maximum of two rows.
If additional attendees exist beyond two rows:
The list is truncated.
A “+X more” indicator appears showing the number of remaining attendees.
Selecting “+X more” opens the full attendee list (e.g., RHP).

Actual Result:

Attendees are displayed as plain text,

Platforms:

Select the officially supported platforms where the issue was reproduced:

• 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

Issue Owner

Current Issue Owner: @nyomanjyotisa

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022031864010605736142
• Upwork Job ID: 2031864010605736142
• Last Price Increase: 2026-03-11

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @dubielzyk-expensify (NewFeature)

[MelvinBot]

Proposal

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

Approval workflow rows on the Workspace > Workflows page display approver and member names as plain text, making them difficult to scan when many users are listed. There is no visual differentiation between individual users in the comma-separated list. Additionally, when the member list is long, it simply truncates with an ellipsis (via numberOfLines={4}) rather than showing a meaningful "+X more" indicator with a tooltip revealing the hidden users.

What is the root cause of that problem?

In ApprovalWorkflowSection (src/components/ApprovalWorkflowSection.tsx:41-45), all member display names are joined into a single comma-separated string and passed as the description prop to a MenuItem:

const members = approvalWorkflow.isDefault
    ? translate('workspace.common.everyone')
    : sortAlphabetically(approvalWorkflow.members, 'displayName', localeCompare)
          .map((m) => Str.removeSMSDomain(m.displayName))
          .join(', ');

This string is rendered as plain <Text numberOfLines={4}> inside MenuItem (line 74-90). There is no avatar, no pill styling, and no explicit "+X more" logic — just native text truncation with ellipsis.

Similarly, each approver is rendered as plain text via MenuItem's description prop (line 92-114), using a generic UserCheck icon instead of the approver's actual avatar.

The data structures already carry avatar information — both Member and Approver types in src/types/onyx/ApprovalWorkflow.ts have avatar?: AvatarSource and displayName fields, populated from personalDetails during workflow construction in WorkflowUtils.ts. The avatar data simply isn't being used in the rendering.

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

1. Modify ApprovalWorkflowSection to render member pills instead of plain text

Instead of joining member names into a comma-separated string and passing it to MenuItem.description, render each member (up to a configurable limit) as a compact pill showing a small Avatar + display name. This replaces the existing MenuItem for the "Expenses from" row with a custom layout that uses the Avatar component (at CONST.AVATAR_SIZE.MENTION_ICON or similar small size) next to each name, styled with a subtle background and border radius similar to the existing mention pill style (getMentionStyle in src/styles/utils/index.ts:1690).

2. Implement "+X more" indicator with tooltip

When the member count exceeds a display threshold, show a "+X more" element at the end of the pill list. Wrap this element with the existing Tooltip component using the renderTooltipContent prop (following the established pattern in ReactionTooltipContent at src/components/Reactions/ReactionTooltipContent.tsx). The tooltip content should list the remaining member display names. Clicking/tapping "+X more" should continue navigating to the RHP (existing onPress behavior).

3. Update approver rows to show actual user avatars

For each approver MenuItem, replace the generic UserCheck icon with the approver's actual avatar (data already available via approver.avatar). This can be done by using MenuItem's existing icon capabilities or by customizing the description rendering area to include a small avatar pill for the approver name.

Key files to modify:

• src/components/ApprovalWorkflowSection.tsx — main rendering changes
• Potentially a new small UserPill component (or inline in ApprovalWorkflowSection) using the existing Avatar component and tooltip system

Data availability: No new data fetching is needed. Member.avatar and Approver.avatar are already populated from personalDetails in WorkflowUtils.ts:61-92.

What alternative solutions did you explore? (Optional)

• Modifying MenuItem to support rich content in description: The description prop is typed as string, so supporting React nodes would require changes to MenuItem.tsx which is used extensively across the app. It's safer and more targeted to replace the MenuItem for the members row with a custom component.
• Using UserDetailsTooltip per pill: Each individual pill could be wrapped in UserDetailsTooltip for hover details, but this may be excessive for this use case. The "+X more" tooltip showing a list of names (similar to ReactionTooltipContent) is more appropriate for the overflow indicator.
• Using UserInfoCell from the search list: This component (src/components/SelectionListWithSections/Search/UserInfoCell.tsx) renders avatar + name in a row but lacks pill styling and is tightly coupled to search list items. A purpose-built pill component would be more appropriate.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @nyomanjyotisa (External)

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022031864010605736142