[$500] Status - Emoji in custom status holder is not centered

[kbecciv]

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: v1.4.33-3 Reproducible in staging?: y Reproducible in production?: new feature 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:

Issue found when executing PR https://github.com/Expensify/App/pull/34795

Action Performed:

1. Go to Settings > Profile > Status.
2. Select a square emoji and save it.
3. Return to home page.

Expected Result:

The emoji in custom status holder should be centered.

Actual Result:

The emoji in custom status holder is not centered.

Workaround:

Unknown

Platforms:

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

• [ ] Android: Native
• [ ] Android: mWeb Chrome
• [x] iOS: Native
• [ ] iOS: mWeb Safari
• [x] 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/~01081acf60824f9786
• Upwork Job ID: 1752394398963744768
• Last Price Increase: 2024-03-26

[github-actions[bot]]

:wave: Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot[bot]]

Triggered auto assignment to @madmax330 (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[kbecciv]

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

[Krishna2323]

Proposal

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

Status - Emoji in custom status holder is not centered

What is the root cause of that problem?

This is a browser specific issue, more details here.

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

We need to increase the font-size and use scale property to get the emoji back in original size.

For chrome:

    scale: .7;
    font-size: 15px;

For safari:

     font-size: 13px;
     scale: .7;

Result

[situchan]

cc: @jayeshmangwani

[jayeshmangwani]

Some emojis are aligned differently on different platforms as right now we are using text to display emojis and it taking space different on platform basis, and I think that was discussed on the original PR. does we need to fix text of emoji on the platform basis ? cc: @shawnborton @dubielzyk-expensify @mollfpr

[shawnborton]

How are we currently handling the alignment? Are we just using text-align: center or something like that here?

[jayeshmangwani]

Currently we are adding the alignItemsCenter & justifyContentCenter to the parent View of the Text component https://github.com/Expensify/App/blob/cfb6f2c9b36c28ebc1e78189f65c97278cd885aa/src/styles/index.ts#L3930-L3932

[shawnborton]

Hmm, I have no idea then.

When we test this with Figma, basically vertically and horizontally centering the text gives us pretty predictable results with centering:

The only thing I could think to do would be to give the emoji text a set line height, height, and width. And then make sure this view also does vertical and horizontal centering?

[mollfpr]

Some emojis are aligned differently on different platforms as right now we are using text to display emojis and it taking space different on platform basis, and I think that was discussed on the original PR.

I don’t think we can find a quick fix for this. Either way we want to fix this or close it, this shouldn’t be a blocker.

[dannymcclain]

The only thing I could think to do would be to give the emoji text a set line height, height, and width. And then make sure this view also does vertical and horizontal centering?

This is where my mind went too.

[melvin-bot[bot]]

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

[mountiny]

I agree this does not have to be blocker

[melvin-bot[bot]]

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

[jayeshmangwani]

The only thing I could think to do would be to give the emoji text a set line height, height, and width. And then make sure this view also does vertical and horizontal centering?

Right now we are doing similar thing, we have a parent view of 20px height width and alignItems: center and justifyContent: center, with only child emoji text. we have a emoji text size 9 ,we didnt passed the line height, we can pass the lineHeight getValueUsingPixelRatio(9, 15) and do the text align center cc: @mollfpr

[dubielzyk-expensify]

Commented a similar thing in Slack, but how do we do this in other parts of the app where we have emojis? It doesn't seem to be an issue in other parts so while it is smaller in size, I'd love to use similar logic to the emoji reactions etc. If that's possible?

[abdulrahuman5196]

We have only one proposal here https://github.com/Expensify/App/issues/35389#issuecomment-1916811945 from @Krishna2323

But it doesn't have clear rootcause and assumption to have left spacing to solve the issue.

So still waiting for proposals or suggestions

[Krishna2323]

@dubielzyk-expensify @abdulrahuman5196 , I also found that in other parts of the app, the emojis are properly centered, the only difference here and the others parts is the font-size, I believe this is the only place where we use font-size less than 14. After setting status emoji font-size to 14 the emojis are properly centered, but we want 9px here, so I think we can set the font-size to 14 and use transform: scale(.65);(which will be 9.1) to make it smaller. This works very well for every emoji. I also tried to set lineHeight to a smaller value but that doesn't work.

cc: @shawnborton

[dubielzyk-expensify]

Clever solution. We'll probably have to play around with the scaling as it can probably be closer to scale(.75), but that's an awesome way to do it. Looks good to me with those examples

[madmax330]

We're still waiting on proposals here right?

[Krishna2323]

@abdulrahuman5196, can you pls check this

[melvin-bot[bot]]

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

[Krishna2323]

@shawnborton, what do you think about this?

[shawnborton]

Yeah, as @dubielzyk-expensify mentioned above, that seems like a clever solution!

[melvin-bot[bot]]

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

[abdulrahuman5196]

Reviewing now

[abdulrahuman5196]

@Krishna2323 Thanks for the updated proposal. I have questions

1. I am assuming the solution was arrived at a try and error method. Do let me know if there is some root cause/ references for why the transform would work/ is working?
2. Was this solution tested in all platforms and does it work properly in all platforms?

[melvin-bot[bot]]

@madmax330, @abdulrahuman5196 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[abdulrahuman5196]

@Krishna2323 Could you update on the above? https://github.com/Expensify/App/issues/35389#issuecomment-1934762655

[Krishna2323]

Will provide updates today.