From d0e35b1de2cf21823626aa2031942e9203348cca Mon Sep 17 00:00:00 2001
From: GCyganek <gabrielcyganek@gmail.com>
Date: Thu, 9 Apr 2026 13:20:26 +0200
Subject: [PATCH] Fix The emoji bar is overlapped by the notch on landscape

---
 src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx b/src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx
index 3bb00e92eefd..e705f1e91329 100644
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx
@@ -8,6 +8,7 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useSingleExecution from '@hooks/useSingleExecution';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -42,6 +43,8 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji, ref}: EmojiPickerMenuPro
         emojiListRef,
     } = useEmojiPickerMenu();
     const StyleUtils = useStyleUtils();
+    const insets = useSafeAreaInsets();
+    const {paddingLeft: safeAreaPaddingLeft, paddingRight: safeAreaPaddingRight} = StyleUtils.getPlatformSafeAreaPadding(insets);
     const [searchText, setSearchText] = useState('');
 
     const headerRefs = useRef<Record<number, React.RefObject<View | null>>>({});
@@ -198,7 +201,7 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji, ref}: EmojiPickerMenuPro
                 listWrapperStyle={[
                     listStyle,
                     {
-                        width: Math.floor(windowWidth),
+                        width: Math.floor(windowWidth - safeAreaPaddingLeft - safeAreaPaddingRight),
                     },
                 ]}
                 ref={emojiListRef}