diff --git a/src/components/middle/message/MessageContextMenu.scss b/src/components/middle/message/MessageContextMenu.scss index 60d9b4c7e..96fb1ba73 100644 --- a/src/components/middle/message/MessageContextMenu.scss +++ b/src/components/middle/message/MessageContextMenu.scss @@ -23,7 +23,6 @@ padding: 0 !important; display: flex; flex-direction: column; - align-items: stretch; } &.with-reactions .bubble { @@ -72,6 +71,12 @@ .avatars { padding-inline-start: 1rem; } + + .ReactionSelector { + position: absolute; + top: 0; + transform: translateY(calc(-100% - 0.5rem)); + } } .ReactionSelector-hidden { diff --git a/src/components/middle/message/MessageContextMenu.tsx b/src/components/middle/message/MessageContextMenu.tsx index 29e60d1db..3cc599ffa 100644 --- a/src/components/middle/message/MessageContextMenu.tsx +++ b/src/components/middle/message/MessageContextMenu.tsx @@ -127,7 +127,6 @@ type OwnProps = { const SCROLLBAR_WIDTH = 10; const REACTION_SELECTOR_WIDTH_REM = 19.25; -const REACTION_SELECTOR_HEIGHT_REM = 3; const ANIMATION_DURATION = 200; const MessageContextMenu: FC = ({ @@ -293,7 +292,6 @@ const MessageContextMenu: FC = ({ extraPaddingX: SCROLLBAR_WIDTH, extraTopPadding: (document.querySelector('.MiddleHeader')!).offsetHeight, extraMarginTop: extraHeightPinned + extraHeightAudioPlayer, - topShiftY: withReactions && !isMobile ? -REACTION_SELECTOR_HEIGHT_REM * REM : 0, shouldAvoidNegativePosition: !isDesktop, menuElMinWidth: withReactions && isMobile ? REACTION_SELECTOR_WIDTH_REM * REM : undefined, };