[Payment due meow?][$1000] Update the emoji font library for Windows

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open the app
2. Go to any chat > click on emoji
3. Copy emojis and scroll down
4. You'll notice that emoji header hasn't covered some remaining space on the right

Expected Result:

No space should be visible on the right side of the emoji header.

Actual Result:

Some space is visible on the right side.

Deliverable:

Update the emoji font library for Windows

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.34-1
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
Notes/Photos/Videos: Any additional supporting documentation

outline-right1.1.mp4

Recording.2272.mp4

Expensify/Expensify Issue URL:
Issue reported by: @aman-atg
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1687788512893349

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013bc36e1574b8dee0
• Upwork Job ID: 1680007465277968384
• Last Price Increase: 2023-10-18

[melvin-bot]

Triggered auto assignment to @mallenexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[samh-nl]

Proposal

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

The emoji header does not fully extend to the right.

What is the root cause of that problem?

Some emojis are wider than the 12.5% width that is allocated to them, causing an overflow.
The header has a padding-right applied to it, causing a gap that allows these extra wide emojis to get in-between.

App/src/styles/StyleUtils.js

Lines 1151 to 1155 in 0bbf3fc

	function getEmojiPickerListHeight(hasAdditionalSpace, windowHeight) {
	const style = {
	...spacing.ph4,
	height: hasAdditionalSpace ? CONST.NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT + CONST.CATEGORY_SHORTCUT_BAR_HEIGHT : CONST.NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT,
	};

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

There are two options:

• Increase the header width.
• Add a negative margin to the header of -16px to remove the right side gap in the header. Alternatively, we remove the padding-right from the parent container and only apply it to the View component that contains the emojis.

Fixed result:

fixed-emoji-header-gap.mp4

What alternative solutions did you explore? (Optional)

Alternative 1: Hiding the overflow (or specifically overflow on x-axis) of the emojis to ensure that extra wide emojis are contained.
Alternative 2: Allocate the appropriate width for each emoji, however this will cause misalignment problems (the emojis are displayed in a fixed cell-width grid for neat alignment).

[melvin-bot]

📣 @samh-nl! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[samh-nl]

Contributor details
Your Expensify account email: h.sam.lw@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~016c982fe69f86aff8

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[melvin-bot]

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

[melvin-bot]

@mallenexpensify Eep! 4 days overdue now. Issues have feelings too...

[mallenexpensify]

@aman-atg unable to reproduce in Chrome or Safari, should I be doing something differently?

Safari

2023-07-05_15-05-33.mp4

Chrome

2023-07-05_15-03-16.mp4

[aman-atg]

@aman-atg unable to reproduce in Chrome or Safari, should I be doing something differently?

Same situation for me in mac, but I can reproduce it on Linux (Chrome).

[mallenexpensify]

Kicking the can a bit here as it's not high value, will attempt to test again via browserstack later this week. Thanks for the update/reply @aman-atg

[aman-atg]

This issue is reproducible on Windows too, just wanted to point out as it might aid in testing.

[mallenexpensify]

Having issues access windows web via browserstack, asked internally about it here

[melvin-bot]

@mallenexpensify this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

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

[melvin-bot]

Current assignee @mallenexpensify is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

This issue has not been updated in over 15 days. @dannymcclain, @mallenexpensify, @thienlnam, @aimane-chnaif, @s-alves10 eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[mallenexpensify]

Looks like the title didn't auto-update here with payment date.

@aimane-chnaif and @s-alves10 , can you please accept the job and reply here once you have?
https://www.upwork.com/jobs/~017f4cce5c7e864cc5

[aimane-chnaif]

This is eligible for bonus

• PR created before announcement
• PR was in ready to merge state within 3 days but just waiting confirmation from design team

[aimane-chnaif]

Based on #21923 (comment), I think @s-alves10 and @allstarsmen should receive $750 for each

[mallenexpensify]

oooof, a lot more going on here than I initially expected. Thanks for the comments @aimane-chnaif
Confirming the bonus is applicable because no changes were needed from the time @aimane-chnaif 🎀 and it was merged.

Reporter: @aman-atg paid $250 via Upwork
Contributor: @allstarsmen paid $750 via Upwork
Contributor: @s-alves10 paid $750 via Upwork
Contributor+: @aimane-chnaif paid $1500 via Upwork.

All, can you please accept the job and reply here once you have?
https://www.upwork.com/jobs/~017f4cce5c7e864cc5

[aman-atg]

@mallenexpensify Trying to apply to the job but getting "Only invited users can find, view and apply to the job" while applying.

[allstarsmen]

@mallenexpensify Trying to apply to the job but getting "Only invited users can find, view and apply to the job" while applying.

I got that message too

[melvin-bot]

@dannymcclain, @mallenexpensify, @thienlnam, @aimane-chnaif, @s-alves10 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[mallenexpensify]

@aman-atg @allstarsmen , def was my fault, can you please apply for the job and comment here once you have?
https://www.upwork.com/jobs/~017f4cce5c7e864cc5

[allstarsmen]

My proposal was submitted on Upwork.

[aman-atg]

@mallenexpensify Have applied to the job on Upwork!

[mallenexpensify]

@s-alves10 and @aimane-chnaif have been paid via Upwork, payment breakdown above has been updated.

@allstarsmen @aman-atg , can you please accept the job and reply here once you have?
https://www.upwork.com/jobs/~017f4cce5c7e864cc5

[allstarsmen]

@mallenexpensify I have accepted the job.

[mallenexpensify]

Thanks @allstarsmen , you've been paid, main payment comment above has been updated.
Waiting on @aman-atg to accept the offer then we'll close.

@aimane-chnaif , do you think we should create a regression test for this? I kinda feel like we could if it were a monthly design-related one, but I'm unsure what the steps would be, besides 'review emoji on windows to ensure they're correct'

[aimane-chnaif]

Windows emojis will not likely to be updated again.
And I believe regression test for emojis already exists for MacOS web platform

[mallenexpensify]

Thanks @aimane-chnaif , I'm checking with QA in an internal Slack room
https://expensify.slack.com/archives/C9YU7BX5M/p1701287496515229

[mallenexpensify]

No need to add a regression test.

[aman-atg]

@mallenexpensify I've accepted the offer!

[mallenexpensify]

Thx @aman-atg , you were paid $250. The main payment comment above has been updated.