[$250] Expense - Paid expense title subheader is truncated

[lanitochka17]

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.2.47-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: #74424
Issue reported by: Applause - Internal Team

Action Performed:

Precondition: user with Display First and Last name (both at least 8 characters). Create expense in workspace.

1. Open Expense
2. Submit > Approve > Paid
3. Click on expense header

Expected Result:

Title subheader - From <...> in is fully visible

Actual Result:

Title subheader - From <...> in is truncated

Workaround:

Unknown

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
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6997960_1762602373493.Screen_Recording_2025-11-08_at_13.40.11.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021990915883638621782
• Upwork Job ID: 1990915883638621782
• Last Price Increase: 2025-11-18

Issue Owner

Current Issue Owner: @rojiphil

[melvin-bot]

Triggered auto assignment to @JmillsExpensify (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.

[ShridharGoel]

Proposal

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

Expense - Paid expense title subheader is truncated.

What is the root cause of that problem?

The subtitle Text component inside ParentNavigationSubtitle is rendered with numberOfLines={1}

App/src/components/ParentNavigationSubtitle.tsx

Lines 127 to 166 in 5dc4f0c

	return (
	<View style={[styles.flexRow, styles.alignItemsCenter]}>
	{!!statusText && (
	<View
	style={[
	styles.reportStatusContainer,
	styles.mr1,
	{
	backgroundColor: statusTextBackgroundColor,
	},
	statusTextContainerStyles,
	]}
	>
	<Text style={[styles.reportStatusText, {color: statusTextColor}]}>{statusText}</Text>
	</View>
	)}
	<Text
	style={[styles.optionAlternateText, styles.textLabelSupporting, styles.flex1, textStyles]}
	numberOfLines={1}
	>
	{!!reportName && (
	<>
	<Text style={[styles.optionAlternateText, styles.textLabelSupporting, textStyles]}>{`${translate('threads.from')} `}</Text>
	<TextLink
	onMouseEnter={onMouseEnter}
	onMouseLeave={onMouseLeave}
	onPress={onPress}
	accessibilityLabel={translate('threads.parentNavigationSummary', {reportName, workspaceName})}
	style={[pressableStyles, styles.optionAlternateText, styles.textLabelSupporting, hovered ? StyleUtils.getColorStyle(theme.linkHover) : styles.link, textStyles]}
	dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
	>
	{reportName}
	</TextLink>
	</>
	)}
	{!!workspaceName && workspaceName !== reportName && (
	<Text style={[styles.optionAlternateText, styles.textLabelSupporting, textStyles]}>{` ${translate('threads.in')} ${workspaceName}`}</Text>
	)}
	</Text>
	</View>

This prop clamps the string to a single line even when there is horizontal space available, which inevitably truncates long names on both web and native.

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

Remove the numberOfLines constraint so the subtitle can wrap naturally. No other layout tweaks are needed, because the parent container already reserves vertical space for multiline text. The resulting component excerpt:

            <Text style={[styles.optionAlternateText, styles.textLabelSupporting, styles.flex1, textStyles]}>
                {!!reportName && (
                    <>
                        <Text style={[styles.optionAlternateText, styles.textLabelSupporting, textStyles]}>{`${translate('threads.from')} `}</Text>
                        <TextLink
                            onMouseEnter={onMouseEnter}
                            onMouseLeave={onMouseLeave}
                            onPress={onPress}
                            accessibilityLabel={translate('threads.parentNavigationSummary', {reportName, workspaceName})}
                            style={[pressableStyles, styles.optionAlternateText, styles.textLabelSupporting, hovered ? StyleUtils.getColorStyle(theme.linkHover) : styles.link, textStyles]}
                            dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
                        >
                            {reportName}
                        </TextLink>
                    </>
                )}
                {!!workspaceName && workspaceName !== reportName && (
                    <Text style={[styles.optionAlternateText, styles.textLabelSupporting, textStyles]}>{` ${translate('threads.in')} ${workspaceName}`}</Text>
                )}
            </Text>

[Krishna2323]

Proposal

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

Expense - Paid expense title subheader is truncated

What is the root cause of that problem?

• We are missing styles.mw100 on the main container in ParentNavigationSubtitle.
  

  App/src/components/ParentNavigationSubtitle.tsx

  Line 128 in 5dc4f0c

  <View style={[styles.flexRow, styles.alignItemsCenter]}>

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

• Add styles.mw100 on the main container in ParentNavigationSubtitle.
• We can also consider adding flex1 if needed and also apply the same styles here and here.

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

[dmkt9]

Proposal

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

Title subheader - From <...> in is truncated

What is the root cause of that problem?

We previously fixed a similar issue in #73285, but that only addressed the case where MenuItemWithTopDescription was used:

App/src/pages/ReportDetailsPage.tsx

Lines 766 to 804 in 2087489

	const nameSectionFurtherDetailsContent = (
	<ParentNavigationSubtitle
	parentNavigationSubtitleData={parentNavigationSubtitleData}
	parentReportID={report?.parentReportID}
	parentReportActionID={report?.parentReportActionID}
	pressableStyles={[styles.mt1, styles.mw100]}
	/>
	);
	const nameSectionTitleField = !!titleField && (
	<OfflineWithFeedback
	pendingAction={report.pendingFields?.reportName}
	errors={report.errorFields?.reportName}
	errorRowStyles={styles.ph5}
	key={`menuItem-${fieldKey}`}
	onClose={() => clearPolicyRoomNameErrors(report.reportID)}
	>
	<View style={[styles.flex1]}>
	<MenuItemWithTopDescription
	shouldShowRightIcon={!isFieldDisabled}
	interactive={!isFieldDisabled}
	title={reportName}
	titleStyle={styles.newKansasLarge}
	shouldCheckActionAllowedOnPress={false}
	description={Str.UCFirst(titleField.name)}
	onPress={() => {
	let policyID = report.policyID;
	if (!policyID) {
	policyID = '';
	}
	Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, policyID, titleField.fieldID, backTo));
	}}
	furtherDetailsComponent={nameSectionFurtherDetailsContent}
	/>
	</View>
	</OfflineWithFeedback>
	);

