App: [PAID] [$500] Chat - Font size is smaller in single backtick code block
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.36.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: https://expensify.testrail.io/index.php?/tests/view/4278628 **Email or phone of affected tester (no customers)😗*bvdargentotest+web020224@gmail.com Logs: https://stackoverflow.com/c/expensify/questions/4856 Expensify/Expensify Issue URL: Issue reported by: Applause - Internal Team Slack conversation:
Action Performed:
Pre-condition: user must be logged in
- Go to any chat
- On the compose box, enter "
text" and send it - On the compose box, enter "
text" and send it
Expected Result:
The single backtick code block should have the same font size as the triple backtick
Actual Result:
The single backtick code block does not have the same font size as the triple backtick
Workaround:
Unknown
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
Add any screenshot/video evidence
https://github.com/Expensify/App/assets/78819774/a0bfda7d-000f-4ddd-aac8-48b3a61c3d2e
Upwork Automation - Do Not Edit
- Upwork Job URL: https://www.upwork.com/jobs/~01e903c4ce4d32d16f
- Upwork Job ID: 1753794298382381056
- Last Price Increase: 2024-02-10
- Automatic offers:
- Krishna2323 | Contributor | 0
About this issue
- Original URL
- State: closed
- Created 5 months ago
- Comments: 56 (47 by maintainers)
Sounds good to me, let’s go with that. Thanks!
@Krishna2323 - I’ve paid you via Upwork and close your contract, thank you again!
@sobitneupane - The payment summary is above for your payment request and I’ve assigned Jason as well.
Cheers!
@shawnborton I think there’s just a discrepancy being created by the baked-in spacing of the font itself. I think this screenshot is with 8px of padding on all sides.
We might need to make the top and bottom get 8px padding, and left and right get 12px padding to visually make them appear the same.
I think I like the 4px personally, curious what the other design homies think though!
Do you mean margin or padding? I bet Danny might have a similar comment but… what if we used 4 instead of 6 for the vertical and horizontal padding of the code block? This way we get our favorite number 4 instead of 6.
Can you share screenshots with more context? Like full app screenshots that include other chat messages too? It’s a bit hard to judge this in such isolation. Thanks!
Okay cool, that logic could probably remain but we should make the normal code blocks use 13px as well then.
Totally agree, optically it feels like 13px in our mono font matches 15px of our regular font.