Mobile Web Browser: Emoji picker is not in viewport when opened (Iphone)

[kkovrizhenko]

Description:

Steps to reproduce:

1. Go to Rocket Chat using Mobile web browser (or simulator fo relevant screen size)
2. Open any DM or chat room
3. Click on Emoji icon in the input area

Expected behavior:

Emoji picker is opened

Actual behavior:

Emoji picker is not visible, hidden under left side of the screen

[ramrami]

I have the same problem.
I think it's because of this condition in rocketchat-emoji/client/lib/EmojiPicker.js#setPosition:

		if (left + this.width >= window.innerWidth) {
			cssProperties.left = left - this.width - windowBorder;
		}

[zigfighter]

This problem is around quite a while appartenly and it is not only Iphone but all current Browsers on android mobiles as well.

[reetp]

@zigfighter carried out some extensive testing on latest 0.70.4 and this is still present across browsers.

[ramrami]

@zigfighter @reetp I just opened a fix for this problem #12457

[zigfighter]

@ramrami looking good ! needs to be reviewed