Improve dropdown expansion and viewport fit logic

Refactors the expansion logic in SearchableDropdown to more accurately calculate and set container heights and positions before applying changes, ensuring the dropdown fits within the viewport without overflow. Removes the bottom margin when expanded and eliminates reliance on requestAnimationFrame for position adjustment.

Author: Azornes

js/SearchableDropdown.js

@@ -20,7 +20,7 @@ export class SearchableDropdown {
         // Constants for layout calculations
         this.ITEM_HEIGHT = 28; // Height per item in pixels (padding + line-height)
         this.DEFAULT_MAX_HEIGHT = 300; // Default max-height of itemsContainer
-        this.EXPANDED_BOTTOM_MARGIN = 100; // Bottom margin when expanded
+        this.EXPANDED_BOTTOM_MARGIN = 0; // Bottom margin when expanded
 
         // Load custom preset icon
         this.customPresetIcon = null;
@@ -445,26 +445,45 @@ export class SearchableDropdown {
     applyExpandedState() {
         if (!this.isExpanded) return;
 
-        // Expand to show all items
-        const neededHeight = this.filteredItems.length * this.ITEM_HEIGHT + 20;
-        const maxExpandedHeight = Math.min(neededHeight, window.innerHeight - this.EXPANDED_BOTTOM_MARGIN);
+        // Get current dimensions BEFORE making any changes
+        const currentRect = this.container.getBoundingClientRect();
+        const currentItemsHeight = this.itemsContainer.getBoundingClientRect().height;
 
-        this.itemsContainer.style.maxHeight = `${maxExpandedHeight}px`;
-        this.container.style.maxHeight = `${maxExpandedHeight + 200}px`;
-        this.expandButton.textContent = 'Show Less';
+        // Calculate overhead (everything except the items container)
+        const overhead = currentRect.height - currentItemsHeight;
+        
+        // Calculate how much height we need for all items (no extra padding)
+        const neededHeight = this.filteredItems.length * this.ITEM_HEIGHT;
+        
+        // Determine the actual expanded height we'll use for items
+        const maxAllowedItemsHeight = window.innerHeight - this.EXPANDED_BOTTOM_MARGIN - overhead;
+        const expandedItemsHeight = Math.min(neededHeight, maxAllowedItemsHeight);
+        
+        // Calculate the total container height (items + overhead)
+        const totalContainerHeight = expandedItemsHeight + overhead;
 
-        // Adjust position to prevent going off-screen
-        requestAnimationFrame(() => {
-            const containerRect = this.container.getBoundingClientRect();
-            const bottomOverflow = containerRect.bottom - window.innerHeight;
+        // Use viewport-relative position (getBoundingClientRect gives us position relative to viewport)
+        const currentViewportTop = currentRect.top;
+        
+        // Calculate what the bottom would be if we expand from current viewport position
+        const potentialBottom = currentViewportTop + totalContainerHeight;
+        
+        // If it would overflow viewport, calculate new position BEFORE setting heights
+        if (potentialBottom > window.innerHeight - this.EXPANDED_BOTTOM_MARGIN) {
+            // Calculate new viewport-relative top position
+            let newViewportTop = window.innerHeight - totalContainerHeight - this.EXPANDED_BOTTOM_MARGIN;
+            // Ensure it doesn't go above screen top
+            newViewportTop = Math.max(10, newViewportTop);
 
-            if (bottomOverflow > 0) {
-                const currentTop = parseInt(this.container.style.top);
-                let newTop = currentTop - bottomOverflow - 10;
-                newTop = Math.max(10, newTop);
-                this.container.style.top = `${newTop}px`;
-            }
-        });
+            // Convert viewport-relative position to document-relative position
+            const newDocumentTop = newViewportTop + window.pageYOffset;
+            this.container.style.top = `${newDocumentTop}px`;
+        }
+        
+        // Now apply the expanded heights
+        this.itemsContainer.style.maxHeight = `${expandedItemsHeight}px`;
+        this.container.style.maxHeight = `${totalContainerHeight}px`;
+        this.expandButton.textContent = 'Show Less';
     }
 
     /**
@@ -479,31 +498,45 @@ export class SearchableDropdown {
         }
 
         if (this.isExpanded) {
-            // Expand to show all items
-            const neededHeight = this.filteredItems.length * this.ITEM_HEIGHT + 20;
-            const maxExpandedHeight = Math.min(neededHeight, window.innerHeight - this.EXPANDED_BOTTOM_MARGIN);
+            // Get current dimensions BEFORE making any changes
+            const currentRect = this.container.getBoundingClientRect();
+            const currentItemsHeight = this.itemsContainer.getBoundingClientRect().height;
 
-            this.itemsContainer.style.maxHeight = `${maxExpandedHeight}px`;
-            this.container.style.maxHeight = `${maxExpandedHeight + 200}px`;
-            this.expandButton.textContent = 'Show Less';
+            // Calculate overhead (everything except the items container)
+            const overhead = currentRect.height - currentItemsHeight;
 
-            // Adjust position to prevent going off-screen
-            // Need to wait for next frame to get accurate dimensions after height change
-            requestAnimationFrame(() => {
-                const containerRect = this.container.getBoundingClientRect();
-                const bottomOverflow = containerRect.bottom - window.innerHeight;
+            // Calculate how much height we need for all items (no extra padding)
+            const neededHeight = this.filteredItems.length * this.ITEM_HEIGHT;
+            
+            // Determine the actual expanded height we'll use for items
+            const maxAllowedItemsHeight = window.innerHeight - this.EXPANDED_BOTTOM_MARGIN - overhead;
+            const expandedItemsHeight = Math.min(neededHeight, maxAllowedItemsHeight);
+            
+            // Calculate the total container height (items + overhead)
+            const totalContainerHeight = expandedItemsHeight + overhead;
+            
+            // Use viewport-relative position (getBoundingClientRect gives us position relative to viewport)
+            const currentViewportTop = currentRect.top;
+            
+            // Calculate what the bottom would be if we expand from current viewport position
+            const potentialBottom = currentViewportTop + totalContainerHeight;
+            
+            // If it would overflow viewport, calculate new position BEFORE setting heights
+            if (potentialBottom > window.innerHeight - this.EXPANDED_BOTTOM_MARGIN) {
+                // Calculate new viewport-relative top position
+                let newViewportTop = window.innerHeight - totalContainerHeight - this.EXPANDED_BOTTOM_MARGIN;
+                // Ensure it doesn't go above screen top
+                newViewportTop = Math.max(10, newViewportTop);
 
-                if (bottomOverflow > 0) {
-                    // Move container up to fit on screen
-                    const currentTop = parseInt(this.container.style.top);
-                    let newTop = currentTop - bottomOverflow - 10; // 10px margin from bottom
-                    
-                    // Ensure it doesn't go above screen top
-                    newTop = Math.max(10, newTop);
-                    
-                    this.container.style.top = `${newTop}px`;
-                }
-            });
+                // Convert viewport-relative position to document-relative position
+                const newDocumentTop = newViewportTop + window.pageYOffset;
+                this.container.style.top = `${newDocumentTop}px`;
+            }
+            
+            // Now apply the expanded heights
+            this.itemsContainer.style.maxHeight = `${expandedItemsHeight}px`;
+            this.container.style.maxHeight = `${totalContainerHeight}px`;
+            this.expandButton.textContent = 'Show Less';
         } else {
             // Collapse back to default
             this.itemsContainer.style.maxHeight = `${this.DEFAULT_MAX_HEIGHT}px`;