@kodaris/krubble-components 1.0.72 → 1.0.74

package/dist/krubble-components.umd.js

@@ -571,16 +571,27 @@
                       dropdown.style.right = '';
                       dropdown.style.minWidth = hostRect.width + 'px';
                       dropdown.style.transformOrigin = 'top left';
+                      dropdown.style.maxHeight = '';
+                      dropdown.style.overflowY = '';
                       const dropdownRect = dropdown.getBoundingClientRect();
-                      // Open above if dropdown overflows viewport bottom
-                      if (dropdownRect.bottom > window.innerHeight) {
+                      // Open above only if the dropdown doesn't fit below and there's more room above than below
+                      // 8 = 4px gap between button and dropdown + 4px margin from viewport edge
+                      if (dropdownRect.height > window.innerHeight - hostRect.bottom - 8 && hostRect.top > window.innerHeight - hostRect.bottom) {
                           dropdown.style.top = '';
                           dropdown.style.bottom = window.innerHeight - hostRect.top + 4 + 'px';
                           dropdown.style.transformOrigin = 'bottom left';
                           dropdown.classList.add('dropdown--above');
+                          if (dropdownRect.height > hostRect.top - 8) {
+                              dropdown.style.maxHeight = hostRect.top - 8 + 'px';
+                              dropdown.style.overflowY = 'auto';
+                          }
                       }
                       else {
                           dropdown.classList.remove('dropdown--above');
+                          if (dropdownRect.height > window.innerHeight - hostRect.bottom - 8) {
+                              dropdown.style.maxHeight = window.innerHeight - hostRect.bottom - 8 + 'px';
+                              dropdown.style.overflowY = 'auto';
+                          }
                       }
                       // Align right if dropdown overflows viewport right
                       if (dropdownRect.right > window.innerWidth) {
@@ -901,6 +912,7 @@
     .dropdown {
       position: fixed;
       min-width: 100%;
+      box-sizing: border-box;
       background: white;
       border: 1px solid #9ba7b6;
       border-radius: 8px;
@@ -1869,6 +1881,7 @@
       border-radius: 12px;
       box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
       max-height: 90vh;
+      height: auto;
       overflow: hidden;
       display: flex;
       flex-direction: column;