[Due for payment 2025-02-18] [$250] Per diem-Amount is misaligned and displayed in 2 rows

[IuliiaHerets]

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.0.91-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
If this was caught during regression testing, add the test name, ID and link from TestRail: https://applause.enterprise.slack.com/archives/G01CL838B8T/p1738147975156699
Email or phone of affected tester (no customers): N
Issue reported by: Applause Internal Team
Device used: Redmi note 10s android 13
App Component: Workspace Settings

Action Performed:

1. Launch app in both mweb and android
2. Go to workspace settings - Enable per diem
3. Tap per diem and upload the below attached file
4. Scroll the content and note amount field

Expected Result:

Amount must not be misaligned and displayed in 2 rows in android for certain rows.

Actual Result:

Amount is misaligned and displayed in 2 rows in android for certain rows but in mweb there is no misalignment.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6727254_1738147904697.az_recorder_20250129_161355.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021885277450389998680
• Upwork Job ID: 1885277450389998680
• Last Price Increase: 2025-01-31

Issue Owner

Current Issue Owner: @laurenreidexpensify

[melvin-bot]

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

[Krishna2323]

🚨 Edited by proposal-police: This proposal was edited at 2025-01-29 13:35:31 UTC.

Proposal

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

Per diem-Amount is misaligned and displayed in 2 rows

What is the root cause of that problem?

• The text wraps in multiple lines when there is not enough space and since we haven't added numberOfLines it also doesn't truncate.
  

  App/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx

  Lines 176 to 178 in 890b430

  	<View style={styles.flex1}>
  	<Text style={[styles.alignSelfEnd, styles.textSupporting, styles.pl2, styles.label]}>{convertAmountToDisplayString(value.rate, value.currency)}</Text>
  	</View>

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

• We need to set styles.flex2 instead of styles.flex1 on the container of amount and also pass numberOfLines={1} to both text elements.
  

  App/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx

  Lines 173 to 178 in 37ab001

  	<View style={styles.flex2}>
  	<Text style={[styles.alignItemsStart, styles.textSupporting, styles.label, styles.pl2]}>{value.subRateName}</Text>
  	</View>
  	<View style={styles.flex1}>
  	<Text style={[styles.alignSelfEnd, styles.textSupporting, styles.pl2, styles.label]}>{convertAmountToDisplayString(value.rate, value.currency)}</Text>
  	</View>

• Same we need to do with the header, set styles.flex2 instead of styles.flex1 on the container of amount. Also pass numberOfLines={1} to all text elements, numberOfLines is not required here but we can add for safety.
  

  App/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx

  Lines 206 to 217 in 37ab001

  	const getCustomListHeader = () => (
  	<View style={[styles.flex1, styles.flexRow, styles.justifyContentBetween, canSelectMultiple && styles.pl3, !canSelectMultiple && [styles.ph9, styles.pv3, styles.pb5]]}>
  	<View style={styles.flex3}>
  	<Text style={[styles.searchInputStyle, styles.alignSelfStart]}>{translate('common.destination')}</Text>
  	</View>
  	<View style={styles.flex2}>
  	<Text style={[styles.searchInputStyle, styles.alignItemsStart, styles.pl2]}>{translate('common.subrate')}</Text>
  	</View>
  	<View style={styles.flex1}>
  	<Text style={[styles.searchInputStyle, styles.alignSelfEnd]}>{translate('workspace.perDiem.amount')}</Text>
  	</View>
  	</View>

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

NA

What alternative solutions did you explore? (Optional)

[bernhardoj]

Proposal

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

The amount is shown in multiple lines.

What is the root cause of that problem?

It's simply because the amount text is too long to fit in one line.

App/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx

Lines 173 to 178 in f219480

	<View style={styles.flex2}>
	<Text style={[styles.alignItemsStart, styles.textSupporting, styles.label, styles.pl2]}>{value.subRateName}</Text>
	</View>
	<View style={styles.flex1}>
	<Text style={[styles.alignSelfEnd, styles.textSupporting, styles.pl2, styles.label]}>{convertAmountToDisplayString(value.rate, value.currency)}</Text>
	</View>

On the web, the text overflows the container instead of wrapping to the next line because of the alignSelfEnd style, so it's not happening on the web.

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

I think it's fine if the amount is shown with multiple lines so the user can see the full amount. We just need to align the text to the right and remove the alignSelfEnd.

If we only want to show one line for the amount, then we can set numberOfLines to 1 to the text. (we can apply this to both texts to be safe)

App/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx

Lines 173 to 178 in f219480

	<View style={styles.flex2}>
	<Text style={[styles.alignItemsStart, styles.textSupporting, styles.label, styles.pl2]}>{value.subRateName}</Text>
	</View>
	<View style={styles.flex1}>
	<Text style={[styles.alignSelfEnd, styles.textSupporting, styles.pl2, styles.label]}>{convertAmountToDisplayString(value.rate, value.currency)}</Text>
	</View>

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

N/A

[melvin-bot]

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

[melvin-bot]

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

[s77rt]

@Krishna2323 Thanks for the proposal. The RCA is not clear and it does not explain the problem rather it's the explaining the lack of the solution. Please read the "How to write a good/bad problem statements" sections https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md#posting-proposals-for-new-projects

[s77rt]

@bernhardoj Thanks for the proposal. The RCA makes sense and for the solution I think we should clip the text but let's confirm with the design team on that. Overall 👍

🎀 👀 🎀 C+ reviewed
Link to proposal