Fix overflow menu flickering on mobile (#31484)

The overflow menu button was incorrectly included in the measurement of
the width of the items. As a result, it could get stuck in a loop
alternating between different measurements as the button appears and
disappears.

1 files changed, 4 insertions, 0 deletions

diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index 80dd1a545b..9fe8caba44 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -61,6 +61,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
     }
 
     const itemFlexSpace = this.menuItemsEl.querySelector('.item-flex-space');
+    const itemOverFlowMenuButton = this.querySelector('.overflow-menu-button');
 
     // move items in tippy back into the menu items for subsequent measurement
     for (const item of this.tippyItems || []) {
@@ -72,7 +73,9 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
     }
 
     // measure which items are partially outside the element and move them into the button menu
+    // flex space and overflow menu are excluded from measurement
     itemFlexSpace?.style.setProperty('display', 'none', 'important');
+    itemOverFlowMenuButton?.style.setProperty('display', 'none', 'important');
     this.tippyItems = [];
     const menuRight = this.offsetLeft + this.offsetWidth;
     const menuItems = this.menuItemsEl.querySelectorAll('.item, .item-flex-space');
@@ -89,6 +92,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
       }
     }
     itemFlexSpace?.style.removeProperty('display');
+    itemOverFlowMenuButton?.style.removeProperty('display');
 
     // if there are no overflown items, remove any previously created button
     if (!this.tippyItems?.length) {