[Due for payment 2026-07-14] [$250] Web - Email tooltip is not displayed when hovering over member of a group

[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: v9.4.5-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: N/A
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Windows 11/ Chrome
App Component: Other

Action Performed:

1. Sign in to staging.new.expensify.com
2. Create a group with more than 2 members
3. Navigate to the group created in step 2
4. Click on group header > Members
5. Hover over the email address of the group admin
6. Hover over the email address of the member (Not admin)

Expected Result:

Tooltip with email address of the member is displayed when hovering just like when hovering over admin

Actual Result:

Tooltip with email address is not displayed when hovering over group member just like when hovering over group admins

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7178138_1781202589415.bandicam_2026-06-11_21-20-56-574.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Svetlana Lazutkina
Bug ID: 7178138

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022065147761627713217
• Upwork Job ID: 2065147761627713217
• Last Price Increase: 2026-07-02

Issue Owner

Current Issue Owner: @mkhutornyi

[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/f3403972c209ac0a3c082979957cc31b64170930445f6e8420111d6aa25bfbf8

[MelvinBot]

Proposal

What is the root cause of that problem?

The email tooltip in the Members list is overflow-gated — it only appears when the email text is truncated. The admin row truncates because the "Admin" badge steals horizontal space; the member row doesn't, so its email never overflows and no tooltip ever shows.

Walking through it:

• Each row's email is the alternateText. Admin rows additionally get a right-side Admin badge, member rows get rightElement: null — ReportParticipantsPage.tsx:237-255.
• Both rows render that email through the same TextWithTooltip, and the badge (rightElement) is appended to the right of the text column — TableListItem.tsx:80-88.
• TextWithTooltip (web) only enables the tooltip when the text actually overflows its box (scrollWidth > offsetWidth) — TextWithTooltip/index.tsx:22-32.

So the Admin badge narrows the admin row's text column → email truncates → tooltip activates. The member row's text column is full width → email fits → no tooltip. It is not a code-branch difference, it's a layout side-effect of the conditional badge.

Confirmation / how to disambiguate

Both rows use the identical TextWithTooltip with shouldShowTooltip = true (shouldShowTooltips defaults to true in BaseSelectionList), so the tooltip isn't being disabled on member rows by any branch. The only structural difference is the badge. Quick repro to prove it: shrink the window or give a member a very long email — the member row's email will start truncating and the tooltip will appear. Confidence: High — mechanically traceable, web-only DOM behavior (no logs needed).

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

Two reasonable directions, depending on the intended UX:

1. If the email should always have a tooltip (regardless of truncation): the overflow gate in TextWithTooltip is the wrong behavior for this case. The simplest targeted fix is to render the email with a plain Tooltip whose shouldRender is always true for these rows, rather than the overflow-gated TextWithTooltip. This guarantees a consistent tooltip on every member's email.

2. If the email tooltip should only appear on truncation (and the bug is just the inconsistency): reserve an equal-width slot for the role column on every row (e.g. render the same right-element placeholder for non-admins, or fix the text column width) so admin and member rows truncate identically.

Given the issue title ("tooltip is not displayed when hovering over member… just like when hovering over admin"), option 1 (always show the email tooltip) matches the reported expectation most directly.

What alternative solutions did you explore? (Optional)

Constraining the email column to a fixed narrow width so it always overflows — rejected, since short emails still wouldn't trigger the overflow gate and it harms layout.

---

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

[aswin-s]

Proposal

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

On Web, when viewing the Members list of a group chat (Group header > Members), hovering over the email of a non-admin member does not display a tooltip with the full email address, while hovering over an admin's email does. The expected behavior is that the email tooltip appears consistently for all members regardless of role.

What is the root cause of that problem?

In src/pages/ReportParticipantsPage.tsx:246, each participant row sets rightElement: isAdmin ? <Badge text={translate('common.admin')} /> : null. The email is rendered through TextWithTooltip in src/components/SelectionList/ListItem/TableListItem.tsx:81-86, which only enables the tooltip when the text actually overflows its container (target.scrollWidth > target.offsetWidth, see src/components/TextWithTooltip/index.tsx:27). For admin rows, the Admin badge shrinks the available text-column width, causing the email to truncate and trigger the tooltip; for non-admin rows the null rightElement leaves the column wider, so the email fits without truncation and the tooltip never activates. The bug is therefore the inconsistent row width between admin and non-admin rows, not a tooltip wiring issue.

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

1. In src/pages/ReportParticipantsPage.tsx around line 246, replace rightElement: isAdmin ? <Badge .../> : null with a layout that reserves a constant-width slot for the role badge — render a <View> with a fixed/min width matching the admin Badge (re-using the header's StyleUtils.getMinimumWidth(60) already applied at line 301 for the role column header) and place the Badge inside only when isAdmin. This keeps the text column width identical across admin and member rows so truncation behavior — and thus tooltip activation — is consistent.
2. Verify alignment with the existing role-column header in ReportParticipantsPage.tsx:300-304 (which already reserves a 60px-min column) so members visually line up under "Role".
3. No platform twins required — TableListItem and TextWithTooltip are shared cross-platform; the row data is produced only here.

What alternative solutions did you explore? (Optional)

Force the email TextWithTooltip to always show a tooltip (drop the overflow gate) — rejected because it changes shared component behavior used across many lists and would show redundant tooltips when text already fits.

[lorretheboy]

Proposal

What is the root cause of that problem?

The "email tooltip" on these rows is the overflow tooltip from TextWithTooltip. It only renders a tooltip when the text is actually truncated (scrollWidth > offsetWidth):

App/src/components/TextWithTooltip/index.tsx

Lines 22 to 32 in 0e3ed56

	onLayout={(e) => {
	const target = (e.nativeEvent as unknown as LayoutChangeEvent).target;
	if (!shouldShowTooltip) {
	return;
	}
	if (target.scrollWidth > target.offsetWidth || target.scrollHeight > target.offsetHeight) {
	setShowTooltip(true);
	return;
	}
	setShowTooltip(false);
	}}

In ReportParticipantsPage, the email is the alternateText (the member's login), and admins additionally get a role Badge as the row's rightElement:

App/src/pages/ReportParticipantsPage.tsx

Lines 244 to 246 in 0e3ed56

	text: formatPhoneNumber(getDisplayNameOrDefault(details)),
	alternateText: formatPhoneNumber(details?.login ?? ''),
	rightElement: isAdmin ? <Badge text={translate('common.admin')} /> : null,

TableListItem renders that badge to the right of the flex name/email column, and only when it exists:

App/src/components/SelectionList/ListItem/TableListItem.tsx

Lines 80 to 89 in 0e3ed56

	{!item.shouldHideAlternateText && !!item.alternateText && (
	<TextWithTooltip
	shouldShowTooltip={showTooltip}
	text={item.alternateText}
	style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
	/>
	)}
	</View>
	{!!item.rightElement && item.rightElement}
	</>

So the causal chain is: admin rows carry a role Badge → the Badge consumes horizontal space → the email column is narrower → the email overflows and truncates → TextWithTooltip shows the tooltip. Member rows have rightElement: null → the role cell collapses to zero width → the email column is wider → the email fits → no overflow → no tooltip. The difference is purely a column-width artifact of the missing role cell on member rows, not anything role-specific.

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

Reserve a consistent role-column width on every row, regardless of admin/member, so the name/email column has the same width for both and truncation (and thus the tooltip) behaves identically.

Concretely, always provide a rightElement that wraps the role content in a fixed-min-width container matching the header's role column, and render an empty placeholder of that same width for members instead of null. The header already reserves this width:

App/src/pages/ReportParticipantsPage.tsx

Lines 300 to 304 in 0e3ed56

	{isGroupChat && (
	<View style={[StyleUtils.getMinimumWidth(60)]}>
	<Text style={[styles.textMicroSupporting, styles.textAlignCenter]}>{translate('common.role')}</Text>
	</View>
	)}

So the rightElement here should be a View of StyleUtils.getMinimumWidth(60) containing the Badge for admins and nothing for members:

App/src/pages/ReportParticipantsPage.tsx

Line 246 in 0e3ed56

rightElement: isAdmin ? <Badge text={translate('common.admin')} /> : null,

With equal column widths, hovering a member's email behaves exactly like hovering an admin's, resolving the reported inconsistency (and incidentally aligning the role cells with their header).

What alternative solutions did you explore? (Optional)

Make the email tooltip always show on hover rather than only on overflow. That would require changing the shared TextWithTooltip (or bypassing it for this row), which affects many unrelated lists and would add redundant tooltips on already-readable text, so the column-width fix is preferable.

[mukhrr]

Proposal

What is the root cause of that problem?

ReportParticipantsPage builds group member rows with TableListItem, but it only passes a right-side role element for admins:

App/src/pages/ReportParticipantsPage.tsx

Lines 238 to 247 in b489db4

	participants.push({
	keyForList: `${accountID}`,
	accountID,
	isSelected: selectedMembers.includes(accountID) && canSelectMultiple,
	isDisabledCheckbox: accountID === currentUserAccountID,
	isDisabled,
	text: formatPhoneNumber(getDisplayNameOrDefault(details)),
	alternateText: formatPhoneNumber(details?.login ?? ''),
	rightElement: isAdmin ? <Badge text={translate('common.admin')} /> : null,
	pendingAction,

The same screen’s header always reserves a 60px role column for group chats:

App/src/pages/ReportParticipantsPage.tsx

Lines 299 to 303 in b489db4

	</View>
	{isGroupChat && (
	<View style={[StyleUtils.getMinimumWidth(60)]}>
	<Text style={[styles.textMicroSupporting, styles.textAlignCenter]}>{translate('common.role')}</Text>
	</View>

TableListItem renders alternateText with TextWithTooltip, but the right element is only rendered when item.rightElement exists:

App/src/components/SelectionList/ListItem/TableListItem.tsx

Lines 67 to 88 in b489db4

	<View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, titleContainerStyles]}>
	<TextWithTooltip
	shouldShowTooltip={showTooltip}
	text={item.text ?? ''}
	style={[
	styles.optionDisplayName,
	isFocusVisible ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
	styles.sidebarLinkTextBold,
	styles.pre,
	!item.shouldHideAlternateText && item.alternateText ? styles.mb1 : null,
	styles.justifyContentCenter,
	]}
	/>
	{!item.shouldHideAlternateText && !!item.alternateText && (
	<TextWithTooltip
	shouldShowTooltip={showTooltip}
	text={item.alternateText}
	style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
	/>
	)}
	</View>
	{!!item.rightElement && item.rightElement}

TextWithTooltip only enables the tooltip when the rendered text overflows:

App/src/components/TextWithTooltip/index.tsx

Lines 22 to 31 in b489db4

	onLayout={(e) => {
	const target = (e.nativeEvent as unknown as LayoutChangeEvent).target;
	if (!shouldShowTooltip) {
	return;
	}
	if (target.scrollWidth > target.offsetWidth || target.scrollHeight > target.offsetHeight) {
	setShowTooltip(true);
	return;
	}
	setShowTooltip(false);

So admin rows lose width to the Admin badge, their email overflows, and the tooltip is enabled. Regular member rows do not reserve the role column, so their email gets more width, does not overflow, and the tooltip remains disabled. This makes rows under the same “Role” header behave differently.

Git history confirms this asymmetry was introduced with the table UI itself: commit 672f3699ce3 added both TableListItem and ReportParticipantsPage, including rightElement: isAdmin ? <Badge ... /> : null and the 60px role header. It was not caused by a later tooltip change.

Comparable cases already reserve right-side column space when a table layout needs stable columns, e.g. workspace members wraps role content in a fixed-width right column:

App/src/pages/workspace/WorkspaceMembersPage.tsx

Lines 508 to 515 in b489db4

	<View style={[StyleUtils.getMinimumWidth(variables.w72)]}>
	<MemberRightIcon
	role={policyEmployee.role}
	owner={policy?.owner}
	login={details.login}
	badgeStyles={[styles.alignSelfEnd]}
	/>
	</View>

There is also an existing helper pattern that reserves a 60px right column even when no label is present:

App/src/components/SelectionListWithModal/ListItemRightCaretWithLabel.tsx

Lines 21 to 24 in b489db4

	return (
	<View style={styles.flexRow}>
	<View style={[StyleUtils.getMinimumWidth(60)]}>{!!labelText && <Text style={[styles.textAlignCenter, styles.textSupporting, styles.label]}>{labelText}</Text>}</View>
	{shouldShowCaret && (

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

Reserve the same role-column width for every group participant row. Render the Admin badge inside that fixed-width role column for admins, and render an empty fixed-width role column for regular members.

Small illustrative diff:

+    const getRoleColumn = (isAdmin: boolean) => (
+        <View style={[StyleUtils.getMinimumWidth(60), styles.alignItemsCenter]}>
+            {isAdmin && (
+                <Badge
+                    text={translate('common.admin')}
+                    badgeStyles={styles.ml0}
+                />
+            )}
+        </View>
+    );
+
     // Build participants list
     let participants: MemberOption[] = [];
     for (const participantForDisplay of searchFilteredParticipants) {
         const {accountID, details, isDisabled, pendingAction, role} = participantForDisplay;

         const isAdmin = role === CONST.REPORT.ROLE.ADMIN;

         participants.push({
             ...
-            rightElement: isAdmin ? <Badge text={translate('common.admin')} /> : null,
+            rightElement: isGroupChat ? getRoleColumn(isAdmin) : null,
             pendingAction,
             ...
         });
     }

This fixes the root cause without changing shared tooltip behavior or TableListItem. The change is scoped to the group members page, so other selection lists keep their current layout and tooltip rules.

To avoid regressions, we should verify:

• Admin and non-admin rows still align under the Role header.
• Hovering the email shows the tooltip for both admin and regular members on web.
• Multi-select mode still works, including checkbox alignment and bulk actions.
• Non-group participant/member pages are unchanged because the fixed role column is only applied for isGroupChat.

[melvin-bot]

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

[x-dev90]

Proposal

What is the root cause of that problem?

The members page in the recording is the report participants route, r/:reportID/participants, rendered by ReportParticipantsPage.

For group chats, the page renders a table-like header with a dedicated Role column for every row:

App/src/pages/ReportParticipantsPage.tsx

Lines 295 to 305 in f0ef594

	const headerContent = (
	<View style={[styles.flex1, styles.flexRow, styles.justifyContentBetween]}>
	<View>
	<Text style={[styles.textMicroSupporting, canSelectMultiple ? styles.ml3 : styles.ml0]}>{translate('common.member')}</Text>
	</View>
	{isGroupChat && (
	<View style={[StyleUtils.getMinimumWidth(60)]}>
	<Text style={[styles.textMicroSupporting, styles.textAlignCenter]}>{translate('common.role')}</Text>
	</View>
	)}
	</View>

But the row data only reserves a right-side role element for admins:

App/src/pages/ReportParticipantsPage.tsx

Lines 238 to 247 in f0ef594

	participants.push({
	keyForList: `${accountID}`,
	accountID,
	isSelected: selectedMembers.includes(accountID) && canSelectMultiple,
	isDisabledCheckbox: accountID === currentUserAccountID,
	isDisabled,
	text: formatPhoneNumber(getDisplayNameOrDefault(details)),
	alternateText: formatPhoneNumber(details?.login ?? ''),
	rightElement: isAdmin ? <Badge text={translate('common.admin')} /> : null,
	pendingAction,

TableListItem renders the display name and email inside a flex text container, then appends item.rightElement after that text container:

App/src/components/SelectionList/ListItem/TableListItem.tsx

Lines 67 to 88 in f0ef594

	<View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, titleContainerStyles]}>
	<TextWithTooltip
	shouldShowTooltip={showTooltip}
	text={item.text ?? ''}
	style={[
	styles.optionDisplayName,
	isFocusVisible ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
	styles.sidebarLinkTextBold,
	styles.pre,
	!item.shouldHideAlternateText && item.alternateText ? styles.mb1 : null,
	styles.justifyContentCenter,
	]}
	/>
	{!item.shouldHideAlternateText && !!item.alternateText && (
	<TextWithTooltip
	shouldShowTooltip={showTooltip}
	text={item.alternateText}
	style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
	/>
	)}
	</View>
	{!!item.rightElement && item.rightElement}

The email text tooltip is provided by TextWithTooltip, which only enables the tooltip when the text overflows its rendered bounds:

App/src/components/TextWithTooltip/index.tsx

Lines 22 to 31 in f0ef594

	onLayout={(e) => {
	const target = (e.nativeEvent as unknown as LayoutChangeEvent).target;
	if (!shouldShowTooltip) {
	return;
	}
	if (target.scrollWidth > target.offsetWidth || target.scrollHeight > target.offsetHeight) {
	setShowTooltip(true);
	return;
	}
	setShowTooltip(false);

Because admin rows render the Admin badge, their email column is narrower, so the email overflows and shows a tooltip. Regular member rows render no right element, so the email gets the extra role-column width, does not overflow, and TextWithTooltip does not show a tooltip. This makes the tooltip behavior differ between admins and members.

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

Reserve the same role-column width for every group chat participant row. The row should render the Admin badge inside that column for admins, and an empty placeholder with the same minimum width for regular members.

Required changes:

• In src/pages/ReportParticipantsPage.tsx, change rightElement for group chats so it always renders a View with StyleUtils.getMinimumWidth(60).
• Render <Badge text={translate('common.admin')} /> inside that view only when the participant is an admin.
• Keep rightElement as null for non-group-chat participant lists, since those screens do not render the Role header column.

Tests to add:

• Add a focused UI/component test for ReportParticipantsPage with a group chat containing at least one admin and one regular member.
• Assert that both admin and member rows reserve the role column while only admin rows render the Admin badge.
• Verify long member emails are constrained/truncated consistently so the existing TextWithTooltip behavior can show the email tooltip.

I considered changing TableListItem or TextWithTooltip so participant emails always show a tooltip even when they do not overflow. I rejected that because TableListItem is shared by workspace members, tags, taxes, report fields, domain members, and other table-style lists. The root cause is local to the group chat participants page: its header always has a Role column, but non-admin rows do not reserve that column.

What alternative solutions did you explore? (Optional)

Another solution I explored is a scoped behavior fix instead of a layout-only fix.

The current proposal addresses the row-width inconsistency by reserving the same role-column width for both admins and regular members. That makes truncation behavior more consistent because both rows are measured with the same available text width. However, it still depends on TextWithTooltip's current overflow-only behavior. If an email fits within that width, the tooltip still will not render.

Because of that, I also explored a more complete but still low-risk alternative:

• add an opt-in prop to TextWithTooltip so a caller can request tooltip rendering without requiring overflow,
• thread that opt-in through TableListItem only for alternateText,
• enable it only for group chat participant emails in DynamicReportParticipantsPage.

This keeps the default shared behavior unchanged elsewhere in the app, avoids a global tooltip behavior change, and ensures consistent email tooltip behavior for both admins and regular members regardless of email length.

I did not choose this as the main proposal at first because it touches shared components (TextWithTooltip and TableListItem), while the column-width fix was more localized to the participants page and appeared lower risk. However, after validating the layout-only approach, I no longer think it is sufficient on its own. Reserving equal role-column width improves alignment and makes admin/member rows more consistent, but it still relies on overflow to trigger the tooltip. If the email text fits within the available space, the reported issue can still remain unresolved.

Because of that, I now think this scoped opt-in tooltip approach is the stronger and more complete fix: it preserves existing shared behavior elsewhere while reliably resolving the inconsistent email tooltip behavior on the group participants page.

My Alternative Fixed Demo:

Screencast.From.2026-06-18.19-32-58.mp4

[melvin-bot]

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