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 [areItemsHidden, hideItems] = useFlag();
const [isReady, markIsReady, unmarkIsReady] = useFlag(); const [isReady, markIsReady, unmarkIsReady] = useFlag();
const { isMobile, isDesktop } = useAppLayout(); const { isMobile } = useAppLayout();
const seenByDatesCount = useMemo(() => (seenByDates ? Object.keys(seenByDates).length : 0), [seenByDates]); const seenByDatesCount = useMemo(() => (seenByDates ? Object.keys(seenByDates).length : 0), [seenByDates]);
const handleAfterCopy = useLastCallback(() => { const handleAfterCopy = useLastCallback(() => {
@ -314,27 +314,20 @@ const MessageContextMenu: FC<OwnProps> = ({
); );
const getTriggerElement = useLastCallback(() => { 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 getMenuElement = useLastCallback(() => document.querySelector('.MessageContextMenu .bubble'));
const getLayout = useLastCallback(() => { 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 { return {
extraPaddingX: SCROLLBAR_WIDTH, extraPaddingX: SCROLLBAR_WIDTH,
extraTopPadding: (document.querySelector<HTMLElement>('.MiddleHeader')!).offsetHeight, extraTopPadding: (document.querySelector<HTMLElement>('.MiddleHeader')!).offsetHeight,
extraMarginTop: extraHeightPinned + extraHeightAudioPlayer, shouldAvoidNegativePosition: true,
shouldAvoidNegativePosition: !isDesktop,
menuElMinWidth: withReactions && isMobile ? REACTION_SELECTOR_WIDTH_REM * REM : undefined, menuElMinWidth: withReactions && isMobile ? REACTION_SELECTOR_WIDTH_REM * REM : undefined,
withPortal: true,
}; };
}); });
@ -371,6 +364,7 @@ const MessageContextMenu: FC<OwnProps> = ({
className={buildClassName( className={buildClassName(
'MessageContextMenu', 'fluid', withReactions && 'with-reactions', 'MessageContextMenu', 'fluid', withReactions && 'with-reactions',
)} )}
withPortal
onClose={onClose} onClose={onClose}
onCloseAnimationEnd={onCloseAnimationEnd} onCloseAnimationEnd={onCloseAnimationEnd}
> >

4
src/hooks/useMenuPosition.ts
View File

@ -33,7 +33,6 @@ export type MenuPositionOptions =
export interface Layout { export interface Layout {
extraPaddingX?: number; extraPaddingX?: number;
extraTopPadding?: number; extraTopPadding?: number;
extraMarginTop?: number;
menuElMinWidth?: number; menuElMinWidth?: number;
deltaX?: number; deltaX?: number;
topShiftY?: number; topShiftY?: number;
@ -140,7 +139,6 @@ function processDynamically(
const { const {
extraPaddingX = 0, extraPaddingX = 0,
extraTopPadding = 0, extraTopPadding = 0,
extraMarginTop = 0,
topShiftY = 0, topShiftY = 0,
menuElMinWidth = 0, menuElMinWidth = 0,
deltaX = 0, deltaX = 0,
@ -149,7 +147,7 @@ function processDynamically(
isDense = false, isDense = false,
} = getLayout?.() || {}; } = 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 { offsetWidth: menuElWidth, offsetHeight: menuElHeight } = menuEl || { offsetWidth: 0, offsetHeight: 0 };
const menuRect = menuEl ? { const menuRect = menuEl ? {
width: Math.max(menuElWidth, menuElMinWidth), width: Math.max(menuElWidth, menuElMinWidth),