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

@flaviadefaria

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:

Go to Settings -> Profile and add emoji to your last name
Save the changes
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:

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

@flaviadefaria

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.

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

@ChavdaSachin

⚠️ @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).

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

@jjcoffee

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

@flaviadefaria

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

@jjcoffee

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

BugZero Checklist:

[Contributor] Classify the bug:

Bug classification

Source of bug:

1a. Result of the original design (eg. a case wasn't considered)
1b. Mistake during implementation
1c. Backend bug
1z. Other:

Where bug was reported:

2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
2b. Reported on staging (eg. found during regression or PR testing)
2d. Reported on a PR
2z. Other:

Who reported the bug:

[Contributor] 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: N/A - this was just not implemented
[Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source 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: N/A
[Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.
[BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

Link to issue: https://github.com/Expensify/Expensify/issues/516831

Regression Test Proposal

Precondition:

An account having emojis in the name.

Test:

Open settings page from bottom tab navigator.
Look at the name in the account switcher and verify both text and emojis are the same size (17px)

Do we agree 👍 or 👎

Should be due today

@flaviadefaria

@flaviadefaria payment is overdue here, could you please pay it out.

@ChavdaSachin

@ChavdaSachin @jjcoffee I'm catching up here and have a few questions:

It looks like there was a regression linked to this issue, right? The one fixed here? So this issue shouldn't get full payment I believe, but correct me if I'm wrong.

Regarding payment for this issue, the integration seems to have failed. Is this correct?

@ChavdaSachin is paid via Upwork, still needs to be hired and paid
@jjcoffee is paid via NewDot

@flaviadefaria

@flaviadefaria actually full bounty should be paid here.

Let me summarize it for you.

Originally this GH was only ment to match the emoji size with rest of the text. See the expected behavior.

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

And design team's input.

Yeah, we should undo that and just use the same text size for everything there.
#59594 (comment)

But during PR phase the team noticed that there's and additional alignment issue and requested us to fix it as well.
Which clearly was not related to current GH (reference #60151 (comment)) but still I along with @jjcoffee fixed the issue out of generosity (Which kinda backfired and a simple change became a hideous task later).
And if it wasn't for that additional issue there would have been no regression in the first place.

And regression was caught during staging, but due to the smaller significance it was decided to let the changes be pushed to the production and fix the regression as a followup PR.

So IMO even doubling the bounty should be considered here(fixing additional issue).

But since I am not super familiar with the rules, I would be happy to follow whatever @jjcoffee thinks here.

Thank you.

@ChavdaSachin

@ChavdaSachin is paid via Upwork, still needs to be hired and paid

Some confusion here, I am actually already hired here. #59594 (comment)

cc. @flaviadefaria

@ChavdaSachin

I agree that we shouldn't apply a regression penalty here. The additional issue that was fixed was present on a specific iOS device size and already present in other input fields (see here).

@ChavdaSachin is also right that extra scope was introduced to fix an alignment issue, which is what ended up causing the regression.

Thanks for clarifying, I'll issue the original payment for the issue given your explanations.

@ChavdaSachin

Payment Summary

Contributor: @ChavdaSachin paid $250 via Upwork (paid)
Contributor+: @jjcoffee due $250 via NewDot (needs to be requested)

Thank you.

@jjcoffee

$250 approved for @jjcoffee

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

26 remaining items

BugZero Checklist:

Regression Test Proposal

Precondition:

Test:

Payment Summary

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	initialSettingsUsernameEmoji: {
	fontSize: variables.fontSizeUsernameEmoji,
	},

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Apr 3, 2025

ChavdaSachin commented on Apr 3, 2025

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

github-actions commented on Apr 3, 2025

melvin-bot commented on Apr 4, 2025

melvin-bot commented on Apr 4, 2025

jjcoffee commented on Apr 4, 2025

melvin-bot commented on Apr 8, 2025

26 remaining items

jjcoffee commented on Jun 13, 2025

BugZero Checklist:

Regression Test Proposal

Precondition:

Test:

ChavdaSachin commented on Jun 16, 2025

ChavdaSachin commented on Jun 20, 2025

flaviadefaria commented on Jun 23, 2025

ChavdaSachin commented on Jun 23, 2025

ChavdaSachin commented on Jun 23, 2025

jjcoffee commented on Jun 23, 2025

flaviadefaria commented on Jun 23, 2025

flaviadefaria commented on Jun 23, 2025

Payment Summary

ChavdaSachin commented on Jun 23, 2025

garrettmknight commented on Jul 8, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions