[HOLD #27913] [$1000] Different font sizes in inline and multi-line codeblock

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. open a chat
2. send messages: inline codeblock and multiline codeblock

expected results:

same font size in both

Actual results:

different font size in each
Platform: chrome web desktop

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.13
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

bandicam.2023-05-11.22-17-23-040.mp4

Recording.585.mp4

Expensify/Expensify Issue URL:
Issue reported by:@chiragxarora
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1683823629262529

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01db882fab4bc53c2d
• Upwork Job ID: 1658661655173488640
• Last Price Increase: 2023-05-31

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[allroundexperts]

Proposal

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

Different font size for inline and multiline code block

What is the root cause of that problem?

The root cause is that we're setting a font size of 13 for inline code element here.

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

We need to change the font size defined here to 15.

We can add this to web and desktop only if it looks bad on native.

What alternative solutions did you explore? (Optional)

None

[miljakljajic]

I'm OOO - this was assigned after I signed off. Reassigning. Thank you!

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[JmillsExpensify]

Odd. I'm surprised this is the case, though to double check, @shawnborton is there a particular reason for this?

I'm triaging in any case to keep the issue moving while I'm at a conference.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[phuchoang23]

Proposal

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

Different font sizes in inline and multi-line codeblock

What is the root cause of that problem?

We're explicitly setting fontSize for inline code here

App/src/styles/styles.js

Line 123 in 811c0f3

fontSize: 13,

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

We should remove this fontSize line. So it will reuse the fontSize of base here

App/src/styles/styles.js

Line 144 in 811c0f3

fontSize: variables.fontSizeNormal,

What alternative solutions did you explore? (Optional)

Instead of remove, we can set fontSize in line to

fontSize: variables.fontSizeNormal

So it will calculate fontSize normal in different device

[shawnborton]

I'm not sure if there was a good reason, maybe that it was hard to make the text wrap multiple lines and look good in line with normal text if the font size was 15 for inline code? Either way, I would love to see some proposals of how we could pull it off.

[parasharrajat]

@phuchoang23 Did you check the solution on Android or iOS? Can you paste screenshots here?

Shawn is correct. It was hard to show correct spacing between lines on native platforms which contains inline code blocks. Thus we chose this size.

[phuchoang23]

@parasharrajat Yes. I have tested both of IOS and Android. Here is my results

IOS

• Before
  
• After
  

Android

• Before
  
• After
  

[parasharrajat]

Can you try creating a paragraph of few lines which vhs inline code blocks at multiple places?

[iwiznia]

Still holding

[parasharrajat]

@shawnborton Could you please help us decide the desired results here?

Problem:

1. On Native, we need to use 13px font size for inline code block to align it properly with the normal text. This is the limitation currently.
2. we can still use 15px on web and desktop for inline code blocks are browser natively adjust spacing between lines.

But if we do this change the native and web platforms will have different font sizes for inline code blocks. What do you suggest?

[shawnborton]

Hmm I think I would rather just make all of the inline code and code blocks use 13px. Our mono font optically feels "bigger" than our regular font, so I think it's okay if we back it down to feel balanced with regular text. Is that possible? Can you also share screenshots of what is going on here - I am a bit out of the loop with the issue. cc @Expensify/design for visibility too.

[dannymcclain]

Totally agree Shawn, I think that sounds like a good course of action here.

[parasharrajat]

Hmm I think I would rather just make all of the inline code and code blocks use 13px. Our mono font optically feels "bigger" than our regular font.

Looks like we are already doing this. So this issue is technically solved.

[parasharrajat]

@JmillsExpensify We can close this issue. Is this eligible for partial C+ payment(25%) for proposal review? It has been on hold for long.

[dubielzyk-expensify]

Our mono font optically feels "bigger" than our regular font

Especially agree with the point above

[parasharrajat]

Bump @JmillsExpensify

[JmillsExpensify]

Did we go with Shawn's solution yet?

[chiragxarora]

@JmillsExpensify We can close this issue. Is this eligible for partial C+ payment(25%) for proposal review? It has been on hold for long.

Along with the bug bounty right?

[parasharrajat]

@JmillsExpensify Shawn's solution is already in place so no change is needed .

[parasharrajat]

@JmillsExpensify Bump.

[parasharrajat]

@JmillsExpensify Friendly reminder for #18866 (comment)

[JmillsExpensify]

Payment summary:

• Bug report: $250 @chiragxarora via Upwork
• Reviewer: $250 @parasharrajat via NewDot.

[chiragxarora]

Hello @JmillsExpensify
I could not find any active contract on upwork for this one. Could you please send it again?
Thankyou so much

[JmillsExpensify]

Yes, I'm working on it. Hold tight

[JmillsExpensify]

Just sent you an offer.

[chiragxarora]

Accepted!
Thanks

[JmillsExpensify]

No worries. @parasharrajat please make sure that we have a regression test in place before requesting payment. Thanks all!

[parasharrajat]

Regression Test Steps

1. Add two messages.
2. One for Inline code block and another for multi-line code block.
3. Compare the font sizes of text for both messages.
4. They should look the same.

Do you agree 👍 or 👎 ?

[parasharrajat]

Payment requested as per #18866 (comment)

[garrettmknight]

Payment summary:

Bug report: $250 @chiragxarora via Upwork
Reviewer: $250 @parasharrajat via NewDot.

[JmillsExpensify]

$250 approved for @parasharrajat

[JmillsExpensify]

P.S. Created the issue for the regression test.