diff --git a/packages/common/src/utils/offsets.ts b/packages/common/src/utils/offsets.ts index 984f49135d..dac7bc346d 100644 --- a/packages/common/src/utils/offsets.ts +++ b/packages/common/src/utils/offsets.ts @@ -32,13 +32,21 @@ export const calculateAndApplyYOffset = (element: HTMLElement | null, additional const popupBounds = getBounds(element) const viewportBounds = getViewportBounds(new Bounds()) + const overflowTop = viewportBounds.top - (popupBounds?.top ?? 0) const overflowBottom = (popupBounds?.top ?? 0) + (popupBounds?.height ?? 0) - (viewportBounds.top + viewportBounds.height) + let offsetY = 0 - if (overflowBottom > 0) { - offsetY = -(popupBounds?.height ?? 0) + additionalOffset + if (overflowTop > 0) { + // popup is overflowing at the top, move it down + offsetY = overflowTop + } else if (overflowBottom > 0) { + // popup is overflowing at the bottom, move it up + offsetY = -overflowBottom } + offsetY += additionalOffset + element.style.transform = `translateY(${offsetY}px)` }