[Due for payment 2025-03-10] [$500] Android - Chat - Code block alignment is too high in Android

[vincdargento]

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: 9.0.70-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team

Action Performed:

1. Launch app in both mweb and android
2. Open a chat
3. Enter Testing "hello" testing
4. Send the message

Expected Result:

Code blocks must display consistently in both mweb and android.

Actual Result:

In mWeb, code block alignment is correct, while in Android, code block alignment is too high.

Workaround:

Unknown

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021864441841607834076
• Upwork Job ID: 1864441841607834076
• Last Price Increase: 2025-03-04

Issue Owner

Current Issue Owner: @sakluger

[melvin-bot]

Triggered auto assignment to @sakluger (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.

[sakluger]

I think that the quotation mark alignment is the same for both platforms, while the code snippet alignment is different. In Android, the code snippet looks much higher and closer to the text above than in mWeb. @Expensify/design could I get a gut check on that?

Pulling out screenshots from the video, since it took me a while to see the different while watching the video.

Here's mWeb:

Here's Android:

[dubielzyk-expensify]

Agree that the code snipped looks a tad high, @sakluger .

Also, could we see how it looks when you insert more text like this:

Cause that'll give us a better idea of what's actually misaligned here

[sakluger]

Good suggestion! Here's that same longer string in Android - it's pretty clear that the code block is aligned super high:

[melvin-bot]

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

[melvin-bot]

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

[sakluger]

I updated the GH issue title and the actual/expected behavior in the OP.

[mkzie2]

Edited by proposal-police: This proposal was edited at 2024-12-19 09:49:34 UTC.

Proposal

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

The quoted test is showing smaller, space in the quoted message is interrupted, and not showing in the same line (Higher than the rest of the text)

What is the root cause of that problem?

The lineHeight of normal text is 20:

App/src/styles/index.ts

Line 240 in 08e571c

lineHeight: variables.fontSizeNormalHeight,

App/src/styles/variables.ts

Line 66 in 2c561ae

fontSizeNormalHeight: getValueUsingPixelRatio(20, 28),

while the lineHeight of the code text and height of the code wrapper on Android is much smaller compared to 20:

App/src/styles/utils/codeStyles/index.android.ts

Lines 3 to 14 in 82b76c1

	const codeWordWrapper: CodeWordWrapperStyles = {
	height: 20,
	};
	const codeWordStyle: CodeWordStyles = {
	height: 18,
	top: 4,
	};
	const codeTextStyle: CodeTextStyles = {
	lineHeight: 15,
	};

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

We can re-apply the codeWordWrapper's height and the codeTextStyle's lineHeight from iOS to Android.

[sakluger]

@getusha could you please review the above proposal when you have a chance?

[melvin-bot]

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

[melvin-bot]

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

[sakluger]

@allgandalf could you please review the proposal above when you have a chance?

[allgandalf]

I will review today

[allgandalf]

Will review tomorrow

[allgandalf]

@mkzie2 I liked your solution, but are you sure that we can merge both of those files ? can we just update the wrong height issue in android file ? saying so cause updates in such core files require a lot of testing and edge cases considerations. are you confident that we can merge both files or just update update the values for the current bug in android file ?

[allgandalf]

bump @mkzie2

[shawnborton]

Awesome, thanks - we can continue to work in the PR. I think the After version (with no constrast adjustments) is probably fine to start?

And just to clarify, outside of doing this option, you are going to pursue Option 3 so we can fix this the real way hopefully once and for all right?

[fabioh8010]

Awesome, thanks - we can continue to work in the PR. I think the After version (with no constrast adjustments) is probably fine to start?

And just to clarify, outside of doing this option, you are going to pursue Option 3 so we can fix this the real way hopefully once and for all right?

Yes, after this PR is merged we can create a follow-up issue to explore the native fix for it. Just wanted to highlight that it will certainly require some effort to get this done as explained before, but I assume it's worth the value, correct?

[shawnborton]

I think it's worth it, yup. I feel like we really need to tame all of these various text styles we have across the platforms.

[fabioh8010]

I think it's worth it, yup. I feel like we really need to tame all of these various text styles we have across the platforms.

Alright! 👍

Updates:

• PR is ready for complete review.

[fabioh8010]

Updates:

• PR being currently reviewed.

[fabioh8010]

Updates:

• PR was merged!

@shawnborton let's create a follow-up issue to address the fix on native side?

[shawnborton]

Can do! Issue is here if you don't mind commenting on it and I will assign to you: #57556

[allgandalf]

@shawnborton can you assign me too for that issue?

[shawnborton]

Can do

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.7-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Use simple styles for code blocks in Native platforms #56924

If no regressions arise, payment will be issued on 2025-03-10. 🎊

For reference, here are some details about the assignees on this issue:

• @allgandalf requires payment (Needs manual offer from BZ)

[melvin-bot]

@allgandalf @sakluger @allgandalf The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[melvin-bot]

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

[grgia]

melvin what

[allgandalf]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other: This was a upsteam bug

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: N/A this bug exits upstream

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion: n/A

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

• [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

Precondition:

• N/A

Test:

For Android/iOS

1. Go to any chat.
2. Send a message that contains inline code blocks and emojis e.g. Lorem ipsum dolor 🚀 sit amet, cons``ectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 🚀
3. Assert a different font and background are being applied to the code blocks and they are properly aligned with the normal text.
4. Go to Settings and switch the Theme.
5. Go to the chat again and assert it's using the corresponding styles from that theme.

For the other Platforms

1. Go to any chat.
2. Send a message that contains inline code blocks and emojis e.g. Lorem ipsum dolor 🚀 sit amet, cons``ectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 🚀
3. Assert the same code block stylings as we have today are being used and they are properly aligned with the normal text.
4. Go to Settings and switch the Theme.
5. Go to the chat again and assert it's using the corresponding styles from that Theme.

Do we agree 👍 or 👎

[melvin-bot]

Payment Summary

Upwork Job

• ROLE: @allgandalf paid $(AMOUNT) via Upwork (LINK)

BugZero Checklist (@sakluger)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1864441841607834076/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[sakluger]

Hey @allgandalf and @grgia - I saw this comment mention that this issue's PR caused a follow-up issue. Would we consider that a regression, or is that follow-up work out of scope of this issue?

[sakluger]

I'm going to send the contract via Upwork now (https://www.upwork.com/nx/wm/offer/106461905). If this issue caused a regression, we can always adjust the payout.

[allgandalf]

Thanks for the offer @sakluger , we knew about the bug reported already during our original PR implementation here:

And we decided to proceed and follow up in issue:

• [$250] Follow up improvements for inline code blocks on native devices #57556

So no, not a regression, c.c. @shawnborton and @fabioh8010 to confirm 🙇

[sakluger]

Thanks @allgandalf! I trust you.

Summarizing payment on this issue:

Contributor: @fabioh8010 - no payment required
Contributor+: @allgandalf $500, paid via Upwork