@descope/web-components-ui 3.16.0 → 3.16.2

package/dist/cjs/index.cjs.js

@@ -5213,7 +5213,6 @@ const comboBox = {
   [vars$16.overlayItemFocusBackground]: globalRefs$E.colors.primary.highlight,
 
   // Overlay direct theme:
-  [vars$16.overlay.minHeight]: '400px',
   [vars$16.overlay.margin]: '0',
 
   [vars$16.overlay.contentHeight]: '100%',
@@ -14525,9 +14524,14 @@ class RawMonthDayFieldClass extends BaseInputClass$5 {
     const popover = this.shadowRoot.querySelector('vaadin-popover').shadowRoot;
     if (!popover || !this.picker) return;
 
-    // Reset any previous transform so getBoundingClientRect measures the natural position.
+    // Reset any previous offset so getBoundingClientRect measures the natural position.
+    // NOTE: we offset with margin, not `transform`. A `transform` on this element
+    // makes it the containing block for `position: fixed` descendants, which traps
+    // the nested combo-box dropdowns inside the popover box (they then can't size
+    // to the viewport and get clipped). `margin` shifts it identically without
+    // creating a containing block, so the combo overlays stay viewport-positioned.
     this.#popoverPosStylesheet?.replaceSync(
-      `vaadin-popover-overlay::part(overlay) { transform: none; }`,
+      `vaadin-popover-overlay::part(overlay) { margin-left: 0; }`,
     );
 
     const windowRect = document.body.getBoundingClientRect();
@@ -14548,7 +14552,7 @@ class RawMonthDayFieldClass extends BaseInputClass$5 {
 
     const css = `
       vaadin-popover-overlay::part(overlay) {
-        transform: translateX(${newOffset}px);
+        margin-left: ${newOffset}px;
       }
     `;