Rebuild the menu overflow on width changes

Recalculating this on window resize is possibly unnecessary plus it does not detect changes to the menu’s available width while the window stays the same.

See https://www.woltlab.com/community/thread/302316-men%C3%BCpfeile-bei-zu-vielen-men%C3%BCpunkten-nicht-vorhanden/

diff --git a/ts/WoltLabSuite/Core/Ui/Page/Header/Menu.ts b/ts/WoltLabSuite/Core/Ui/Page/Header/Menu.ts
index 0409a15048ead714f3f9caf02a2c3e894b4ddc03..c990d64e06c980cab461d5c5bd1def84ebdf2cbe 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Page/Header/Menu.ts
+++ b/ts/WoltLabSuite/Core/Ui/Page/Header/Menu.ts
@@ -135,12 +135,13 @@ function setup(): void {
 function setupOverflow(): void {
   _firstElement.addEventListener("transitionend", rebuildVisibility);
 
-  window.addEventListener("resize", () => {
+  const observer = new ResizeObserver(() => {
     _firstElement.style.setProperty("margin-left", "0px", "");
     _marginLeft = 0;
 
     rebuildVisibility();
   });
+  observer.observe(_menu);
 
   enable();
 }

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Menu.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Menu.js
index 3a7aaa707bb3bf47b0965603216f206502d39679..8248297ace1459992e58c946954f25d2cc71294a 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Menu.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Menu.js
@@ -119,11 +119,12 @@ define(["require", "exports", "tslib", "../../../Environment", "../../../Languag
      */
     function setupOverflow() {
         _firstElement.addEventListener("transitionend", rebuildVisibility);
-        window.addEventListener("resize", () => {
+        const observer = new ResizeObserver(() => {
             _firstElement.style.setProperty("margin-left", "0px", "");
             _marginLeft = 0;
             rebuildVisibility();
         });
+        observer.observe(_menu);
         enable();
     }
     function initOverflowNavigation() {