[$250] Web - In RHP, the emoji does not have the specified size

[nlemma]

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: v9.1.15-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: https://github.com/Expensify/Expensify/issues/448216
Issue reported by: Applause Internal Team

Action Performed:

1. Go to Settings -> Profile and add emoji to your last name
2. Save the changes
3. Look at the RHP

Expected Result:

The emoji in the user's last name appears larger (21px) than the rest of the text (17px).

Actual Result:

The emoji in the user's last name appears larger (19px) than the rest of the text (17px).

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6776225_1742424326580.448216.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021908093096953366928
• Upwork Job ID: 1908093096953366928
• Last Price Increase: 2025-04-11
• Automatic offers:
• ChavdaSachin | Contributor | 106890802

Issue Owner

Current Issue Owner: @flaviadefaria

[melvin-bot]

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

[ChavdaSachin]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-10 10:21:39 UTC.

Proposal

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

Web - In RHP, the emoji does not have the specified size

What is the root cause of that problem?

App/src/components/AccountSwitcher.tsx

Line 155 in 996d5ad

? EmojiUtils.getProcessedText(processedTextArray, styles.initialSettingsUsernameEmoji)

Here we are using styles.initialSettingsUsernameEmoji style for emojis which is 19 px.

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

Change emoji size to 21 px here.

App/src/styles/variables.ts

Line 231 in 996d5ad

fontSizeUsernameEmoji: 19,

App/src/styles/index.ts

Lines 1845 to 1847 in 996d5ad

	initialSettingsUsernameEmoji: {
	fontSize: variables.fontSizeUsernameEmoji,
	},

There could be small style changes which could be handled during PR phase
Like apply alignSelfCenter to Avatar for better visual alignment

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

If we decide to make emojis same size as the text then,

Replace this line with the code snippet.

App/src/components/AccountSwitcher.tsx

Line 162 in a08e8f7

{processedTextArray.length !== 0 ? getProcessedText(processedTextArray, styles.initialSettingsUsernameEmoji) : currentUserPersonalDetails?.displayName}

    {currentUserPersonalDetails?.displayName}

And perform some cleanup, since this will by default apply text font size to the emojis.

[github-actions]

⚠️ @ChavdaSachin Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[melvin-bot]

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

[melvin-bot]

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

[jjcoffee]

Hmm are we able to see where the regression test came from? The only issue I could find is #47547 which states:

Verify that emoji in user's last name appear larger (25px) compared to the rest of the text (22px)

So there must have been a decision to change it at some point! cc @flaviadefaria

[melvin-bot]

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