[HOLD for payment 2024-06-03] [$250] LHN: Emoji is misaligned with message

[m-natarajan]

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.68-3
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: @tgolen
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1714492986409729

Action Performed:

1. Send a message with emoji from A to B
2. Login as B and observe the LHN

Expected Result:

There is no misalignment with emoji

Actual Result:

Emoji is misaliged

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01d8085509ba977455
• Upwork Job ID: 1785441141151866880
• Last Price Increase: 2024-05-07
• Automatic offers:
• samilabud | Contributor | 0
• ikevin127 | Contributor | 0

Issue Owner

Current Issue Owner: @isabelastisser

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[samilabud]

Proposal

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

LHN: Emoji is misaligned with message in focus mode

What is the root cause of that problem?

When we are in focus mode we are showing the content of each conversation in the same line, this makes the content try to fit but we are also adding an unnecessary line height and min height which cause the misalignement.

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

We should remove the line height and min height when user is in focus mode from OptionRowLHN component, like:

const alternateTextStyle = isInFocusMode
        ? [textStyle, styles.textLabelSupporting, styles.optionAlternateTextCompact, styles.ml2, style]
        : [textStyle, styles.optionAlternateText, styles.textLabelSupporting, style];

Testing the change in IOS:

IOS.test.misaligned.mp4

Testing in other platforms:
Android Chrome:

Android:

IOS Safari:

Mac Chrome:

[kaushiktd]

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

LHN: Emoji is misaligned with message in focus mode

What is the root cause of that problem?

Currently, we've observed that emojis within the LHN can appear misaligned when users are in focus mode. This misalignment not only affects the visual consistency of the interface but also may lead to usability issues, particularly for users who rely on visual cues for navigation.

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

adjusting the lineHeight property from its current value to a slightly larger value. By increasing the lineHeight, we ensure that there is adequate vertical spacing between lines of text, including emojis, thereby improving their alignment within the LHN.

App/src/styles/index.ts

Line 1832 in 57d2aee

lineHeight: variables.lineHeightXLarge,

we can use this

lineHeight: variables.lineHeightXXXLarge,

ScreenShot:-

[isabelastisser]

@mananjadhav, please review the proposals above. Thanks!

[mananjadhav]

I am not sure if we should update the lineHeight, it can have impact on other areas as well. @m-natarajan Did this occur recently? or the bug exists since earlier?

I am also going to tag @Expensify/design to see if they have any inputs on the lineHeight.

[shawnborton]

Hmm I would think the emoji should just have the same line height as the text that is next to it, no?

[dubielzyk-expensify]

Yeah I also assumed that would fix the issue

[samilabud]

Hi @shawnborton and @dubielzyk-expensify,

It would be good to know what the target is, because it looks like the one reported here is for this misalignment:

After my proposal I put all the content text in the same line height:

Even in gmail emoticons can cause the effect of needing more line height depending on which one it is, see this:

Also even here in github (I think this should be the correct alignment):
Hello 🏰

This is not noticeable in emoticons such as 😄:
Hello 😄
Hello 🏰😄

[kaushiktd]

@shawnborton raises an important consideration regarding the alignment of emojis with adjacent text. While initially, both text height and lineHeight were set to the same values, we encountered issues with misalignment. Despite having the same line height as the adjacent text, emojis may still appear misaligned due to variations in rendering, inherent size differences, and platform-specific rendering behaviors.

[shawnborton]

I agree that this one is the correct alignment I would expect - and it looks like the emoji is not getting any special kind of line height or anything like that, it just follows whatever is being applied on the p element:

[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]

@tgolen, @mananjadhav, @isabelastisser Eep! 4 days overdue now. Issues have feelings too...

[isabelastisser]

@mananjadhav, can you please provide an update? Thanks!

[isabelastisser]

Not overdue.

[isabelastisser]

Waiting for @mananjadhav to update.

[mananjadhav]

Still waiting on proposals.

I don't see any proposals that solve this in an accurate way. I agree that Emojis being rendered different on platforms, apps and devices. But if the expectation is that the emoji should pick the line height of the given<p> tag, we are looking at proposals to solve this instead of updating the line height for generic style.

[melvin-bot]

Current assignee @tgolen is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

📣 @samilabud 🎉 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 📖

[ikevin127]

@tgolen @isabelastisser Can any of you help with assignment for me as reviewer ? I need this for both the issue and PR #42162 (reviewer was auto-assigned already).

@samilabud Is PR ready for review ?

[melvin-bot]

📣 @ikevin127 🎉 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 📖

[samilabud]

@samilabud Is PR ready for review ?

Yes it is

[ikevin127]

@tgolen Can you please also remove the auto-assigned reviewer from the PR #42162 and add me so I can start working on the checklist ?

[tgolen]

Done!

[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 1.4.75-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fixed emoji misaligned in focus mode #42162

If no regressions arise, payment will be issued on 2024-06-03. 🎊

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

• @samilabud requires payment automatic offer (Contributor)
• @ikevin127 requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@ikevin127] The PR that introduced the bug has been identified. Link to the PR:
• [@ikevin127] 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:
• [@ikevin127] A discussion in #expensify-bugs 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:
• [@ikevin127] Determine if we should create a regression test for this bug.
• [@ikevin127] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@isabelastisser] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[ikevin127]

• [@ikevin127] The PR that introduced the bug has been identified. Link to the PR: https://github.com/Expensify/App/pull/10800/files#diff-b2f48329fb60a24fe856cc6811a7aa94974bc2d5ad2a2d978fda3d885e9112edR73-R75
  Note: The problematic style was there from the beginning, it just wasn't tested on compact (focus) mode on iOS: Native to notice the alignment issue.
• [@ikevin127] 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: https://github.com/Expensify/App/pull/10800/files#r1621430744
• [@ikevin127] A discussion in #expensify-bugs 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: ❌

No need to start a discussion or update the PR review checklist since this was a rare platform specific styling edge case.

• [@ikevin127] Determine if we should create a regression test for this bug.
• [@ikevin127] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

No need for a regression test since this was a rare platform specific styling edge case.

[isabelastisser]

The payments were processed in Upwork. All set!