ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Message Context Menu: Fix overflow hidden (#6449)

Browse Source
This commit is contained in:
Alexander Zinchuk 2025-11-06 11:37:02 +01:00
parent bde4688efd
commit 4f7b3d3668
2 changed files with 7 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/middle/message/MessageContextMenu.tsx
View File

@ -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}
>

4
src/hooks/useMenuPosition.ts
View File

@ -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),