[$1000] Android - Amount digit in send money page is not aligned with currency text reported by @aneequeahmad in (#11952)

[kbecciv]

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

---

Action Performed:

1. Open app
2. Click on + icon (green) > split bill or request money
3. Enter any digit

Expected Result:

Amount digit should be aligned with currency text

Actual Result:

Amount digit in send money page is not aligned with currency text

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Android

Version Number: 1.2.36.0

Reproducible in staging?: Yes

Reproducible in production?: n/a

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug5846973_az_recorder_20221203_094252.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Issue reported by: @aneequeahmad in this issue #11952
Slack conversation: expensify.slack.com/archives/C01GTK53T8Q/p1665613033013319

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01bf6f429dad16a353
• Upwork Job ID: 1600262623224573952

[melvin-bot]

Triggered auto assignment to @kadiealexander (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[markarmanus]

Cant seem to recreate the issu, can you confirm its still happening on staging ?

[kadiealexander]

This shows correctly on a Galaxy A8 device:

@kbecciv can you please add your device make and model to the post, and update your reproduction steps? Thanks.

[kbecciv]

@kadiealexander Issue was reproduced in Samsung Galaxy A32 / 12

[kadiealexander]

Okay, tested on a few Samsung devices and was able to find one that replicated the error (Samsung Galaxy A52). This is a serious edge case, though.

[kadiealexander]

From this SO: https://stackoverflow.com/c/expensify/questions/14418

• The "bug" is actually a bug: Yes
• The bug is not a duplicate report of an existing GH (close the GH and add any novel details to the original GH instead): Not a dupe.
• The bug is reproducible, following the reproduction steps: [$1000] Android - Amount digit in send money page is not aligned with currency text reported by @aneequeahmad in (#11952) #13309 (comment)
• If you’re unable to reproduce the bug, add the Needs reproduction label. Comment on the issue outlining the steps you took to try to reproduce the bug, your results and tag the issue reporter and the Applause QA member who created the issue. Ask them to clarify reproduction steps and/or to check the reproduction steps again. Close issue.:
• The GH template is filled out as fully as possible -- this means the GH body and title are clear (ie. could an external contributor understand it and work on it?):
• The GH was created by an Expensify employee or a QA tester:
• If the bug is an OldDot issue, you should decide whether it is widespread enough to justify fixing or it is better to wait for reunification. If it’s better to wait, close the GH & provide this justification:
• If there's a link to Slack, check the discussion to see if we decided not to fix it:
• Decide if the GH should be resolved by an External contributor or Internal engineer, add the appropriate label:

[melvin-bot]

Current assignee @kadiealexander is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @youssef-lr (External), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[markarmanus]

@kadiealexander What is this tool you are using to test on different devices in the screenshot ?

[kadiealexander]

We use a tool called Browserstack. :)

[fedirjh]

Proposal

we have to add lineHeight to iouAmountText , this will ensure that iouAmountText and iouAmountTextInput will have the same height

App/src/styles/styles.js

Lines 2138 to 2143 in 736359b

	iouAmountText: {
	fontFamily: fontFamily.EXP_NEUE_BOLD,
	fontWeight: fontWeightBold,
	fontSize: variables.iouAmountTextSize,
	color: themeColors.heading,
	},

 iouAmountText: { 
     fontFamily: fontFamily.EXP_NEUE_BOLD, 
     fontWeight: fontWeightBold, 
     fontSize: variables.iouAmountTextSize, 
     color: themeColors.heading, 
+    lineHeight: variables.inputHeight,
 },

[nishancx]

Proposal
Issue:
The issue was caused when border of TextInput was removed with styles.borderNone here:

App/src/components/AmountTextInput.js

Line 46 in 736359b

textInputContainerStyles={[styles.borderNone, styles.noLeftBorderRadius, styles.noRightBorderRadius]}

Solution:
Add padding: 1 to textInputContainerStyles prop in the above line

Output:

[lordthien]

Proposal
in file App/src/styles/styles.js
Add textAlign to iouAmountText, this ensures that choose any currency in the world will be aligned for all device.

    iouAmountText: {
        fontFamily: fontFamily.EXP_NEUE_BOLD,
        fontWeight: fontWeightBold,
        fontSize: variables.iouAmountTextSize,
        color: themeColors.heading,
+       textAlign: "center",
    },

[PauloGasparSv]

@kbecciv you also added some screenshots where the order of the currency and amount are inverted like here:

Does that still happen to you and in what devices? Also, if it still happens do we have another issue for it or can we create another? Because it seems like a different problem than the one reproduced here about the alignment.

[PauloGasparSv]

I had a hard time finding an emulator or device that reproduces the issue.

Other than the proposed changes, I was also thinking of using the textAlignVertical Android-only style property.

Since I can't reproduce the error, I did look at the proposals but can't approve any yet.
I think that @lordthien's proposal will align items on the horizontal axis instead of the vertical right?

@lordthien @nishancx @fedirjh did any of you manage to reproduce the problem locally before applying the fix?

[melvin-bot]

Triggered auto assignment to @isabelastisser (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[kadiealexander]

Reassigning as I'm heading OOO for a family emergency. Thanks for the help @isabelastisser!!

[isabelastisser]

Update: @fedirjh and @rushatgabhane were paid, and their contract ended.

@aneequeahmad, I invited you to the job in Upwork yesterday. Please accept the offer, and I will hire you and issue the payment as soon as possible. Thanks!

[aneequeahmad]

@isabelastisser I have accepted the offer. Thanks

[mallenexpensify]

@aneequeahmad is paid $250 for reporting, thanks!
@isabelastisser I co-assigned, one of us needs to do the regression step tests, I'll likely get to next week cuz I'm around all week.

[melvin-bot]

@PauloGasparSv, @mallenexpensify, @rushatgabhane, @isabelastisser, @fedirjh Huh... This is 4 days overdue. Who can take care of this?

[isabelastisser]

Update: Regression test buddy check is posted here.

[isabelastisser]

@mallenexpensify can we close this?

[mallenexpensify]

The two things still needed

1. For the QA GH to be created to update the test steps in TestRail and for the link to be added here
2. For @PauloGasparSv and/or @rushatgabhane to complete the steps here

[isabelastisser]

Thanks, Matt!

QA GH was created last week, waiting for updates in TestRail.

[PauloGasparSv]

@mallenexpensify filled the steps*! Sorry for the delay.

But I don't think this style bug is worthy of a Expensify open source discussion or commenting on the original issue as it was a tiny almost 1px misalignment that I think would be almost impossible to find during tests. Is that ok or should I do those anyway?

(EDIT: I tagged the wrong Matt here yesterday facepalm)