[$250] IOU - View details expense page in Report is messed

[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.45-1
Reproducible in staging?: Y
Reproducible in production?: Y
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): gocemate+b2154962@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Login with gmail account
2. Complete the onboarding modal
3. On Take as to test drive modal add email address and hit Start test drive button
4. Complete the expense creating process
5. Go to Reports and click on the expense
6. Click on More button and select View details

Expected Result:

Expense details should be clearly visible

Actual Result:

View details expense page is messed

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

Bug6995524_1762387112091.Recording__6599.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021986499365085930163
• Upwork Job ID: 1986499365085930163
• Last Price Increase: 2025-11-06
• Automatic offers:
• nkdengineer | Contributor | 109423536

[melvin-bot]

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

[mukhrr]

Proposal

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

View details expense page in Report is messed when there is WS name in a row

What is the root cause of that problem?

Number of lines is set explicitly to 1. And when there is workspace name in a row, style is broken.

App/src/components/ParentNavigationSubtitle.tsx

Lines 143 to 145 in 127f8cc

	<Text
	style={[styles.optionAlternateText, styles.textLabelSupporting, styles.flex1, textStyles]}
	numberOfLines={1}

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

We need to set lines amount to 2 when there is WS name

    const hasWorkspaceName = !!workspaceName && workspaceName !== reportName

            <Text
                style={[styles.optionAlternateText, styles.textLabelSupporting, styles.flex1, textStyles]}
                numberOfLines={hasWorkspaceName ? 2 : 1}
//existing logic

We may need to give textStyles.center if we want. These things can be discussed in PR phase with design team. And passing number of lines as a prop or setting inside component can be discussed in PR as it is not a serios deal

What alternative solutions did you explore? (Optional)

[nkdengineer]

Proposal

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

View details expense page is messed

What is the root cause of that problem?

We don't set the width style for the wrap view, and the name is in one line. Then, if the content is too long, it's messed up

App/src/components/ParentNavigationSubtitle.tsx

Line 128 in c53df3e

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

App/src/components/ParentNavigationSubtitle.tsx

Line 145 in c53df3e

numberOfLines={1}

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

1. We should add styles.w100 to the wrap view here or we can control this via a style prop

App/src/components/ParentNavigationSubtitle.tsx

Line 128 in c53df3e

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

2. Define a subtitleNumberOfLines prop with a default value is 1. We shouldn't always add the numberOfLines as 0 or 2 since we don't want the content to be in multiple lines in the header of the report screen.

We can also add styles.textAlignCenter via textStyles if needed.

numberOfLines ={subtitleNumberOfLines}

App/src/components/ParentNavigationSubtitle.tsx

Line 145 in c53df3e

numberOfLines={1}

and then pass subtitleNumberOfLines={0} here since I don't think we want to trunc the report name in the detail page here. We can pass 2 or another line we want in the PR.

App/src/pages/ReportDetailsPage.tsx

Line 769 in c53df3e

<ParentNavigationSubtitle

3. I noticed that the In content in the subtitle of test drive expense has disappeared after reset cache. We can also discuss this issue in PR if needed

What alternative solutions did you explore? (Optional)

NA

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]

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

[melvin-bot]

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

[dukenv0307]

@nkdengineer's proposal looks good to me

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @Gonals, see https://stackoverflow.com/c/expensify/questions/7972 for more details.