[HOLD for payment 2024-07-10] [$250] Login - "Chat and split expenses" option is truncated on the onboarding modal

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

issue found when executing #43479
Version Number: 1.4.84-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: applause internal team
Slack conversation:

Action Performed:

1. Open the app
2. Log in with a new Gmail account

Expected Result:

"Chat and split expenses" option should be fully visible.

Actual Result:

"Chat and split expenses" option is truncated on the onboarding modal.

Workaround:

visual

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

Bug6514288_1718458311334.az_recorder_20240615_151800.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c02ce36ab64ecdf6
• Upwork Job ID: 1804256617422060262
• Last Price Increase: 2024-06-21
• Automatic offers:
• allgandalf | Reviewer | 102851828
• nkdengineer | Contributor | 102851830

Issue Owner

Current Issue Owner: @OfstadC

[melvin-bot]

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

[m-natarajan]

@OfstadC 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

[neonbhai]

Proposal

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

"Chat and split expenses" option is truncated on the onboarding modal

What is the root cause of that problem?

The number of lines for menuitem titles is set to 1 by default

App/src/components/MenuItem.tsx

Line 308 in 75c104b

numberOfLinesTitle = 1,

This restricts the onboarding titles to only 1 line in narrow screens

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

We will add the numberOfLines style for onboarding choices as 2 to make sure text gets rendered properly for smaller devices

We will add numberOfLinesTitle: 2 for onboarding menuItems here:

App/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx

Lines 91 to 93 in 75c104b

	return {
	key: translationKey,
	title: translate(translationKey),

Alternatively

We can pass this style by adding a prop in MenuItemsList here

Result:

Before

After

[OfstadC]

I'm not able to reproduce 🤔

[neonbhai]

@OfstadC hi, this is visible for devices with smaller screens! We can also resize view on web to have it show up

[OfstadC]

Okay - I tried on about 6 android devices, 3 of which google said had smaller screens and the only one I was able to reproduce on was Samsung S24 😅 .

[OfstadC]

Hi @Julesssss ! New to BZ here so just want to make sure I take the next steps. I see you self assigned, so should I add the internal label - or do we still want to create an external posting?

[Julesssss]

Hey @OfstadC, I assigned just because I was interested in seeing the solution to the bug. So we can follow the normal process 🙂

[OfstadC]

Discussed in Slack - The solution should ensure we aren't truncating when viewing or selecting the menu item. We'd want to let any device/width use as many lines as needed

[melvin-bot]

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

[melvin-bot]

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

[nkdengineer]

Proposal

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

"Chat and split expenses" option is truncated on the onboarding modal.

What is the root cause of that problem?

By default, the title of MenuItem will have 1 as numberOfLinesTitle

App/src/components/MenuItem.tsx

Line 320 in b021195

numberOfLinesTitle = 1,

.

Therefore, when the text is long such that it should span 2 lines, it will be truncated.

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

The solution should ensure we aren't truncating when viewing or selecting the menu item. We'd want to let any device/width use as many lines as needed

This is the requirement. We need to make sure the numberOfLines here is not set. One way to do it is to add numberOfLinesTitle: 0 here so no truncation will occur in any circumstance.

We use the same method in other locations like in

App/src/components/ReportActionItem/MoneyReportView.tsx

Line 88 in b021195

numberOfLinesTitle={0}

where no-truncation behavior is needed.

FYI any hardcoded value like 2 will not work reliably because there could be very small devices that will require 3 lines to display the item, or the copy of the title could be changed such that it needs more than 2 lines in smaller devices.

What alternative solutions did you explore? (Optional)

Set the default numberOfLinesTitle here to null/undefined/0 (and maybe the numberOfLinesDescription too). Truncating texts should be a conscious decision and should only be done intentionally, not accidentally just because the default value is set that way.

[allgandalf]

Discussed in Slack - The solution should ensure we aren't truncating when viewing or selecting the menu item. We'd want to let any device/width use as many lines as needed

Considering the expected result, lets go with @nkdengineer's proposal here as it is more future proof

🎀👀🎀 C+ reviewed

[melvin-bot]

Current assignee @Julesssss is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[Julesssss]

SOlution is simple and makes sense

[melvin-bot]

📣 @allgandalf 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @nkdengineer 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[allgandalf]

@nkdengineer , let us know when can we expect a PR

[nkdengineer]

I'll raise PR soon

[nkdengineer]

@allgandalf this PR is ready for review

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.3-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix no truncated on the onboarding modal #44424

If no regressions arise, payment will be issued on 2024-07-10. 🎊

For reference, here are some details about the assignees on this issue:

• @allgandalf requires payment automatic offer (Reviewer)
• @nkdengineer requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@allgandalf] The PR that introduced the bug has been identified. Link to the PR:
• [@allgandalf] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@allgandalf] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@allgandalf] Determine if we should create a regression test for this bug.
• [@allgandalf] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@OfstadC] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: https://github.com/Expensify/Expensify/issues/411753

[OfstadC]

@allgandalf Could you please update this today based on the checklist? Thank you! 😃

[allgandalf]

yes i will complete the checklist in sometime 👍

[allgandalf]

• The PR that introduced the bug has been identified. Link to the PR: [Onboarding - Stage 1] Onboarding Flow #37733

• The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/37733/files#r1672199582

• A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N/A

• If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Proposal

1. Open the app on MacOS web
2. Log in with a new Gmail account
3. Get into responsive mode and change the size of the screen to different length and width.

Verify that: "Chat and split expenses" option isn't truncated

Do we agree 👍 or 👎

[OfstadC]

Payment Summary:

Contributor+: @allgandalf paid $250 via Upwork
Contributor: @nkdengineer paid $250 via Upwork

[OfstadC]

Leaving this open until regression testing is complete

[OfstadC]

Same - waiting on regression testing

[OfstadC]

I'm actually going to close this out. but I'll note here if the regression test yields anything 😄