[Due for payment 2025-12-25] Long suggested categories overflow the view

[thienlnam]

Problem:

When auto-categorization runs and it suggest a long category, the options run off the page so it's difficult to see what the full option is

Reproduction:

1. Create a policy in NewDot
2. Add two similar but lengthy categories (like the ones in the example above)
3. Create a manual expense and submit it to the policy with a merchant name that will trigger the recommendations
4. Verify the message from Concierge shows up

Solution:

Have it break onto a new line so the full text is viewable

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @brianlee-expensify

[melvin-bot]

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

[zainAwan9175]

Would like to work on this.

[daledah]

🚨 Edited by proposal-police: This proposal was edited at 2025-12-01 17:56:05 UTC.

Proposal

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

Long suggested categories overflow the view

What is the root cause of that problem?

Improvement

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

1. We should create a new prop for the Button component like numberOfLines and make it default to 1 then pass it here

App/src/components/Button/index.tsx

Lines 299 to 301 in 96a20e5

	<Text
	numberOfLines={1}
	style={[

2. Then pass it as numberOfLines={isConciergeCategoryOptions(action) || isConciergeDescriptionOptions(action) ? 2 : 1} (We can adjust the value here) for the ActionableItemButtons -> Button

App/src/pages/home/report/PureReportActionItem.tsx

Lines 1510 to 1523 in 96a20e5

	{actionableItemButtons.length > 0 && (
	<ActionableItemButtons
	items={actionableItemButtons}
	layout={
	isActionableTrackExpense(action) ||
	isConciergeCategoryOptions(action) ||
	isConciergeDescriptionOptions(action) ||
	isActionableMentionWhisper(action)
	? 'vertical'
	: 'horizontal'
	}
	shouldUseLocalization={!isConciergeCategoryOptions(action) && !isConciergeDescriptionOptions(action)}
	/>
	)}

App/src/components/ReportActionItem/ActionableItemButtons.tsx

Lines 29 to 35 in 96a20e5

	<Button
	key={item.key}
	onPress={item.onPress}
	text={props.shouldUseLocalization ? translate(item.text as TranslationPaths) : item.text}
	medium
	success={item.isPrimary}
	/>

What alternative solutions did you explore? (Optional)

To cover this expected, we should create a new prop to Button component ellipsizeMode then pass it to the primaryText

App/src/components/Button/index.tsx

Lines 298 to 301 in 96a20e5

	const primaryText = (
	<Text
	numberOfLines={1}
	style={[

From PureReportActionItem component pass ellipsizeMode as middle -> ActionableItemButtons -> Button

    ellipsizeMode={isConciergeCategoryOptions(action) || isConciergeDescriptionOptions(action) ? 'middle' : undefined}

note: ellipsizeMode is a prop of React Native Text component, it doesn't work on web so we can use TextWithMiddleEllipsis component instead

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[github-actions]

⚠️ @daledah Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[melvin-bot]

Triggered auto assignment to @dannymcclain (Design), see these Stack Overflow questions for more details.

[nkdengineer]

🚨 Edited by proposal-police: This proposal was edited at 2025-12-01 18:04:51 UTC.

Proposal

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

Long suggested categories overflow the view

What is the root cause of that problem?

Improvement

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

1. Define primaryTextNumberOfLines prop for Button component with the default value is 1 and use it here

App/src/components/Button/index.tsx

Lines 299 to 301 in 96a20e5

	<Text
	numberOfLines={1}
	style={[

2. Pass down the primaryTextNumberOfLines={isConciergeCategoryOptions(action) || isConciergeDescriptionOptions(action) ? 0 : 1} prop to Button from here. We shouldn't pass the undefined value because it will be fallback to th default value. We should use 0 instead.

App/src/pages/home/report/PureReportActionItem.tsx

Lines 1510 to 1523 in 96a20e5

	{actionableItemButtons.length > 0 && (
	<ActionableItemButtons
	items={actionableItemButtons}
	layout={
	isActionableTrackExpense(action) ||
	isConciergeCategoryOptions(action) ||
	isConciergeDescriptionOptions(action) ||
	isActionableMentionWhisper(action)
	? 'vertical'
	: 'horizontal'
	}
	shouldUseLocalization={!isConciergeCategoryOptions(action) && !isConciergeDescriptionOptions(action)}
	/>
	)}

3. Optional: We can add the style here to prevent the word is overflow when the category name doesn't have any space.

primaryTextNumberOfLines !== 1 && styles.breakAll,

App/src/components/Button/index.tsx

Lines 299 to 301 in 96a20e5

	<Text
	numberOfLines={1}
	style={[

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[github-actions]

⚠️ @nkdengineer Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).