[WARNING] detect mobile with maxTouchPoints

src/helpers/userAgent.ts

@@ -21,4 +21,4 @@ export const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') >
 
 export const isMobileSafari = isSafari && isAppleMobile;
 
-export const isMobile = /* screen.width && screen.width < 480 ||  */navigator.userAgent.search(/iOS|iPhone OS|Android|BlackBerry|BB10|Series ?[64]0|J2ME|MIDP|opera mini|opera mobi|mobi.+Gecko|Windows Phone/i) != -1;
+export const isMobile = /* screen.width && screen.width < 480 ||  */navigator.maxTouchPoints > 0 && navigator.userAgent.search(/iOS|iPhone OS|Android|BlackBerry|BB10|Series ?[64]0|J2ME|MIDP|opera mini|opera mobi|mobi.+Gecko|Windows Phone/i) != -1;

src/scss/mixins/_respondTo.scss

@@ -39,4 +39,8 @@
   @else if $media == esg-bottom {
     @media only screen and (max-height: 569px) { @content; }
   }
+
+  @else if $media == esg-bottom-new {
+    @media only screen and (max-height: 569px), only screen and (max-width: $small-screen) { @content; }
+  }
 }

src/scss/partials/_autocompleteHelper.scss

@@ -15,6 +15,10 @@
 	left: 0;
   width: auto !important;
 
+	@include respond-to(esg-bottom-new) {
+		bottom: calc(100% + .5rem);
+	}
+
   &:not(.is-visible) {
 		display: none;
 	}

src/scss/partials/_chat.scss

@@ -110,7 +110,7 @@ $chat-helper-size: 39px;
 
 	.menu-send {
 		top: auto;
-    bottom: calc(100% + 10px);
+    bottom: calc(100% + .5rem);
     //right: var(--chat-input-padding);
 	}
 	
@@ -817,7 +817,11 @@ $chat-helper-size: 39px;
 
 		.btn-menu {
 			right: calc(var(--padding-horizontal) * -1 - .125rem);
-			bottom: calc(100% + 1.25rem);
+			bottom: calc(100% + 1.125rem);
+
+			@include respond-to(esg-bottom-new) {
+				bottom: calc(100% + .875rem);
+			}
 			
 			> div {
 				padding: 0 38px 0 16px;

src/scss/partials/_emojiDropdown.scss

@@ -18,10 +18,10 @@
 	@include respond-to(esg-top) {
 		position: absolute !important;
 		left: $chat-padding;
-		bottom: 84px;
-		width: 420px !important;
-		height: 420px;
-		max-height: 420px;
+		bottom: 5.125rem;
+		width: 26.25rem !important;
+		height: 26.25rem;
+		max-height: 26.25rem;
 		box-shadow: 0px 5px 10px 5px rgba(16, 35, 47, .14);
 		z-index: 3;
 		border-radius: $border-radius-medium;