diff --git a/src/libs/PopoverWithMeasuredContentUtils.ts b/src/libs/PopoverWithMeasuredContentUtils.ts index 1f42d741bdbd..0bef469744dc 100644 --- a/src/libs/PopoverWithMeasuredContentUtils.ts +++ b/src/libs/PopoverWithMeasuredContentUtils.ts @@ -37,15 +37,18 @@ function computeHorizontalShift(anchorLeftEdge: number, menuWidth: number, windo */ function computeVerticalShift(anchorTopEdge: number, menuHeight: number, windowHeight: number, anchorHeight: number, shoudSwitchPositionIfOverflow = false): number { const popoverBottomEdge = anchorTopEdge + menuHeight; + let canSwitchPosition = false; if (anchorTopEdge < 0) { // Anchor is in top window Edge, shift bottom by a multiple of four. - return roundToNearestMultipleOfFour(shoudSwitchPositionIfOverflow ? menuHeight + anchorHeight : 0 - anchorTopEdge); + canSwitchPosition = popoverBottomEdge + menuHeight + anchorHeight <= windowHeight; + return roundToNearestMultipleOfFour(shoudSwitchPositionIfOverflow && canSwitchPosition ? menuHeight + anchorHeight : 0 - anchorTopEdge); } if (popoverBottomEdge > windowHeight) { // Anchor is in Bottom window Edge, shift top by a multiple of four. - return roundToNearestMultipleOfFour(shoudSwitchPositionIfOverflow ? -(menuHeight + anchorHeight) : windowHeight - popoverBottomEdge); + canSwitchPosition = anchorTopEdge - menuHeight - anchorHeight >= 0; + return roundToNearestMultipleOfFour(shoudSwitchPositionIfOverflow && canSwitchPosition ? -(menuHeight + anchorHeight) : windowHeight - popoverBottomEdge); } // Anchor is not in the gutter, so no need to shift it vertically diff --git a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx index fcd291e55882..6cb688ff2558 100644 --- a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx +++ b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx @@ -62,6 +62,7 @@ function PopoverReportActionContextMenu(_props: unknown, ref: ForwardedRef([]); + const [shoudSwitchPositionIfOverflow, setShoudSwitchPositionIfOverflow] = useState(false); const contentRef = useRef(null); const anchorRef = useRef(null); @@ -218,6 +219,7 @@ function PopoverReportActionContextMenu(_props: unknown, ref: ForwardedRef