@superleapai/flow-ui 2.5.16 → 2.5.17

package/components/enum-multiselect.js

@@ -258,7 +258,7 @@
     var content = document.createElement("div");
     content.setAttribute("role", "listbox");
     content.setAttribute("aria-multiselectable", "true");
-    content.className = "w-full min-w-[200px] max-h-[45vh] overflow-hidden flex flex-col";
+    content.className = "w-full min-w-[200px] max-h-[30vh] overflow-hidden flex flex-col";
 
     // Search input (using InputComponent like enum-select)
     var searchContainer = document.createElement("div");
@@ -319,7 +319,7 @@
     // Options list
     var optionsList = document.createElement("div");
     optionsList.className =
-      "overflow-y-auto max-h-[45vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white flex-1 min-h-0";
+      "overflow-y-auto max-h-[30vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white flex-1 min-h-0";
 
     content.appendChild(searchContainer);
     content.appendChild(optionsList);

package/components/enum-select.js

@@ -231,7 +231,7 @@
     // Create dropdown content
     var content = document.createElement("div");
     content.setAttribute("role", "listbox");
-    content.className = "w-full min-w-[200px] max-h-[45vh] overflow-hidden flex flex-col";
+    content.className = "w-full min-w-[200px] max-h-[30vh] overflow-hidden flex flex-col";
 
     // Search input (using InputComponent like phone-input)
     var searchContainer = document.createElement("div");
@@ -292,7 +292,7 @@
     // Options list
     var optionsList = document.createElement("div");
     optionsList.className =
-      "overflow-y-auto max-h-[45vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white flex-1 min-h-0";
+      "overflow-y-auto max-h-[30vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white flex-1 min-h-0";
 
     content.appendChild(searchContainer);
     content.appendChild(optionsList);

package/components/multiselect.js

@@ -154,11 +154,11 @@
     var content = document.createElement("div");
     content.setAttribute("role", "listbox");
     content.setAttribute("aria-multiselectable", "true");
-    content.className = "custom-multiselect-content w-full  max-h-[45vh] overflow-hidden flex flex-col";
+    content.className = "custom-multiselect-content w-full  max-h-[30vh] overflow-hidden flex flex-col";
 
     var optionsList = document.createElement("div");
     optionsList.className =
