diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index 0791e5113a1d..a723eed446a4 100755 --- 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 ( - + {translate(`emojiPicker.headers.${code}`)} ); @@ -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 index a6ac2e269eb0..097391f72dd2 100644 --- 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,