[PAID] [$250] Android - Wallet - BA number in two lines is cut off at the bottom

[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: 9.0.18-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: https://expensify.testrail.io/index.php?/tests/view/4836144
Email or phone of affected tester (no customers): fischer9966+080824aa@gmail.com
Issue reported by: Applause Internal Team

Action Performed:

Precondition: Android phone with horizontal screen resolution 1080 px - Eq Google Pixel 5

1. Open Android App
2. Login with any account
3. Go to Settings > Wallet
4. Add 2 bank account - 0000 and 1111 and set account 0000 as Default. Account number should occupy 2 lines.
5. Check that account is displayed correctly

Expected Result:

Bank account occupying two lines is displayed correctly, all numbers are fully visible

Actual Result:

Bank account occupying two lines is cut off at the bottom

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6565304_1723099206614.Android-BA-Number-Cut-Bottom.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0127ebfac638cf5ec5
• Upwork Job ID: 1823557759281995585
• Last Price Increase: 2024-08-14
• Automatic offers:
• paultsimura | Reviewer | 103603910
• FitseTLT | Contributor | 103603915

Issue Owner

Current Issue Owner: @paultsimura

[melvin-bot]

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

[IuliiaHerets]

We think that this bug might be related to #vip-vsb

[IuliiaHerets]

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

[FitseTLT]

Edited by proposal-police: This proposal was edited at 2024-08-08 19:43:42 UTC.

Proposal

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

Wallet - BA number in two lines is cut off at the bottom

What is the root cause of that problem?

We have set a fixed height of the menu item here

App/src/pages/settings/Wallet/PaymentMethodList.tsx

Lines 354 to 355 in d6f64ee

	wrapperStyle={[styles.paymentMethod, listItemStyle]}
	iconRight={item.iconRight}

App/src/styles/index.ts

Lines 3785 to 3786 in d6f64ee

	height: variables.optionRowHeight,
	},

but when the number of line of description is 2 the current height is not enough and it gets cut

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

We have many options

1. we can increase the menu item height according to suggestions from design team
2. omit setting fixed height style for the menu item so that it is flexible based on its content
3. we can decrease the padding so that text will not get to the next line when the badge is present
4. We can also set numberOfLinesDescription to 1 b/c the default is 2

What alternative solutions did you explore? (Optional)

[melvin-bot]

@strepanier03 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

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

[melvin-bot]

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