From 20c8222b13f3256f8d2d936b4151ec966b70923f Mon Sep 17 00:00:00 2001
From: Ramrami Mohamed <ramrami.mohamed@gmail.com>
Date: Mon, 29 Oct 2018 18:31:49 +0000
Subject: [PATCH] [FIX] EmojiPicker position on small screens (#12457)

---
 packages/rocketchat-emoji/client/lib/EmojiPicker.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/rocketchat-emoji/client/lib/EmojiPicker.js b/packages/rocketchat-emoji/client/lib/EmojiPicker.js
index e305ce3f208ad..fcb99084508f7 100644
--- a/packages/rocketchat-emoji/client/lib/EmojiPicker.js
+++ b/packages/rocketchat-emoji/client/lib/EmojiPicker.js
@@ -55,21 +55,23 @@ RocketChat.EmojiPicker = {
 	},
 	setPosition() {
 		const windowHeight = window.innerHeight;
+		const windowWidth = window.innerWidth;
 		const windowBorder = 10;
 		const sourcePos = $(this.source).offset();
 		const { left, top } = sourcePos;
 		const cssProperties = { top, left };
+		const isLargerThanWindow = this.width + windowBorder > windowWidth;
 
 		if (top + this.height >= windowHeight) {
 			cssProperties.top = windowHeight - this.height - windowBorder;
 		}
 
 		if (left < windowBorder) {
-			cssProperties.left = windowBorder;
+			cssProperties.left = isLargerThanWindow ? 0 : windowBorder;
 		}
 
-		if (left + this.width >= window.innerWidth) {
-			cssProperties.left = left - this.width - windowBorder;
+		if (left + this.width >= windowWidth) {
+			cssProperties.left = isLargerThanWindow ? 0 : windowWidth - this.width - windowBorder;
 		}
 
 		return $('.emoji-picker').css(cssProperties);