App: [HOLD for payment 2024-01-09] [$500] Chat - Single line code blocks are not vertically centered

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.0-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: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Expensify/Expensify Issue URL: Issue reported by: Applause-Internal Team Slack conversation: @

Action Performed:

Pre-requisite: user must be logged in.

  1. Go to any chat.
  2. Send a single line code block (like test)

Expected Result:

The text inside the block should be centered.

Actual Result:

The text is horizontally centered, but not vertically, is closer to the bottom.

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

Bug6278669_1700114885241!IMG_E1595

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~0173268787598947ed
  • Upwork Job ID: 1725103891916292096
  • Last Price Increase: 2023-12-01
  • Automatic offers:
    • tienifr | Contributor | 28013519

About this issue

  • Original URL
  • State: closed
  • Created 7 months ago
  • Comments: 66 (40 by maintainers)

Most upvoted comments

I couldn’t find the responsible PR that caused this.

We can add a test case if we want. Here are the steps -

  1. Open any chat
  2. Send a message mixed with emoji and alphabets in single line code block (i.e. 😁 Hi)
  3. Verify that emoji and alphabets are vertically centered.

Cool, sounds good! @tienifr once you have the PR ready for review, don’t forget to add the Design label 😃

It looks like the text isn’t in the center. It’s now positioned closer to the top.

@thesahindia it might look a bit to the top because the text there has only letters that are more aligned to the top (h, l). But it’s actually the natural look when it has lineHeight completely equal to fontSize (aka being center), feel free to try it on your end as well.

I put below an example of the text with letters that are aligned to the bottom as well (j) so it’s more clear that on the whole, it’s balanced and centered. If you’re saying it should be more to the bottom, then that means the j will be too close to the bottom border which is not correct. Screenshot 2023-12-01 at 8 50 14 PM