-      "overflow-y-auto max-h-[45vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white";
+      "overflow-y-auto max-h-[30vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white";
 
     function isSelected(optionValue) {
       return values.some(function (v) {
@@ -263,7 +263,7 @@
       align: "start",
       closeOnClickOutside: true,
       bodyClassName: "p-0 overflow-hidden",
-      panelClassName: "min-w-[var(--trigger-width)] max-h-[45vh] overflow-hidden",
+      panelClassName: "min-w-[var(--trigger-width)] max-h-[30vh] overflow-hidden",
       onOpen: function () {
         if (disabled) {
           popover.hide();

package/components/popover.js

@@ -143,6 +143,8 @@
       const triggerRect = triggerEl.getBoundingClientRect();
       const panelRect = panel.getBoundingClientRect();
       const gap = 8;
+      const topGap = 24;
+      const viewportPadding = 8;
       const viewportHeight =
         window.innerHeight || document.documentElement.clientHeight;
       const viewportWidth =
@@ -152,32 +154,52 @@
       const spaceRight = viewportWidth - triggerRect.right;
       const spaceLeft = triggerRect.left;
 
-      // Flip placement when there is not enough space (prefer requested side, flip only when needed)
-      let effectivePlacement = placement;
-      if (
-        placement === "bottom" &&
-        spaceBelow < panelRect.height + gap &&
-        spaceAbove >= panelRect.height + gap
-      ) {
-        effectivePlacement = "top";
-      } else if (
-        placement === "top" &&
-        spaceAbove < panelRect.height + gap &&
-        spaceBelow >= panelRect.height + gap
-      ) {
-        effectivePlacement = "bottom";
-      } else if (
-        placement === "right" &&
-        spaceRight < panelRect.width + gap &&
-        spaceLeft >= panelRect.width + gap
-      ) {
-        effectivePlacement = "left";
-      } else if (
-        placement === "left" &&
-        spaceLeft < panelRect.width + gap &&
-        spaceRight >= panelRect.width + gap
-      ) {
-        effectivePlacement = "right";
+      // Normalize placement and resolve to the best side when space is constrained.
+      const normalizedPlacement =
+        placement === "top" ||
+        placement === "bottom" ||
+        placement === "left" ||
+        placement === "right"
+          ? placement
+          : "bottom";
+      const oppositeBySide = {
+        bottom: "top",
+        top: "bottom",
+        right: "left",
+        left: "right",
+      };
+      const requiredSpaceBySide = {
+        bottom: panelRect.height + gap,
+        top: panelRect.height + topGap,
+        right: panelRect.width + gap,
+        left: panelRect.width + gap,
+      };
+      const availableSpaceBySide = {
+        bottom: spaceBelow,
+        top: spaceAbove,
+        right: spaceRight,
+        left: spaceLeft,
+      };
+      const oppositePlacement = oppositeBySide[normalizedPlacement];
+      const preferredFits =
+        availableSpaceBySide[normalizedPlacement] >=
+        requiredSpaceBySide[normalizedPlacement];
+      const oppositeFits =
+        availableSpaceBySide[oppositePlacement] >=
+        requiredSpaceBySide[oppositePlacement];
+
+      let effectivePlacement = normalizedPlacement;
+      if (!preferredFits) {
+        if (oppositeFits) {
+          effectivePlacement = oppositePlacement;
+        } else {
+          // Neither side fully fits: use the side with more available room.
+          effectivePlacement =
+            availableSpaceBySide[normalizedPlacement] >=
+            availableSpaceBySide[oppositePlacement]
+              ? normalizedPlacement
+              : oppositePlacement;
+        }
       }
 
       panel.setAttribute("data-side", effectivePlacement);
@@ -209,7 +231,6 @@
           break;
         case "top": {
           // Larger gap when above the trigger so the popover doesn't overlap it.
-          const topGap = 24;
           top = triggerRect.top - panelRect.height - topGap;
           left = triggerRect.left + alignLeft;
           // Cap panel height so when content loads/tall it doesn't grow downward into the trigger.
@@ -232,6 +253,18 @@
           left = triggerRect.left + alignLeft;
       }
 
+      // Keep popover within viewport on the non-placement axis.
+      const minTop = viewportPadding;
+      const maxTop = viewportHeight - panelRect.height - viewportPadding;
+      if (maxTop >= minTop) {
+        top = Math.min(Math.max(top, minTop), maxTop);
+      }
+      const minLeft = viewportPadding;
+      const maxLeft = viewportWidth - panelRect.width - viewportPadding;
+      if (maxLeft >= minLeft) {
+        left = Math.min(Math.max(left, minLeft), maxLeft);
+      }
+
       wrapper.style.transform = "";
       wrapper.style.top = top + "px";
       wrapper.style.left = left + "px";

package/components/record-multiselect.js

@@ -318,7 +318,7 @@
     var content = document.createElement("div");
     content.setAttribute("role", "listbox");
     content.setAttribute("aria-multiselectable", "true");
-    content.className = "record-multiselect-content  max-h-[45vh] overflow-hidden flex flex-col";
+    content.className = "record-multiselect-content  max-h-[30vh] overflow-hidden flex flex-col";
 
     var searchWrap = document.createElement("div");
     searchWrap.className = "p-8 pb-4 border-b-1/2 border-border-primary ";
@@ -368,7 +368,7 @@
     content.appendChild(searchWrap);
 
     var optionsList = document.createElement("div");
-    optionsList.className = "overflow-y-auto max-h-[45vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white record-multiselect-options";
+    optionsList.className = "overflow-y-auto max-h-[30vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white record-multiselect-options";
 
     var loadMoreSentinel = null;
     var loadMoreObserver =

package/components/record-select.js

@@ -315,7 +315,7 @@
     content.setAttribute("role", "listbox");
     content.setAttribute("data-field-id", fieldId);
     content.className =
-      "record-select-content  max-h-[45vh] overflow-hidden flex flex-col";
+      "record-select-content  max-h-[30vh] overflow-hidden flex flex-col";
 
     var searchWrap = document.createElement("div");
     searchWrap.className = "py-8 border-b-1/2 border-border-primary";
@@ -366,7 +366,7 @@
 
     var optionsList = document.createElement("div");
     optionsList.className =
-      "overflow-y-auto max-h-[45vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white record-select-options";
+      "overflow-y-auto max-h-[30vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white record-select-options";
 
     var loadMoreSentinel = null;
     var loadMoreObserver =

package/components/select.js

@@ -86,7 +86,7 @@
     var onClear = config.onClear;
     var popoverWrapperClassName = config.popoverWrapperClassName || "";
     var onOpenCallback = config.onOpenCallback || null;
-    var dropdownMaxHeightVh = config.dropdownMaxHeightVh != null ? config.dropdownMaxHeightVh : 45;
+    var dropdownMaxHeightVh = config.dropdownMaxHeightVh != null ? config.dropdownMaxHeightVh : 30;
 
     var disabled = config.disabled === true;
     var value =
@@ -261,7 +261,7 @@
       align: "start",
       closeOnClickOutside: true,
       bodyClassName: "p-0 overflow-hidden",
-      panelClassName: "min-w-[var(--trigger-width)] max-h-[45vh] overflow-hidden",
+      panelClassName: "min-w-[var(--trigger-width)] max-h-[30vh] overflow-hidden",
       wrapperClassName: popoverWrapperClassName,
       onOpen: function () {
         if (disabled) {