[HOLD for payment 2024-06-20] [$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 contributors@expensify.com 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 #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
• 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/~01081acf60824f9786
• Upwork Job ID: 1752394398963744768
• Last Price Increase: 2024-04-30
• Automatic offers:
• abdulrahuman5196 | Reviewer | 0
• Krishna2323 | Contributor | 0

Issue Owner

Current Issue Owner: @abekkala

[github-actions]

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

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

App/src/styles/index.ts

Lines 3930 to 3932 in cfb6f2c

	sidebarStatusAvatar: {
	alignItems: 'center',
	justifyContent: 'center',

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