However, we also have cases where the report title is rendered without MenuItemWithTopDescription.

App/src/pages/ReportDetailsPage.tsx

Lines 681 to 728 in 2087489

	const nameSectionExpenseIOU = (
	<View style={[styles.reportDetailsRoomInfo, styles.mw100]}>
	{shouldDisableRename && (
	<>
	<View style={[styles.alignSelfCenter, styles.w100, styles.mt1]}>
	<DisplayNames
	fullTitle={reportName}
	displayNamesWithTooltips={displayNamesWithTooltips}
	tooltipEnabled
	numberOfLines={isChatRoom && !isChatThread ? 0 : 1}
	textStyles={[styles.textHeadline, styles.textAlignCenter, isChatRoom && !isChatThread ? undefined : styles.pre]}
	shouldUseFullTitle={shouldUseFullTitle}
	/>
	</View>
	{isPolicyAdmin ? (
	<PressableWithoutFeedback
	style={[styles.w100]}
	disabled={policy?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}
	role={CONST.ROLE.BUTTON}
	accessibilityLabel={chatRoomSubtitle}
	accessible
	onPress={() => {
	let policyID = report?.policyID;
	if (!policyID) {
	policyID = '';
	}
	Navigation.navigate(ROUTES.WORKSPACE_INITIAL.getRoute(policyID));
	}}
	>
	{chatRoomSubtitleText}
	</PressableWithoutFeedback>
	) : (
	chatRoomSubtitleText
	)}
	</>
	)}
	{!isEmptyObject(parentNavigationSubtitleData) && (isMoneyRequestReport || isInvoiceReport || isMoneyRequest || isTaskReport) && (
	<ParentNavigationSubtitle
	parentNavigationSubtitleData={parentNavigationSubtitleData}
	parentReportID={report?.parentReportID}
	parentReportActionID={report?.parentReportActionID}
	pressableStyles={[styles.mt1, styles.mw100]}
	/>
	)}
	</View>
	);

This issue occurs because ParentNavigationSubtitle is wrapped in a View with display: flex.

App/src/pages/ReportDetailsPage.tsx

Line 682 in 2087489

<View style={[styles.reportDetailsRoomInfo, styles.mw100]}>

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

Since all DisplayNames in nameSectionExpenseIOU are already center-aligned, using display: flex here is unnecessary.

App/src/pages/ReportDetailsPage.tsx

Line 682 in 2087489

<View style={[styles.reportDetailsRoomInfo, styles.mw100]}>

<View style={[styles.flex1, styles.mw100]}>

App/src/pages/ReportDetailsPage.tsx

Line 724 in 2087489

pressableStyles={[styles.mt1, styles.mw100]}

