Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Emoji picker - Box changes size when you search for an emoji on Windows Chrome #2446

Closed
isagoico opened this issue Apr 17, 2021 · 24 comments · Fixed by #2955
Closed

Emoji picker - Box changes size when you search for an emoji on Windows Chrome #2446

isagoico opened this issue Apr 17, 2021 · 24 comments · Fixed by #2955
Assignees
@parasharrajat @NicMendonca
Labels
Engineering External Added to denote the issue can be worked on by a contributor Improvement Item broken or needs improvement. Weekly KSv2

Comments

@isagoico
Copy link

isagoico commented Apr 17, 2021 •
edited by NicMendonca
Loading

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

Expected Result:

Size of box is consistent and scroll bar appears.

Actual Result:

Size of box is changing after you write something and scroll bar appears once I enter two characters

Action Performed:

  1. Log in to expensify cash
  2. Go to a conversation and click on the emoji icon
  3. Search for an emoji

Workaround:

No need for workaround, visual issue.

Platform:

Where is this issue occurring?

Web ✔️
iOS
Android
Desktop App
Mobile Web

**Version Number:**1.0.24-0

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug5023850_Recording__22.mp4

image

Expensify/Expensify Issue URL: https://github.com/Expensify/Expensify/issues/163712

Upwork job posting: https://www.upwork.com/jobs/~01bc52bea5b0840871
@isagoico isagoico changed the title Emoji picker Emoji picker - Box changes size when you search for an emoji Apr 17, 2021
@isagoico isagoico added the DeployBlockerCash This issue or pull request should block deployment label Apr 17, 2021
@OSBotify OSBotify mentioned this issue Apr 17, 2021
Closed
66 tasks
@isagoico
Copy link
Author

isagoico commented Apr 17, 2021 •
edited
Loading

Found while QAing #1991

@isagoico isagoico added Daily KSv2 AutoAssignerTriage Auto assign issues for triage to an available triage team member labels Apr 23, 2021
@MelvinBot
Copy link

Triggered auto assignment to @RachCHopkins (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

@MelvinBot MelvinBot removed the AutoAssignerTriage Auto assign issues for triage to an available triage team member label Apr 23, 2021
@roryabraham
Copy link
Contributor

@stitesExpensify Do you think we should block deploys on this? I'm thinking that it's not so bad that it's worth blocking a prod deploy

@stitesExpensify
Copy link
Contributor

No, I don't think this is worth blocking over.

@roryabraham
Copy link
Contributor

Cool, going to remove the DeployBlockerCash label and check it off on the deploy checklist. We should still fix it ASAP though 🙂

@roryabraham roryabraham removed the DeployBlockerCash This issue or pull request should block deployment label Apr 26, 2021
@jasperhuangg
Copy link
Contributor

Looks like this is unique to Web on Windows, I just tried it on Chrome on my Mac and it doesn't happen.

@jasperhuangg jasperhuangg changed the title Emoji picker - Box changes size when you search for an emoji Emoji picker - Box changes size when you search for an emoji on Windows Chrome Apr 27, 2021
@stitesExpensify
Copy link
Contributor

I'm curious if the windows emojis are just displaying larger for some reason? Also holy crap windows emojis are ugly 😂

@isagoico
Copy link
Author

isagoico commented Apr 28, 2021 •
edited
Loading

We were able to reproduce this too on iOS Posted this in the wrong GH, please ignore.

Image.from.iOS.3.MOV

@roryabraham
Copy link
Contributor

@isagoico Maybe it's just me, but I'm not spotting the bug in the latest video you posted

@isagoico
Copy link
Author

isagoico commented Apr 28, 2021 •
edited
Loading

OH man, my apologies I completely posted this in the wrong GH, I'll post it in the correct one. Thanks Rory!

Edit: correct issue here #2490

@RachCHopkins
Copy link
Contributor

Sorry team, for some reason I only could see this GH as of yesterday. Will triage tonight when I can get access to a windows machine.

@RachCHopkins
Copy link
Contributor

Ok, so I just can't get past step 2!

Go to a conversation and click on the emoji icon

Where is the emoji icon?

However... I did notice that when I right-click to access the emoji picker it appears at the left, above "write something" and does not change size.

image

@isagoico
Copy link
Author

isagoico commented May 6, 2021

@RachCHopkins Emoji feature is available in the staging environment. Just navigate to staging.expensify.cash and you'll see it 😬 .

@isagoico
Copy link
Author

isagoico commented May 9, 2021

Issue reproducible during today's KI retests

@RachCHopkins
Copy link
Contributor

Yep, I just finally got a chance to reproduce it also!!

@RachCHopkins RachCHopkins added Engineering Improvement Item broken or needs improvement. Weekly KSv2 labels May 10, 2021
@MelvinBot
Copy link

Triggered auto assignment to @TomatoToaster (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

@RachCHopkins RachCHopkins removed the Daily KSv2 label May 10, 2021
@RachCHopkins RachCHopkins removed their assignment May 10, 2021
@TomatoToaster
Copy link
Contributor

Yeah this is a bizzare bug. It looks like there's no right padding on these emojis sometimes, and sometimes there is:
image

image

Not sure the reason for this or why it happens on windows, but I think this makes for a good External issue.

@TomatoToaster TomatoToaster added the External Added to denote the issue can be worked on by a contributor label May 11, 2021
@MelvinBot
Copy link

Triggered auto assignment to @NicMendonca (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

@MelvinBot MelvinBot added the Daily KSv2 label May 11, 2021
@TomatoToaster TomatoToaster removed their assignment May 11, 2021
@NicMendonca
Copy link
Contributor

Created job in Upwork: https://www.upwork.com/jobs/~01bc52bea5b0840871

@NicMendonca NicMendonca added Exported and removed Daily KSv2 labels May 11, 2021
@MelvinBot
Copy link

Triggered auto assignment to @marcaaron (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

@NicMendonca NicMendonca removed their assignment May 11, 2021
@marcaaron
Copy link
Contributor

marcaaron commented May 14, 2021 •
edited
Loading

Most likely just need to fix the styling so that there is a fixed with for the popover on web/desktop. It is incorrectly using a minWidth:

https://github.com/Expensify/Expensify.cash/blob/08a000516b4e222643543c2427c5bb22e99be273/src/styles/styles.js#L827

Which means the scroll bar will increase the overall width of the containing element.

@parasharrajat
Copy link
Member

parasharrajat commented May 14, 2021 •
edited
Loading

I suggest using a fixed width.

width: CONST.EMOJI_PICKER_SIZE,

and on Mobile 100% of the screen.

I saw also found that emojis are cropping thus we need to change the overall styling to make it better.

@marcaaron
Copy link
Contributor

@parasharrajat sounds good to me.

@parasharrajat parasharrajat mentioned this issue May 16, 2021
Merged
5 tasks
@isagoico
Copy link
Author

Issue reproducible during today's KI retests

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@parasharrajat parasharrajat

@NicMendonca NicMendonca

Labels
Engineering External Added to denote the issue can be worked on by a contributor Improvement Item broken or needs improvement. Weekly KSv2
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: Emoji Picker Styles parasharrajat/App
10 participants
@MelvinBot @TomatoToaster @parasharrajat @NicMendonca @jasperhuangg @RachCHopkins @marcaaron @stitesExpensify @isagoico @roryabraham