diff --git a/src/components/middle/message/MessageContextMenu.scss b/src/components/middle/message/MessageContextMenu.scss index 990a8416d..af0d7d512 100644 --- a/src/components/middle/message/MessageContextMenu.scss +++ b/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; -} diff --git a/src/components/middle/message/MessageContextMenu.tsx b/src/components/middle/message/MessageContextMenu.tsx index 18222b47e..c8a955f2e 100644 --- a/src/components/middle/message/MessageContextMenu.tsx +++ b/src/components/middle/message/MessageContextMenu.tsx @@ -250,7 +250,6 @@ const MessageContextMenu: FC = ({ 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 = ({ 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 = ({ const handleOpenMessageReactionPicker = useLastCallback((position: IAnchorPosition) => { onReactionPickerOpen!(position); - hideItems(); + onClose(); }); return ( @@ -388,7 +381,6 @@ const MessageContextMenu: FC = ({ canPlayAnimatedEmojis={canPlayAnimatedEmojis} onShowMore={handleOpenMessageReactionPicker} onClose={onClose} - className={buildClassName(areItemsHidden && 'ReactionSelector-hidden')} /> )} @@ -396,7 +388,6 @@ const MessageContextMenu: FC = ({ ref={scrollableRef} className={buildClassName( 'MessageContextMenu_items scrollable-content custom-scroll', - areItemsHidden && 'MessageContextMenu_items-hidden', )} dir={lang.isRtl ? 'rtl' : undefined} > diff --git a/src/components/middle/message/reactions/ReactionPicker.module.scss b/src/components/middle/message/reactions/ReactionPicker.module.scss index 3a107dc0c..3c2be9dc0 100644 --- a/src/components/middle/message/reactions/ReactionPicker.module.scss +++ b/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; diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 9f3753a02..fd4cb87a0 100644 --- a/src/styles/_variables.scss +++ b/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;