[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 contributors@expensify.com 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.