fix: dropdown menu positioning (#9061)

holloway · web-flow · commit e285ad862f5e · 2025-06-27T12:10:09.000-05:00
fixes #9019
diff --git a/ietf/static/css/ietf.scss b/ietf/static/css/ietf.scss
@@ -229,7 +229,7 @@ th,
 .group-menu .dropdown-menu {
     height: auto;
     width: auto;
-    max-height: 35em;
+    max-height: 95vh;
     overflow-x: hidden;
     overflow-y: auto;
 }
diff --git a/ietf/static/js/ietf.js b/ietf/static/js/ietf.js
@@ -13,7 +13,7 @@ import "bootstrap/js/dist/scrollspy";
 import "bootstrap/js/dist/tab";
 // import "bootstrap/js/dist/toast";
 import "bootstrap/js/dist/tooltip";
-
+import { debounce } from 'lodash-es';
 import jquery from "jquery";
 
 window.$ = window.jQuery = jquery;
@@ -112,6 +112,34 @@ function overflowShadows(el) {
     }
 }
 
+function ensureDropdownOnscreen(elm) {
+    const handlePlacement = () => {
+        if(!(elm instanceof HTMLElement)) {
+            return
+        }
+        const rect = elm.getBoundingClientRect()
+        const BUFFER_PX = 5 // additional distance from bottom of viewport
+        const existingStyleTop = parseInt(elm.style.top, 10)
+        const offscreenBy = Math.round(window.innerHeight - (rect.top + rect.height) - BUFFER_PX)
+        if(existingStyleTop === offscreenBy) {
+            console.log(`Already set top to ${offscreenBy}. Ignoring`)
+            // already set, nothing to do
+            return
+        }
+        if(offscreenBy < 0) {
+            elm.style.top = `${offscreenBy}px`
+        } 
+    }
+
+    const debouncedHandler = debounce(handlePlacement, 100)
+        
+    const observer = new MutationObserver(debouncedHandler)
+
+    observer.observe(elm, {
+        attributes: true
+    })
+}
+
 $(document)
     .ready(function () {
         // load data for the menu
@@ -144,12 +172,17 @@ $(document)
                             g.acronym + " &mdash; " + g.name + "</a></li>");
                     }
                     menu.push("</ul>");
-                    for (i = 0; i < attachTo.length; i++) {
-                        attachTo.closest(".dropdown-menu");
-                    }
+
                     attachTo.append(menu.join(""));
 
-                    attachTo.find(".overflow-shadows").each(function(){ overflowShadows(this)})
+                    attachTo.find(".overflow-shadows").each(function(){
+                        // needs to be a function(){} so that we can access jQuery's `this`
+                        overflowShadows(this)
+                    })
+                    attachTo.find(".dropdown-menu").each(function(){
+                        // needs to be a function(){} so that we can access jQuery's `this`
+                        ensureDropdownOnscreen(this)
+                    })
                 }
             }
         });

Original file line number	Diff line number	Diff line change
`@@ -229,7 +229,7 @@ th,`
`229`	`229`	`.group-menu .dropdown-menu {`
`230`	`230`	`height: auto;`
`231`	`231`	`width: auto;`
`232`		`- max-height: 35em;`
	`232`	`+ max-height: 95vh;`
`233`	`233`	`overflow-x: hidden;`
`234`	`234`	`overflow-y: auto;`
`235`	`235`	`}`