Repository navigation
Search - Tax and total value text are different heights #43909
Description
Activity
Triggered auto assignment to @CortneyOfstad (
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.@CortneyOfstad 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
Proposal
Please re-state the problem that we are trying to solve in this issue.
Tax and Total value text isn't line with each other in the row
What is the root cause of that problem?
Tax and total value text are different heights because they have different font sizes and line height
What changes do you think we should make in order to solve the problem?
Update the style of the Tax value to be the same as the Total value
What alternative solutions did you explore? (Optional)
Proposal
Please re-state the problem that we are trying to solve in this issue.
Tax and total value text are different heights
What is the root cause of that problem?
Tax cell use
line-height: 18but Total cell useline-height: 20We use two
lineHeightvalues from two styles
1- 20 form optionDisplayName
2- 18 from labelWhat changes do you think we should make in order to solve the problem?
We should use the same
line-heightfor all cells. So remove the one fromstyles.labesWhat alternative solutions did you explore? (Optional)
We need to make sure there's no duplicate styles. We can review style applied to all cells and make sure we use the same value for
lineHeightor fonts, ....Proposal
Please re-state the problem that we are trying to solve in this issue.
Search - Tax and total value text are different heights
What is the root cause of that problem?
The alignment issue is because of using
styles.optionDisplayNameonCategoryCell,TagCell.TaxCellandTotalCell. Thestyles.optionDisplayNamehasminHeight: variables.alternateTextHeightwhich takes minimum height of 20px causing the alignment issue.
Lines 1824 to 1829 in cceb345
In the screenshot below, we can see that the tag, tax text cell is aligned to top.
What changes do you think we should make in order to solve the problem?
We can solve this issue in few ways:
- Remove
styles.optionDisplayNamestyle. - Overwrite
minHeightby passing{minHeight: 'auto'}or adding it to any style object. - Use styles required from
styles.optionDisplayNameand removestyles.optionDisplayName, I don't think thestyles.optionDisplayNameis required inCategoryCell,TagCell.TaxCelland forTotalCellwe leave as it is because the font line height is also 20px so, it won't affect.
What alternative solutions did you explore? (Optional)
- Remove
Proposal Updated
- Added option 3 in main solution
Double checking with the design team here, as this may be on purpose. Will follow up as soon as I have confirmation!
A PR is already in place for this here, so this can be closed!
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: 1.4.85-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: N/A
Issue reported by: Applause - Internal Team
Issue found when executing PR #43764
Action Performed:
Precondition: Have at least one submitted expense with tax in a workspace chat.
Expected Result:
The values should be in line
Actual Result:
Tax and Total value text isn't line with each other in the row
Workaround:
Unknown
Platforms:
Which of our officially supported platforms is this issue occurring on?
Screenshots/Videos
Add any screenshot/video evidence
Recording.1977.mp4
View all open jobs on GitHub