[PAID] [$500] Chat - Font size is smaller in single backtick code block

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] 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):**[email protected]
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

1. Go to any chat
2. On the compose box, enter " text " and send it
3. 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

Bug6365462_1706918418825.bandicam_2024-02-02_13-11-54-768.mp4

View all open jobs on GitHub

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[lanitochka17]

We think that this bug might be related to #vip-vsp
CC @quinthar

[Krishna2323]

Proposal

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

Chat - Font size is smaller in single backtick code block

What is the root cause of that problem?

We are overriding the fontSize inside CodeRenderer.

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

We remove the fontSize from textStyleOverride and use the default one which is being used by the pre code renderer.

Result

Alternative

Make the font size for inline coed a bit larger. Use getValueUsingPixelRatio(15, 21)

Or if we want to increase the size when the code block is inside h1 we can modify the function below:

function getCodeFontSize(isInsideH1: boolean) {
    return isInsideH1 ? getValueUsingPixelRatio(17, 19) : getValueUsingPixelRatio(15, 21);
}

Alternative 2

Update the fontSize and for pre code block as suggested by the design team.

App/src/styles/index.ts

Lines 180 to 188 in 0eb6d02

	pre: {
	...baseCodeTagStyles(theme),
	paddingTop: 12,
	paddingBottom: 12,
	paddingRight: 8,
	paddingLeft: 8,
	fontFamily: FontUtils.fontFamily.platform.MONOSPACE,
	marginTop: 0,
	marginBottom: 0,

[ikevin127]

Proposal

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

The single backtick code block does not have the same font size as the triple backtick.

What is the root cause of that problem?

The issue comes from the CodeRenderer component where as a result of a previous issue #30203 where the accepted solution PR was to add the isInsideH1 logic which returns a larger fontSize (15) when the single backtick code block is inside an h1 element (# 'code block') by using this function:

function getCodeFontSize(isInsideH1: boolean) {
    return isInsideH1 ? 15 : 13;
}

This logic gives our regular single backtick code block the smaller fontSize 13 while code blocks wrapped in an h1 element will have fontSize 15 which is the same as the regular triple backtick code block has currently.

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

Given this issue's expected result, this means that the logic added by the mentioned PR does not apply anymore and returning fontSize 13 for the non-h1-wrapped code block is not valid anymore:

• remove the isInsideH1/getCodeFontSize redundant logic from the CodeRenderer component and set fontSize: variables.fontSizeNormal directly in the textStyleOverride object.

With this change -> both regular single backtick code block and the h1 wrapped single backtick code block will have fontSize: variables.fontSizeNormal (15) which is calculated correctly via getValueUsingPixelRatio(15, 21) instead of the hardcoded numeric values 15 and 13.

Screenshots

iOS: Native

Before	After

What alternative solutions did you explore? (Optional)

If the expected result is what we want here but we need to keep the redundant logic added by the mentioned PR (for whatever reason) then within the CodeRenderer component, use the isInsideH1 variable to conditionally pass the fontSize object to the textStyleOverride like so:

    const textStyleOverride = {
        ...(isInsideH1 && fontSize),
        // ...rest of the variables

this will have our regular single backtick code block default to the normal fontSize 15 instead of being set to 13 - while keeping the isInsideH1 fontSize 15 logic when that is true.

Additional improvement in case we go w/ this solution: within the getCodeFontSize function, replace the hardcoded numeric values of 15 and 13 with variables.fontSizeNormal respectively variables.fontSizeLabel in order to get the correct values based on getValueUsingPixelRatio.

Screenshots

iOS: Native

Before	After

What alternative solutions did you explore? (Optional)

As per design team discussion below:

• for both single backtick and triple backtick code blocks -> make the top and bottom padding 8px, and 12px for left and right to visually make them appear the same
• change the triple backtick code block fontSize to 13, same as the current single backtick code block fontSize

Any other small changes can be adjusted during the PR - depending on where the design team discussion lands.

[strepanier03]

[shawnborton]

cc @Expensify/design

[dannymcclain]

Ah yes, just noticed this one the other day! @shawnborton which size in your opinion is the correct size for these?

I prefer the smaller size of the inline code (13px). While I know technically our regular text size is 15px, the mono font at that size feels bigger than the regular text.

[shawnborton]

Totally agree, optically it feels like 13px in our mono font matches 15px of our regular font.

[Krishna2323]

I also think that mono font just matches the regular font size. If we need we can make it 14 or we can let it remain as it is.

Current sizes:

[shawnborton]

I think the main idea here is that:

• the monospaced font feels bigger than our normal font, so we should manually back it down so that optically they feel the same
• ideally the font size we use for the inline code & the code blocks are the same exact size
• perhaps we take away some of the vertical padding of the code block too so it feels less like an outlier
• now what size do we use for mono? What is it currently in the inline code lines? Is it 13 or 14?

[Krishna2323]

Current size is 13px and inside a H1 it is 15.

[shawnborton]

Okay cool, that logic could probably remain but we should make the normal code blocks use 13px as well then.

[Krishna2323]

It will look like this if we change the fontSize for normal code block to 13px and reduce vertical margin from 12px to 8px.

[shawnborton]

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!

[dannymcclain]

☝️ I think that looks good, but agree with Shawn, it'd be nice to see it with a bit more context.

[Krishna2323]

Sorry that was 6px vertical margin and this is also with 6px vertical margin.

[shawnborton]

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.

[Krishna2323]

Sorry, yes 6px padding, currently we have 12px of vertical padding.

For more context.

[Krishna2323]

I think 4px of padding will make it harder to differentiate between inline and regular code block, here is the ss with 4px of padding. If it looks good then we can use this.

[shawnborton]

Sounds good to me, let's go with that. Thanks!

[Krishna2323]

@sobitneupane, can you look at the discussion above 🙏🏻

[melvin-bot]

@strepanier03, @sobitneupane Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[sobitneupane]

Thanks for the proposal everyone.

Alternative 2 Proposal (with the changes decided by design team) from @Krishna2323 looks good to me.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 @Krishna2323 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[Krishna2323]

@sobitneupane PR ready for review :)

[Krishna2323]

@strepanier03 friendly bump for payments here :), PR was deployed to production on 29th Feb.

[Krishna2323]

@strepanier03 bump for payments process 🙇🏻

[Krishna2323]

@strepanier03, can you pls process the payments 🙏🏻

[sobitneupane]

@strepanier03 This is ready for payment. PR deployed to production on 29th Feb.

[strepanier03]

Sorry everyone, the automation failed here and the urgency label wasn't updated so this fell through the cracks. I'm working on this now and will have an update in a few minutes.

[strepanier03]

Payment Summary

• $500 - @Krishna2323 - Paid via Upwork
• $500 - @sobitneupane - Via Manual Requests

@JmillsExpensify - Payment request incoming from @sobitneupane

[strepanier03]

@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!

[JmillsExpensify]

$500 approved for @sobitneupane