[Payment due 4-28-26][$250] Category - Long category name is not broken into multiple lines on request detailed

[nlemma]

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: undefined
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: Windows 11 Pro - Chrome
App Component:

Action Performed:

Precondition: in OD add a category with a long name (> 100 characters)

1. In ND, submit money request in WS
2. Select a category with a long name
3. Observe the category in the report view
4. Go to expense details

Expected Result:

A category with a long name should be consistent across the report view and the single expense report view which show two lines

Actual Result:

A category with a long name is not broken into multiple lines in expense details.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6776768_1742473386626.bandicam_2025-03-20_14-08-36-721.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021907084431768772244
• Upwork Job ID: 1907084431768772244
• Last Price Increase: 2025-04-01
• Automatic offers:
• FitseTLT | Contributor | 106824943

[melvin-bot]

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

[FitseTLT]

🚨 Edited by proposal-police: This proposal was edited at 2025-03-31 12:07:13 UTC.

@shawnborton the number of lines for category menu in expense details page is 1 do you think it should be updated?

App/src/components/MenuItem.tsx

Line 398 in 4c087bc

numberOfLinesTitle = 1,

Do u think this is a bug?

Also in Category picker we limit it to 2 lines. WDYT should we change it?

App/src/components/SelectionList/RadioListItem.tsx

Line 65 in 4c087bc

numberOfLines={isMultilineSupported ? 2 : 1}

I remembered sometime ago we agreed on it as expected.

---

Note For C+:
This change is straight-forward so I mentioned the RCA code and asked for design team thought because there is a great change that it could be expected behavior. Now that the behavior is confirmed I have just only updated my original comment to follow the proposal template.

---

Proposal

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

Category - Long category name is not broken into multiple lines on request detailed

What is the root cause of that problem?

We are using the default numberOfLinesTitles for category menu which 1

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 676 in 4c087bc

title={updatedTransaction?.category ?? transactionCategory}

App/src/components/MenuItem.tsx

Line 398 in 4c087bc

numberOfLinesTitle = 1,

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

We can change it to the appropriate lines as the design team suggest. For eg as suggested here we can set the numberOfLinesTitles to 2 in MoneyRequestView just like we do in ConfirmationPage and also for other menu items in money request view like tags and so on

App/src/components/ReportActionItem/MoneyRequestView.tsx

Line 676 in 4c087bc

title={updatedTransaction?.category ?? transactionCategory}

                            numberOfLinesTitle={2}

We are using numberOfLinesTitles as 2 for tags, categories, merchant, description in confirmation page so we can update their respective menu in money request view to make them consistent using the logic of this comment

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)

🚨 Edited by proposal-police: This proposal was edited at 2025-03-31 07:41:28 UTC.

Proposal

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

Category - Long category name is not broken into multiple lines on request detailed

What is the root cause of that problem?

We don't pass numberOfLinesTitle to MenuItemWithTopDescription of category

App/src/components/ReportActionItem/MoneyRequestView.tsx

Lines 674 to 690 in 2f4e94d

	<MenuItemWithTopDescription
	description={translate('common.category')}
	title={updatedTransaction?.category ?? transactionCategory}
	interactive={canEdit}
	shouldShowRightIcon={canEdit}
	titleStyle={styles.flex1}
	onPress={() => {
	if (!transaction?.transactionID || !report?.reportID) {
	return;
	}
	Navigation.navigate(
	ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction.transactionID, report.reportID, getReportRHPActiveRoute()),
	);
	}}
	brickRoadIndicator={getErrorForField('category') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
	errorText={getErrorForField('category')}
	/>

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

We should add this props as we did with others

numberOfLinesTitle = 0 if we don't want to limit the number of lines or we can add numberOfLinesTitle={2} to limit category description to show max 2 lines

Note: We can find similar fields and add these props to make it consistent

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

None

What alternative solutions did you explore? (Optional)

[shawnborton]

Hmm I see 2 lines here:

I guess if anything, I think 2 lines is probably sufficient because super long category names are not common and this is an edge case. But that being said, yes, perhaps we need to update the single expense report view to show two lines as well for consistency:

cc @Expensify/design for the gut check here.

[dubielzyk-expensify]

No strong feelings here, but your reasoning for adding two lines on the expense as well makes sense to me 👍

updated proposal to match with this expected

[dannymcclain]

Agree with Shawn and Jon. This feels like a pretty extreme edge case, but I don't see the harm in letting it wrap to two lines everywhere.

[melvin-bot]

@MitchExpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!