[FIX] EmojiPicker position on small screens (#12457)

RocketChat · Oct 29, 2018 · 20c8222 · 20c8222
1 parent 773c387
commit 20c8222
Showing 1 changed file with 5 additions and 3 deletions.
diff --git 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);