Reaction Picker: Fix z-index (#6474)

src/components/middle/message/MessageContextMenu.scss

@@ -7,11 +7,6 @@
     overflow: auto;
     overscroll-behavior: contain;
     padding: 0.5rem 0;
-
-    &-hidden {
-      opacity: 0;
-      transition: 300ms opacity;
-    }
   }
 
   &.compact &_items {
@@ -81,8 +76,3 @@
     transform: translateY(calc(-100% - 0.5rem));
   }
 }
-
-.ReactionSelector-hidden {
-  opacity: 0;
-  transition: 300ms opacity;
-}

src/components/middle/message/MessageContextMenu.tsx

@@ -250,7 +250,6 @@ const MessageContextMenu: FC<OwnProps> = ({
   const shouldShowGiftButton = isUserId(message.chatId)
     && canGift && (isPremiumGift || isGiftCode || isStarGift || isStarGiftUnique);
 
-  const [areItemsHidden, hideItems] = useFlag();
   const [isReady, markIsReady, unmarkIsReady] = useFlag();
   const { isMobile } = useAppLayout();
   const seenByDatesCount = useMemo(() => (seenByDates ? Object.keys(seenByDates).length : 0), [seenByDates]);
@@ -267,12 +266,6 @@ const MessageContextMenu: FC<OwnProps> = ({
     onClose();
   });
 
-  useEffect(() => {
-    if (isOpen && areItemsHidden && !isReactionPickerOpen) {
-      onClose();
-    }
-  }, [onClose, isOpen, isReactionPickerOpen, areItemsHidden]);
-
   useEffect(() => {
     if (customEmojiSets?.length) {
       customEmojiSets.map((customEmojiSet) => {
@@ -348,7 +341,7 @@ const MessageContextMenu: FC<OwnProps> = ({
 
   const handleOpenMessageReactionPicker = useLastCallback((position: IAnchorPosition) => {
     onReactionPickerOpen!(position);
-    hideItems();
+    onClose();
   });
 
   return (
@@ -388,7 +381,6 @@ const MessageContextMenu: FC<OwnProps> = ({
           canPlayAnimatedEmojis={canPlayAnimatedEmojis}
           onShowMore={handleOpenMessageReactionPicker}
           onClose={onClose}
-          className={buildClassName(areItemsHidden && 'ReactionSelector-hidden')}
         />
       )}
 
@@ -396,7 +388,6 @@ const MessageContextMenu: FC<OwnProps> = ({
         ref={scrollableRef}
         className={buildClassName(
           'MessageContextMenu_items scrollable-content custom-scroll',
-          areItemsHidden && 'MessageContextMenu_items-hidden',
         )}
         dir={lang.isRtl ? 'rtl' : undefined}
       >

src/components/middle/message/reactions/ReactionPicker.module.scss

@@ -1,6 +1,5 @@
 .menu {
-  position: absolute;
-  z-index: var(--z-reaction-picker);
+  z-index: var(--z-reaction-picker) !important;
 
   @media (max-width: 600px) {
     right: 0 !important;

src/styles/_variables.scss

@@ -232,15 +232,15 @@ $color-message-story-mention-to: #74bcff;
 
   --scrollbar-width: 0;
 
-  --z-overlay-effects: 10001;
-  --z-modal-confirm: 10000;
+  --z-overlay-effects: 12000;
+  --z-modal-confirm: 10500;
+  --z-reaction-picker: 10200;
   --z-portal-menu: 10000;
   --z-symbol-menu-modal: 5000;
   --z-lock-screen: 3000;
   --z-ui-loader-mask: 2000;
   --z-notification: 1700;
   --z-confetti: 1600;
-  --z-reaction-picker: 1200;
   --z-story-viewer: 1150;
   --z-reaction-interaction-effect: 1100;
   --z-right-column: 900;