Expense - There is an empty space above the report title in the distance report preview

[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: v9.1.63-0
Reproducible in staging?: Yes
Reproducible in production?: 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: Mac 15.4.1-Safari, Desktop, iPhone 13 iOS 18.4.1 Safari, Hybrid
App Component: Money Requests

Action Performed:

1. Navigate to https://staging.new.expensify.com
2. Click on the green plus button (FAB)
3. Select "Submit expense"
4. Click on the "Distance" tab
5. Click on "Start" Enter any address
6. Click on "Stop" Enter any address
7. Click Next
8. Enter a user email with @applause.expensifail.com domain without a display name
9. Create an expense

Expected Result:

There is no extra space above the report title in the distance report preview when submitting it to a user with @applause.expensifail.com domain.

Actual Result:

There is an extra space above the report title in the distance report preview when submitting it to a user with @applause.expensifail.com domain.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6854899_1749499462459.Recording__136.mp4

View all open jobs on GitHub

[melvin-bot]

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

[abzokhattab]

Proposal

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

When a report title in the MoneyRequestReportPreview wraps to multiple lines, an empty horizontal bar appears above the first line. This gap comes from a dummy spacer view that was intended to reserve room for the icon but instead adds unwanted vertical space whenever the title is long.

What is the root cause of that problem?

The FixIconPadding view only sets a vertical height inside the <Text>. Once the title wraps, that spacer becomes its own inline box above the text, creating the gap .. the issue is noteceable with long titles

App/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx

Lines 648 to 655 in 82da537

	numberOfLines={3}
	>
	{FixIconPadding}
	<Text
	style={[styles.headerText]}
	testID="MoneyRequestReportPreview-reportName"
	>
	{getMoneyReportPreviewName(action, iouReport, isInvoice)}

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

• Remove the FixIconPadding entirely .. as the related issues are no longer reproducable --> [Better Expense Report View] Expense Report Preview #58479 (comment) and [Due for payment 2025-04-30] [Better Expense Report View] [$125] Android Hybrid - The thumps up icon truncated at the finger on approve report #59534

so it could be removed.

POC

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)

N/A

[nkdengineer]

Proposal

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

There is an extra space above the report title in the distance report preview when submitting it to a user with @applause.expensifail.com domain.

What is the root cause of that problem?

We're using FixIconPadding in

App/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx

Lines 648 to 655 in 82da537

	numberOfLines={3}
	>
	{FixIconPadding}
	<Text
	style={[styles.headerText]}
	testID="MoneyRequestReportPreview-reportName"
	>
	{getMoneyReportPreviewName(action, iouReport, isInvoice)}

which adds more space at the top. But we can't remove it because of this explanation

App/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx

Lines 86 to 87 in 74fc9b9

	// Do not remove this empty view, it is a workaround for the icon padding at the end of the preview text
	const FixIconPadding = <View style={{height: variables.iconSizeNormal}} />;

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

FixIconPadding should be used when approvedOrSettledIcon is not undefined

{approvedOrSettledIcon && FixIconPadding}

or

{approvedOrSettledIcon && !doesReportNameOverflow && FixIconPadding}

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

UI issue

What alternative solutions did you explore? (Optional)

N/A

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.

[melvin-bot]

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

[adelekennedy]

this is pretty minor