From 4f7b3d366866dbb712f321cda54cf46dc707f9b7 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Thu, 6 Nov 2025 11:37:02 +0100
Subject: [PATCH] Message Context Menu: Fix overflow hidden (#6449)

---
 .../middle/message/MessageContextMenu.tsx      | 18 ++++++------------
 src/hooks/useMenuPosition.ts                   |  4 +---
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/src/components/middle/message/MessageContextMenu.tsx b/src/components/middle/message/MessageContextMenu.tsx
index 3fa435fab..18222b47e 100644
--- a/src/components/middle/message/MessageContextMenu.tsx
+++ b/src/components/middle/message/MessageContextMenu.tsx
@@ -252,7 +252,7 @@ const MessageContextMenu: FC<OwnProps> = ({
 
   const [areItemsHidden, hideItems] = useFlag();
   const [isReady, markIsReady, unmarkIsReady] = useFlag();
-  const { isMobile, isDesktop } = useAppLayout();
+  const { isMobile } = useAppLayout();
   const seenByDatesCount = useMemo(() => (seenByDates ? Object.keys(seenByDates).length : 0), [seenByDates]);
 
   const handleAfterCopy = useLastCallback(() => {
@@ -314,27 +314,20 @@ const MessageContextMenu: FC<OwnProps> = ({
   );
 
   const getTriggerElement = useLastCallback(() => {
-    return document.querySelector(`.Transition_slide-active > .MessageList div[data-message-id="${message.id}"]`);
+    return document.querySelector(`.Transition_slide-active > .MessageList`);
   });
 
-  const getRootElement = useLastCallback(() => document.querySelector('.Transition_slide-active > .MessageList'));
+  const getRootElement = useLastCallback(() => document.body);
 
   const getMenuElement = useLastCallback(() => document.querySelector('.MessageContextMenu .bubble'));
 
   const getLayout = useLastCallback(() => {
-    const extraHeightAudioPlayer = (isMobile
-      && (document.querySelector<HTMLElement>('.AudioPlayer-content'))?.offsetHeight) || 0;
-    const middleColumn = document.getElementById('MiddleColumn')!;
-    const middleColumnComputedStyle = getComputedStyle(middleColumn);
-    const headerToolsHeight = parseFloat(middleColumnComputedStyle.getPropertyValue('--middle-header-panes-height'));
-    const extraHeightPinned = headerToolsHeight || 0;
-
     return {
       extraPaddingX: SCROLLBAR_WIDTH,
       extraTopPadding: (document.querySelector<HTMLElement>('.MiddleHeader')!).offsetHeight,
-      extraMarginTop: extraHeightPinned + extraHeightAudioPlayer,
-      shouldAvoidNegativePosition: !isDesktop,
+      shouldAvoidNegativePosition: true,
       menuElMinWidth: withReactions && isMobile ? REACTION_SELECTOR_WIDTH_REM * REM : undefined,
+      withPortal: true,
     };
   });
 
@@ -371,6 +364,7 @@ const MessageContextMenu: FC<OwnProps> = ({
       className={buildClassName(
         'MessageContextMenu', 'fluid', withReactions && 'with-reactions',
       )}
+      withPortal
       onClose={onClose}
       onCloseAnimationEnd={onCloseAnimationEnd}
     >
diff --git a/src/hooks/useMenuPosition.ts b/src/hooks/useMenuPosition.ts
index 55cfab8be..6f8a1fdbb 100644
--- a/src/hooks/useMenuPosition.ts
+++ b/src/hooks/useMenuPosition.ts
@@ -33,7 +33,6 @@ export type MenuPositionOptions =
 export interface Layout {
   extraPaddingX?: number;
   extraTopPadding?: number;
-  extraMarginTop?: number;
   menuElMinWidth?: number;
   deltaX?: number;
   topShiftY?: number;
@@ -140,7 +139,6 @@ function processDynamically(
   const {
     extraPaddingX = 0,
     extraTopPadding = 0,
-    extraMarginTop = 0,
     topShiftY = 0,
     menuElMinWidth = 0,
     deltaX = 0,
@@ -149,7 +147,7 @@ function processDynamically(
     isDense = false,
   } = getLayout?.() || {};
 
-  const marginTop = menuEl ? parseInt(getComputedStyle(menuEl).marginTop, 10) + extraMarginTop : undefined;
+  const marginTop = menuEl ? parseInt(getComputedStyle(menuEl).marginTop, 10) : undefined;
   const { offsetWidth: menuElWidth, offsetHeight: menuElHeight } = menuEl || { offsetWidth: 0, offsetHeight: 0 };
   const menuRect = menuEl ? {
     width: Math.max(menuElWidth, menuElMinWidth),