pressableStyles={[styles.mt1, styles.mw100]}
+ textStyles={[styles.textAlignCenter]}

What alternative solutions did you explore? (Optional)

N/A

[abbasifaizan70]

Proposal: Fix Truncation Issue in Expense Header Subtitle

Problem

When viewing an expense header, the subtitle "From in " is being truncated, making the "in " part invisible. This occurs when the display name is long (8+ characters).

Root Cause

The ParentNavigationSubtitle component was wrapping the entire content in a single Text component with numberOfLines={1}, causing the entire string to truncate when space was limited. This meant the trailing "in " text could be cut off.

Solution

Reuse the existing truncation pattern from TextWithEllipsis component, which handles similar scenarios by:

• Splitting content into leading and trailing parts
• Using flexShrink1 for the leading part (allows truncation)
• Using flexShrink0 for the trailing part (always visible)

File Changed: src/components/ParentNavigationSubtitle.tsx

Changes:

1. Replaced the single Text wrapper with a View using flexRow layout
2. Wrapped "From " in a View with flexShrink1 style (can truncate)
3. Wrapped "in " in a View with flexShrink0 style (always visible)

--- a/src/components/ParentNavigationSubtitle.tsx
+++ b/src/components/ParentNavigationSubtitle.tsx
@@ -140,24 +140,28 @@ function ParentNavigationSubtitle({
                     <Text style={[styles.reportStatusText, {color: statusTextColor}]}>{statusText}</Text>
                 </View>
             )}
-            <Text
-                style={[styles.optionAlternateText, styles.textLabelSupporting, styles.flex1, textStyles]}
-                numberOfLines={1}
-            >
-                {!!reportName && (
-                    <>
-                        <Text style={[styles.optionAlternateText, styles.textLabelSupporting, textStyles]}>{`${translate('threads.from')} `}</Text>
-                        <TextLink
-                            onMouseEnter={onMouseEnter}
-                            onMouseLeave={onMouseLeave}
-                            onPress={onPress}
-                            accessibilityLabel={translate('threads.parentNavigationSummary', {reportName, workspaceName})}
-                            style={[pressableStyles, styles.optionAlternateText, styles.textLabelSupporting, hovered ? StyleUtils.getColorStyle(theme.linkHover) : styles.link, textStyles]}
-                        >
-                            {reportName}
-                        </TextLink>
-                    </>
-                )}
-                {!!workspaceName && workspaceName !== reportName && (
-                    <Text style={[styles.optionAlternateText, styles.textLabelSupporting, textStyles]}>{` ${translate('threads.in')} ${workspaceName}`}</Text>
-                )}
-            </Text>
+            <View style={[styles.flexRow, styles.flex1]}>
+                {!!reportName && (
+                    <View style={styles.flexShrink1}>
+                        <Text
+                            style={[styles.optionAlternateText, styles.textLabelSupporting, textStyles]}
+                            numberOfLines={1}
+                        >
+                            <Text style={[styles.optionAlternateText, styles.textLabelSupporting, textStyles]}>{`${translate('threads.from')} `}</Text>
+                            <TextLink
+                                onMouseEnter={onMouseEnter}
+                                onMouseLeave={onMouseLeave}
+                                onPress={onPress}
+                                accessibilityLabel={translate('threads.parentNavigationSummary', {reportName, workspaceName})}
+                                style={[pressableStyles, styles.optionAlternateText, styles.textLabelSupporting, hovered ? StyleUtils.getColorStyle(theme.linkHover) : styles.link, textStyles]}
+                            >
+                                {reportName}
+                            </TextLink>
+                        </Text>
+                    </View>
+                )}
+                {!!workspaceName && workspaceName !== reportName && (
+                    <View style={styles.flexShrink0}>
+                        <Text style={[styles.optionAlternateText, styles.textLabelSupporting, textStyles]}>{` ${translate('threads.in')} ${workspaceName}`}</Text>
+                    </View>
+                )}
+            </View>
         </View>
     );
 }

## Why This Solution?
1. **Reuses Existing Pattern:** Matches the proven `TextWithEllipsis` component pattern used elsewhere in the codebase
2. **Maintains Functionality:** Preserves all existing features including `TextLink` clickability and hover states
3. **Minimal Changes:** Only restructures the layout without changing component logic
4. **Consistent with Codebase:** Follows the same flex layout pattern used in similar components

[melvin-bot]

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