Backporting for LTS 2.516.1 (part 1)

core/src/main/resources/lib/layout/header/actions.jelly

@@ -30,7 +30,7 @@
       </j:forEach>
     </j:set>
     <j:if test="${hamburgerEntries.length() gt 0}">
-      <l:overflowButton icon="symbol-menu-hamburger" id="header-more-actions">
+      <l:overflowButton icon="symbol-menu-hamburger" id="header-more-actions" clazz="jenkins-button--tertiary">
         <j:out value="${hamburgerEntries}" />
       </l:overflowButton>
     </j:if>

src/main/js/components/dropdowns/templates.js

@@ -36,6 +36,15 @@ function dropdown() {
     animation: "dropdown",
     duration: 250,
     onShow: (instance) => {
+      // Make sure only one instance is visible at all times
+      const dropdowns = document.querySelectorAll("[data-tippy-root]");
+      Array.from(dropdowns).forEach((element) => {
+        // Check if the Tippy.js instance exists
+        if (element && element._tippy) {
+          // To just hide the dropdown
+          element._tippy.hide();
+        }
+      });
       const referenceParent = instance.reference.parentNode;
 
       if (referenceParent.classList.contains("model-link")) {

src/main/js/components/header/index.js

@@ -13,6 +13,10 @@ function init() {
     }
   });
 
+  window.addEventListener("computeHeaderOverflow", () => {
+    computeOverflow();
+  });
+
   // Fade in the page header on scroll, increasing opacity and intensity of the backdrop blur
   window.addEventListener("scroll", () => {
     const navigation = document.querySelector("#page-header");