From cdba464911770c1030e1320ba4d685e21d7f3740 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 13 Sep 2024 13:14:00 +0200
Subject: [PATCH] Update the position of the search bar and drop-down menus on
 window resize

See https://www.woltlab.com/community/thread/308171-ausrichtung-der-men%C3%BCpunkte-bei-%C3%A4nderung-der-fenstergr%C3%B6%C3%9Fe/
---
 ts/WoltLabSuite/Core/Ui/Dropdown/Simple.ts         | 14 ++++++++++++++
 ts/WoltLabSuite/Core/Ui/Search.ts                  | 14 ++++++++++++++
 .../js/WoltLabSuite/Core/Ui/Dropdown/Simple.js     | 12 ++++++++++++
 .../files/js/WoltLabSuite/Core/Ui/Search.js        |  8 ++++++++
 4 files changed, 48 insertions(+)

diff --git a/ts/WoltLabSuite/Core/Ui/Dropdown/Simple.ts b/ts/WoltLabSuite/Core/Ui/Dropdown/Simple.ts
index 77fab99ff3..14358aa69d 100644
--- a/ts/WoltLabSuite/Core/Ui/Dropdown/Simple.ts
+++ b/ts/WoltLabSuite/Core/Ui/Dropdown/Simple.ts
@@ -77,6 +77,19 @@ function onScroll() {
   });
 }
 
+/**
+ * Recalculates drop-down positions on page resize.
+ */
+function onWindowResize() {
+  _dropdowns.forEach((dropdown, containerId) => {
+    if (!dropdown.classList.contains("dropdownOpen")) {
+      return;
+    }
+
+    UiDropdownSimple.setAlignment(dropdown, _menus.get(containerId)!);
+  });
+}
+
 /**
  * Notifies callbacks on status change.
  */
@@ -379,6 +392,7 @@ const UiDropdownSimple = {
     DomChangeListener.add("WoltLabSuite/Core/Ui/Dropdown/Simple", () => UiDropdownSimple.initAll());
 
     document.addEventListener("scroll", onScroll);
+    window.addEventListener("resize", () => onWindowResize(), { passive: true });
 
     // expose on window object for backward compatibility
     window.bc_wcfSimpleDropdown = this;
diff --git a/ts/WoltLabSuite/Core/Ui/Search.ts b/ts/WoltLabSuite/Core/Ui/Search.ts
index 0c705bca0d..92ecc093ea 100644
--- a/ts/WoltLabSuite/Core/Ui/Search.ts
+++ b/ts/WoltLabSuite/Core/Ui/Search.ts
@@ -75,6 +75,20 @@ function initSearchBar(): void {
 
     _pageHeaderSearchMobile?.setAttribute("aria-expanded", "false");
   });
+
+  window.addEventListener(
+    "resize",
+    () => {
+      if (_isMobile || !_pageHeader.classList.contains("searchBarOpen")) {
+        return;
+      }
+
+      UiAlignment.set(_pageHeaderSearch, _topMenu, {
+        horizontal: "right",
+      });
+    },
+    { passive: true },
+  );
 }
 
 function initMobileSearch(): void {
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js
index 51dc008c73..6bf00cfc4f 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js
@@ -75,6 +75,17 @@ define(["require", "exports", "tslib", "../../CallbackList", "../../Core", "../.
             }
         });
     }
+    /**
+     * Recalculates drop-down positions on page resize.
+     */
+    function onWindowResize() {
+        _dropdowns.forEach((dropdown, containerId) => {
+            if (!dropdown.classList.contains("dropdownOpen")) {
+                return;
+            }
+            UiDropdownSimple.setAlignment(dropdown, _menus.get(containerId));
+        });
+    }
     /**
      * Notifies callbacks on status change.
      */
@@ -322,6 +333,7 @@ define(["require", "exports", "tslib", "../../CallbackList", "../../Core", "../.
             CloseOverlay_1.default.add("WoltLabSuite/Core/Ui/Dropdown/Simple", () => UiDropdownSimple.closeAll());
             Listener_1.default.add("WoltLabSuite/Core/Ui/Dropdown/Simple", () => UiDropdownSimple.initAll());
             document.addEventListener("scroll", onScroll);
+            window.addEventListener("resize", () => onWindowResize(), { passive: true });
             // expose on window object for backward compatibility
             window.bc_wcfSimpleDropdown = this;
         },
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js
index bd561ab55a..8e644b5c09 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js
@@ -68,6 +68,14 @@ define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./Clo
             closeSearch();
             _pageHeaderSearchMobile === null || _pageHeaderSearchMobile === void 0 ? void 0 : _pageHeaderSearchMobile.setAttribute("aria-expanded", "false");
         });
+        window.addEventListener("resize", () => {
+            if (_isMobile || !_pageHeader.classList.contains("searchBarOpen")) {
+                return;
+            }
+            UiAlignment.set(_pageHeaderSearch, _topMenu, {
+                horizontal: "right",
+            });
+        }, { passive: true });
     }
     function initMobileSearch() {
         const searchButton = document.getElementById("pageHeaderSearchMobile");
-- 
2.20.1