Merge pull request #34077 from dragnoir/fix-33709

Fix: remove overlay on emoji top scroll bar
Expensify · Jan 10, 2024 · ed99daf · ed99daf
2 parents 0ffca02 + 6d691d2
commit ed99daf
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 14 deletions.
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -36,7 +36,7 @@ const throttleTime = Browser.isMobile() ? 200 : 50;
 function EmojiPickerMenu({forwardedRef, onEmojiSelected}) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {isSmallScreenWidth, windowWidth} = useWindowDimensions();
     const {translate} = useLocalize();
     const {singleExecution} = useSingleExecution();
     const {
@@ -335,7 +335,7 @@ function EmojiPickerMenu({forwardedRef, onEmojiSelected}) {
 
             if (item.header) {
                 return (
-                    <View style={[styles.emojiHeaderContainer, target === 'StickyHeader' ? styles.mh4 : undefined]}>
+                    <View style={[styles.emojiHeaderContainer, target === 'StickyHeader' ? styles.stickyHeaderEmoji(isSmallScreenWidth, windowWidth) : undefined]}>
                         <Text style={styles.textLabelSupporting}>{translate(`emojiPicker.headers.${code}`)}</Text>
                     </View>
                 );
@@ -368,18 +368,7 @@ function EmojiPickerMenu({forwardedRef, onEmojiSelected}) {
                 />
             );
         },
-        [
-            preferredSkinTone,
-            highlightedIndex,
-            isUsingKeyboardMovement,
-            highlightFirstEmoji,
-            singleExecution,
-            styles.emojiHeaderContainer,
-            styles.mh4,
-            styles.textLabelSupporting,
-            translate,
-            onEmojiSelected,
-        ],
+        [preferredSkinTone, highlightedIndex, isUsingKeyboardMovement, highlightFirstEmoji, singleExecution, translate, onEmojiSelected, isSmallScreenWidth, windowWidth, styles],
     );
 
     return (

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -3327,6 +3327,13 @@ const styles = (theme: ThemeColors) =>
             verticalAlign: 'middle',
         },
 
+        stickyHeaderEmoji: (isSmallScreenWidth: boolean, windowWidth: number) =>
+            ({
+                position: 'absolute',
+                width: isSmallScreenWidth ? windowWidth - 32 : CONST.EMOJI_PICKER_SIZE.WIDTH - 32,
+                ...spacing.mh4,
+            } satisfies ViewStyle),
+
         reactionCounterText: {
             fontSize: 13,
             marginLeft: 4,