From c88c9481a1f6b0a72511367f2842299fc01db1f0 Mon Sep 17 00:00:00 2001 From: engjlr Date: Wed, 26 Nov 2025 15:32:00 +0100 Subject: [PATCH 1/2] Set a dynamic max-height for the popover. --- .../lib/uui-popover-container.element.ts | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) 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..a3ec561b7 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, @@ -417,7 +427,7 @@ export class UUIPopoverContainerElement extends LitElement { padding: 0; background-color: none; background: none; - overflow: visible; + overflow: auto; color: var(--uui-color-text); } `, From 2d8e6ef8674ef29bb8c823fbdd399b210fa167c8 Mon Sep 17 00:00:00 2001 From: engjlr Date: Wed, 26 Nov 2025 16:26:48 +0100 Subject: [PATCH 2/2] Added event listener for window resize. --- .../uui-popover-container/lib/uui-popover-container.element.ts | 2 ++ 1 file changed, 2 insertions(+) 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 a3ec561b7..93a59bbf9 100644 --- a/packages/uui-popover-container/lib/uui-popover-container.element.ts +++ b/packages/uui-popover-container/lib/uui-popover-container.element.ts @@ -344,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); } /**