Amount in the Distance e-receipt is cut off when device font size is minimum

[ZhenjaHorbach]

Details

Android - Distance - Amount in the Distance e-receipt is cut off when device font size is minimum

Fixed Issues

$ #29616
PROPOSAL: #29616 (comment)

Tests

Precondition: Device font size is set to minimum in settings

1. Launch New Expensify app
2. Open a Distance expense page
3. Tap on the receipt
4. The price is not cut off

• Verify that no errors appear in the JS console

Offline tests

Precondition: Device font size is set to minimum in settings

1. Launch New Expensify app
2. Open a Distance expense page
3. Tap on the receipt
4. The price is not cut off

QA Steps

Precondition: Device font size is set to minimum in settings

1. Launch New Expensify app
2. Open a Distance expense page
3. Tap on the receipt
4. The price is not cut off

• Verify that no errors appear in the JS console

PR Author Checklist

• I linked the correct issue in the ### Fixed Issues section above
• I wrote clear testing steps that cover the changes made in this PR
  • I added steps for local testing in the Tests section
  • I added steps for the expected offline behavior in the Offline steps section
  • I added steps for Staging and/or Production testing in the QA steps section
  • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
• I included screenshots or videos for tests on all platforms
• I ran the tests on all platforms & verified they passed on:
  • Android: Native
  • Android: mWeb Chrome
  • iOS: Native
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
  • MacOS: Desktop
• I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
• I followed proper code patterns (see Reviewing the code)
  • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
  • I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
  • I verified that comments were added to code that is not self explanatory
  • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
    • If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
  • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
  • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
  • I verified the JSDocs style guidelines (in STYLE.md) were followed
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I followed the guidelines as stated in the Review Guidelines
• I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
• I verified that if a function's arguments changed that all usages have also been updated correctly
• If a new component is created I verified that:
  • A similar component doesn't exist in the codebase
  • All props are defined accurately and each prop has a /** comment above it */
  • The file is named correctly
  • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
  • The only data being stored in the state is data necessary for rendering and nothing else
  • If we are not using the full Onyx data that we loaded, I've added the proper selector in order to ensure the component only re-renders when the data it is using changes
  • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
  • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
  • All JSX used for rendering exists in the render method
  • The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
• If any new file was added I verified that:
  • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
• If a new CSS style is added I verified that:
  • A similar style doesn't already exist
  • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG))
• If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
• If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
• I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: Native

android.mov

Android: mWeb Chrome

android-web.mov

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

[melvin-bot]

@fedirjh Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

[ZhenjaHorbach]

@fedirjh
Hello )
PR is ready

[fedirjh]

Reviewer Checklist

• I have verified the author checklist is complete (all boxes are checked off).
• I verified the correct issue is linked in the ### Fixed Issues section above
• I verified testing steps are clear and they cover the changes made in this PR
  • I verified the steps for local testing are in the Tests section
  • I verified the steps for Staging and/or Production testing are in the QA steps section
  • I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
• I checked that screenshots or videos are included for tests on all platforms
• I included screenshots or videos for tests on all platforms
• I verified tests pass on all platforms & I tested again on:
  • Android: Native
  • Android: mWeb Chrome
  • iOS: Native
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
  • MacOS: Desktop
• If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
• I verified proper code patterns were followed (see Reviewing the code)
  • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
  • I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
  • I verified that comments were added to code that is not self explanatory
  • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
  • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
  • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
  • I verified the JSDocs style guidelines (in STYLE.md) were followed
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I verified that this PR follows the guidelines as stated in the Review Guidelines
• I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
• I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
• If a new component is created I verified that:
  • A similar component doesn't exist in the codebase
  • All props are defined accurately and each prop has a /** comment above it */
  • The file is named correctly
  • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
  • The only data being stored in the state is data necessary for rendering and nothing else
  • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
  • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
  • All JSX used for rendering exists in the render method
  • The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
• If any new file was added I verified that:
  • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
• If a new CSS style is added I verified that:
  • A similar style doesn't already exist
  • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
• If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
• If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
• I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

[fedirjh]

LGTM.

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[github-actions]

Performance Comparison Report 📊

Significant Changes To Duration

Name	Duration
App start TTI	1052.540 ms → 1188.848 ms (+136.308 ms, +13.0%) 🔴
App start runJsBundle	710.750 ms → 825.800 ms (+115.050 ms, +16.2%) 🔴

Show details

