diff --git a/packages/uui-popover-container/lib/uui-popover-container.element.ts b/packages/uui-popover-container/lib/uui-popover-container.element.ts index c49fd3f1e..93a59bbf9 100644 --- a/packages/uui-popover-container/lib/uui-popover-container.element.ts +++ b/packages/uui-popover-container/lib/uui-popover-container.element.ts @@ -172,6 +172,21 @@ export class UUIPopoverContainerElement extends LitElement { const isEnd = this._actualPlacement.indexOf('-end') !== -1; const targetRect = this.#targetElement.getBoundingClientRect(); + + // Clamp left and top within screen bounds + // If the target leaves the screen, the popover follows. + const screenWidth = window.innerWidth; + const screenHeight = window.innerHeight; + + if (isBottomPlacement) { + const availableSpaceBelow = + screenHeight - (targetRect.top + targetRect.height) - this.margin; + this.style.maxHeight = `${Math.max(100, availableSpaceBelow * 0.9)}px`; + } else if (isTopPlacement) { + const availableSpaceAbove = targetRect.top - this.margin; + this.style.maxHeight = `${Math.max(100, availableSpaceAbove * 0.9)}px`; + } + const popoverRect = this.getBoundingClientRect(); let top = 0; @@ -226,11 +241,6 @@ export class UUIPopoverContainerElement extends LitElement { } } - // Clamp left and top within screen bounds - // If the target leaves the screen, the popover follows. - const screenWidth = window.innerWidth; - const screenHeight = window.innerHeight; - const topTargetVsScreenTop = Math.min( 0, targetRect.top + targetRect.height, @@ -334,12 +344,14 @@ export class UUIPopoverContainerElement extends LitElement { el.addEventListener('scroll', this.#initUpdate, { passive: true }); }); document.addEventListener('scroll', this.#initUpdate, { passive: true }); + window.addEventListener('resize', this.#initUpdate, { passive: true }); } #stopScrollListener() { this.#scrollParents.forEach(el => { el.removeEventListener('scroll', this.#initUpdate); }); document.removeEventListener('scroll', this.#initUpdate); + window.removeEventListener('resize', this.#initUpdate); } /** @@ -417,7 +429,7 @@ export class UUIPopoverContainerElement extends LitElement { padding: 0; background-color: none; background: none; - overflow: visible; + overflow: auto; color: var(--uui-color-text); } `,