From 83e226820d63279603ecaacbc457a6b26a8d8138 Mon Sep 17 00:00:00 2001
From: Stephen Hand <steveh@techmatters.org>
Date: Mon, 4 May 2026 16:55:47 +0100
Subject: [PATCH 1/2] hide emoji picker for mobile

---
 aselo-webchat-react-app/src/components/MessageInput.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/aselo-webchat-react-app/src/components/MessageInput.tsx b/aselo-webchat-react-app/src/components/MessageInput.tsx
index b3f2e43bad..e466899d81 100644
--- a/aselo-webchat-react-app/src/components/MessageInput.tsx
+++ b/aselo-webchat-react-app/src/components/MessageInput.tsx
@@ -38,6 +38,7 @@ import {
 } from './styles/MessageInput.styles';
 import { useSanitizer } from '../utils/useSanitizer';
 import { selectCurrentLocale } from '../store/config.reducer';
+import { useMobileOptimizations } from '../hooks/useMobileOptimizations';
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export const MessageInput = () => {
@@ -71,6 +72,7 @@ export const MessageInput = () => {
     [conversation],
   );
   const { onUserInputSubmit } = useSanitizer();
+  const { isMobileFullscreen } = useMobileOptimizations();
 
   const logger = window.Twilio.getLogger('MessageInput');
   const isSubmitDisabled = (!text.trim() && !attachedFiles?.length) || isSending;
@@ -171,7 +173,7 @@ export const MessageInput = () => {
               maxLength={CHAR_LIMIT}
             />
           </Box>
-          {emojiPickerConfig?.enabled && (
+          {emojiPickerConfig?.enabled && isMobileFullscreen && (
             <Box {...messageOptionContainerStyles}>
               <Button
                 data-test="emoji-picker-button"

From d757aaf1aabaddc9c94202d016f3013a0b4eae34 Mon Sep 17 00:00:00 2001
From: Stephen Hand <steveh@techmatters.org>
Date: Mon, 4 May 2026 18:24:35 +0100
Subject: [PATCH 2/2] hide emoji picker for mobile

---
 aselo-webchat-react-app/src/components/MessageInput.tsx       | 2 +-
 .../src/components/__tests__/MessageInput.test.tsx            | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/aselo-webchat-react-app/src/components/MessageInput.tsx b/aselo-webchat-react-app/src/components/MessageInput.tsx
index e466899d81..b9b19a4f30 100644
--- a/aselo-webchat-react-app/src/components/MessageInput.tsx
+++ b/aselo-webchat-react-app/src/components/MessageInput.tsx
@@ -173,7 +173,7 @@ export const MessageInput = () => {
               maxLength={CHAR_LIMIT}
             />
           </Box>
-          {emojiPickerConfig?.enabled && isMobileFullscreen && (
+          {emojiPickerConfig?.enabled && !isMobileFullscreen && (
             <Box {...messageOptionContainerStyles}>
               <Button
                 data-test="emoji-picker-button"
diff --git a/aselo-webchat-react-app/src/components/__tests__/MessageInput.test.tsx b/aselo-webchat-react-app/src/components/__tests__/MessageInput.test.tsx
index 7c6c1b8628..b5fcc2db45 100644
--- a/aselo-webchat-react-app/src/components/__tests__/MessageInput.test.tsx
+++ b/aselo-webchat-react-app/src/components/__tests__/MessageInput.test.tsx
@@ -22,6 +22,10 @@ import { MessageInput } from '../MessageInput';
 import * as genericActions from '../../store/actions/genericActions';
 import WebChatLogger from '../../logger';
 
+jest.mock('../../hooks/useMobileOptimizations', () => ({
+  useMobileOptimizations: jest.fn(() => ({ isMobileFullscreen: false })),
+}));
+
 const fileAttachmentConfig = {
   enabled: true,
   maxFileSize: 16777216,