Name	Duration
App start TTI	Baseline Mean: 1052.540 ms Stdev: 34.834 ms (3.3%) Runs: 991.797822999768 996.3528189999051 1006.828151000198 1009.4027459998615 1012.8996310001239 1013.6096529997885 1014.7505270000547 1016.3182850000449 1018.6169199999422 1019.02893699985 1023.693161000032 1025.3866380001418 1025.5261459997855 1026.2180739999749 1026.9095270000398 1027.0789879998192 1027.9405240002088 1029.3283190000802 1031.193731999956 1031.7496989998035 1032.3504050001502 1032.600000999868 1033.4924960001372 1035.57788000023 1036.069192000199 1036.3750009997748 1036.5850349999964 1040.4913139999844 1042.4429310001433 1043.176107000094 1043.1952419998124 1045.1224480001256 1047.306355000008 1047.3835390000604 1048.3597490000539 1048.8898689998314 1054.617773000151 1059.8057780000381 1060.2639939999208 1063.1378449997865 1069.9306939998642 1070.1551089999266 1071.54494899977 1073.329659000039 1074.6139929997735 1076.526083999779 1077.947463999968 1083.954946000129 1085.6647569998167 1087.0689969998784 1088.384827000089 1093.3925470001996 1093.663374000229 1098.7220510002226 1110.0304809999652 1114.4213200001977 1124.5080889998935 1129.7336720000021 1132.4412600002252 1134.5121369999833 Current Mean: 1188.848 ms Stdev: 39.379 ms (3.3%) Runs: 1112.392353999894 1136.3219590000808 1137.3684749999084 1138.6545799998567 1138.9544609999284 1139.049890999915 1140.728935000021 1143.9341090000235 1145.7233540001325 1146.680568000069 1146.8876529999543 1148.2181179998443 1150.9353559999727 1152.2298499997705 1152.4433919999283 1154.1761660000775 1155.5748290000483 1156.2953949999064 1156.5698379999958 1157.5541980001144 1163.1044979998842 1163.1414509997703 1167.3235149998218 1175.1681440002285 1175.481356000062 1183.8448430001736 1185.0004730001092 1187.1467109997757 1187.311460999772 1187.902352000121 1190.6230859998614 1191.545222000219 1192.1555530000478 1192.1937270001508 1192.2901300000958 1195.8190069999546 1196.5953640001826 1197.1015550000593 1200.504110999871 1201.5035890000872 1203.4312370000407 1206.965797000099 1208.6795060001314 1210.345708000008 1214.7301860000007 1219.0641279998235 1224.331857000012 1229.8036050000228 1229.8429020000622 1232.5621850001626 1232.7899650000036 1234.489612000063 1244.3075170000084 1248.5242880000733 1249.3735170001164 1250.2962039997801 1251.4393469998613 1256.339470999781 1261.7420390001498 1285.395822999999
App start runJsBundle	Baseline Mean: 710.750 ms Stdev: 27.592 ms (3.9%) Runs: 669 672 672 676 678 678 678 679 679 680 683 683 687 688 689 690 691 692 693 693 695 695 695 696 697 700 701 702 703 703 709 709 710 710 713 714 714 717 719 720 725 727 728 730 730 732 735 737 738 739 740 740 742 744 747 757 758 760 778 786 Current Mean: 825.800 ms Stdev: 30.392 ms (3.7%) Runs: 768 778 785 786 789 790 791 792 792 792 794 795 795 797 797 798 801 801 803 804 805 807 811 815 817 819 819 822 827 827 828 832 833 833 833 834 838 838 838 839 839 840 841 842 842 844 849 849 850 855 856 858 859 862 871 876 876 878 881 917

Meaningless Changes To Duration

Show entries

Name	Duration
App start nativeLaunch	20.667 ms → 22.136 ms (+1.469 ms, +7.1%)
App start regularAppStart	0.013 ms → 0.015 ms (+0.002 ms, +13.1%)
Open Search Page TTI	714.988 ms → 698.612 ms (-16.377 ms, -2.3%)

Show details

