[HOLD for payment 2024-08-14] [$250] iOS - Expensify Card - Content on Expensify Card intro screen is truncated

[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.0.10-2
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
Issue reported by: Applause - Internal Team

Action Performed:

Precondition:

• Device font size is increased

1. Launch New Expensify app
2. Go to workspace settings
3. Go to Expensify Card (enable on More features if not yet)

Expected Result:

The content will be displayed in two lines if it does not fit the screen (similar behavior with options on onboarding screen)

Actual Result:

"Up to 2% cash back on every US purchase" and "Spend controls and custom limits" are truncated

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6549113_1721634244605.ScreenRecording_07-22-2024_15-36-33_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0126b472d9d6b81559
• Upwork Job ID: 1815823007102686005
• Last Price Increase: 2024-07-23

Issue Owner

Current Issue Owner: @slafortune

[melvin-bot]

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

[lanitochka17]

@slafortune FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #wave-collect - Release 2

[etCoderDysto]

Proposal

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

Expensify Card - Content on Expensify Card intro screen is truncated

What is the root cause of that problem?

We are not passing any value to numberOfLinesTitle prop of MenuItem. And MenuItem will use the default numberOfLinesTitle = 1 and truncates the contents.

App/src/components/FeatureList.tsx

Lines 101 to 108 in e3ebeff

	<MenuItem
	title={translate(translationKey)}
	icon={icon}
	iconWidth={variables.menuIconSize}
	iconHeight={variables.menuIconSize}
	interactive={false}
	displayInDefaultIconColor
	wrapperStyle={[styles.p0, styles.cursorAuto]}

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

We should pass numberOfLinesTitle={0} to the MenuItem to override the default value. No truncation will be applied on the content when the value is 0.

What alternative solutions did you explore? (Optional)

We can set 'numberOfLinesTitle' to 2 of we don't want the number of lines not to exceed above 2 lines

Result:

[melvin-bot]

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

[slafortune]

@dubielzyk-expensify With the font size increased, do we still expect to see full information or is truncated lines the expected outcome?

[dubielzyk-expensify]

I don't think we should truncate the text given users should still be able to read it. So I expect two lines of text in this instance.

cc @Expensify/design for extra thoughts.

[shawnborton]

Yup, I agree that the text shouldn't be truncated.

[dannymcclain]

Definitely agree.

[etCoderDysto]

Proposal updated

• I have added screenshot of the result