Name	Duration
App start nativeLaunch	Baseline Mean: 20.667 ms Stdev: 1.615 ms (7.8%) Runs: 18 18 18 19 19 19 19 19 19 19 19 19 19 19 19 20 20 20 20 20 20 20 20 20 20 20 20 20 20 21 21 21 21 21 21 21 21 21 21 21 21 21 21 22 22 22 22 23 23 23 23 23 23 23 24 24 25 Current Mean: 22.136 ms Stdev: 1.523 ms (6.9%) Runs: 19 20 20 20 20 20 20 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 22 22 22 22 22 22 22 22 22 22 22 22 22 23 23 23 23 23 23 23 23 23 24 24 24 24 24 24 24 24 24 25 25 25 26
App start regularAppStart	Baseline Mean: 0.013 ms Stdev: 0.001 ms (4.1%) Runs: 0.012124999891966581 0.012125999666750431 0.01220700005069375 0.01220700005069375 0.01232899958267808 0.012368999887257814 0.012369999662041664 0.012370000127702951 0.012409999966621399 0.012410999741405249 0.012450999580323696 0.012451000045984983 0.012492000125348568 0.0125730000436306 0.012614000122994184 0.012653999961912632 0.012653999961912632 0.012654999736696482 0.012695000041276217 0.012777000200003386 0.012777000200003386 0.012817000038921833 0.012817999813705683 0.012858000118285418 0.012858000118285418 0.012859000358730555 0.012898999731987715 0.012898999731987715 0.01293900003656745 0.01293900003656745 0.0129399998113513 0.0129399998113513 0.012980000115931034 0.012980999890714884 0.013021000195294619 0.013062000274658203 0.013225000351667404 0.013264999724924564 0.013265000190585852 0.013305999804288149 0.013345999643206596 0.013346000108867884 0.013346000108867884 0.013346999883651733 0.013386999722570181 0.013467999640852213 0.0134680001065135 0.0134680001065135 0.013548999559134245 0.013549999799579382 0.0138349998742342 0.01399700017645955 0.014160000253468752 0.014241999946534634 0.014322999864816666 Current Mean: 0.015 ms Stdev: 0.001 ms (4.8%) Runs: 0.013306000037118793 0.013346999883651733 0.013428000267595053 0.013549999799579382 0.013713000109419227 0.0138349998742342 0.013955999631434679 0.013996999710798264 0.0139979999512434 0.014037999790161848 0.014037999790161848 0.014038000255823135 0.014038000255823135 0.014078999869525433 0.014119999948889017 0.014120000414550304 0.014160000253468752 0.014201000332832336 0.014201000332832336 0.014241000171750784 0.014281999785453081 0.014323000330477953 0.0143630001693964 0.01436399994418025 0.01436399994418025 0.014403999783098698 0.014567000325769186 0.01460699993185699 0.01464799977838993 0.014689000323414803 0.014689000323414803 0.0147299999371171 0.014769999776035547 0.014770000241696835 0.014851999934762716 0.014851999934762716 0.01497400039806962 0.015015000011771917 0.015015000011771917 0.01509599993005395 0.01509599993005395 0.01509599993005395 0.015136000234633684 0.015137000009417534 0.015176999848335981 0.015217999927699566 0.01525900000706315 0.015300000086426735 0.015300000086426735 0.015381000004708767 0.015421999618411064 0.015422000084072351 0.015503000002354383 0.015705999918282032 0.015828000381588936 0.01607300015166402 0.016153999604284763 0.016561000142246485
Open Search Page TTI	Baseline Mean: 714.988 ms Stdev: 37.683 ms (5.3%) Runs: 623.333983999677 651.2447509998456 655.5630299998447 655.9854330001399 657.5883790003136 659.4682620000094 662.6455490002409 665.3415529998019 666.6100670006126 668.943358999677 675.1646739998832 677.5333669995889 681.7763259997591 683.0622160006315 686.1781409997493 691.6416020002216 692.0539560001343 693.4684649994597 695.250326000154 695.7807620000094 696.5585129996762 698.1963299997151 699.0936289997771 700.6150309997611 702.996175000444 712.9163419995457 713.4157719993964 714.9595959996805 716.437947999686 717.1460370002314 717.3049320001155 718.3149009998888 719.069540000055 723.7909339996986 724.2880460005254 725.8285320000723 727.1369230002165 729.7017830004916 730.1859130002558 731.8077809996903 734.5254309996963 734.7639979999512 735.8883870001882 737.4126789998263 741.6514079999179 742.3832600000314 743.3013920001686 743.4484459999949 745.931558999233 747.7686769999564 748.2139900000766 755.3076179996133 755.9328209999949 756.5832930002362 760.5485029993579 765.6867270004004 768.2833660002798 770.3453370006755 776.0873210001737 788.7454840000719 803.0692150006071 Current Mean: 698.612 ms Stdev: 39.600 ms (5.7%) Runs: 636.3516850001179 638.8312580003403 639.79740400007 640.6420499999076 641.9304610001855 645.6695960001089 651.0098880003206 651.0419919998385 652.446737000253 655.2398680001497 655.5585940000601 658.7887369999662 659.5946859996766 660.3209230001085 664.6624759999104 667.3033850002103 668.7837320002727 669.7068690001033 670.4175619999878 671.807252000086 672.925048999954 673.1020509996451 676.397299000062 677.8472090000287 679.3931479998864 684.8577069998719 685.8627929999493 687.2056070002727 694.1351729999296 696.5780839999206 699.2467040000483 699.7625730000436 701.059936999809 703.1833099997602 705.4720060001127 706.8901780000888 709.0544030000456 709.9117030003108 715.5949709997512 715.9403079999611 717.0172529998235 718.4337570001371 720.6610110001639 725.6344409999438 730.0985519997776 733.2720949999057 735.5721040000208 738.4075119998306 739.2753909998573 739.2971609998494 740.9543860000558 744.1839599995874 745.6461999998428 746.6803790000267 746.9077560002916 748.2806400000118 750.0905359997414 757.6079509998672 763.8046879996546 774.9276539999992 804.2304690000601

[github-actions]

@Expensify/mobile-deployers 📣 Please look into this performance regression as it's a deploy blocker.

[hannojg]

Hey, the reported performance regression is def a false positive, not blocked!

[OSBotify]

🚀 Deployed to staging by https://github.com/deetergp in version: 1.3.95-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production by https://github.com/puneetlath in version: 1.3.95-9 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to staging by https://github.com/deetergp in version: 1.3.96-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production by https://github.com/puneetlath in version: 1.3.96-15 🚀

platform	result
🤖 android 🤖	failure ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