From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 28 Dec 2021 16:41:06 +0000 (+0100)
Subject: Improved the menu overflow behavior
X-Git-Tag: 5.5.0_Alpha_1~242^2~22
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=a1a3961e50a97fc8274a64770de167253d61feb5;p=GitHub%2FWoltLab%2FWCF.git

Improved the menu overflow behavior
---

diff --git a/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts b/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts
index aa6433d12d..282274bc13 100644
--- a/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts
+++ b/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts
@@ -99,7 +99,7 @@ export class PageMenuMain implements PageMenuProvider {
     container.classList.add("pageMenuMainContainer");
     container.addEventListener("scroll", () => this.updateOverflowIndicator(container), { passive: true });
 
-    container.append(...this.buildMainMenu());
+    container.append(this.buildMainMenu());
 
     const footerMenu = this.buildFooterMenu();
     if (footerMenu) {
@@ -130,14 +130,14 @@ export class PageMenuMain implements PageMenuProvider {
     this.refreshUnreadIndicator();
   }
 
-  private buildMainMenu(): HTMLElement[] {
+  private buildMainMenu(): HTMLElement {
     const boxMenu = this.mainMenu.querySelector(".boxMenu") as HTMLElement;
 
     const nav = this.buildMenu(boxMenu);
     nav.setAttribute("aria-label", window.PAGE_TITLE);
     nav.setAttribute("role", "navigation");
 
-    return [nav];
+    return nav;
   }
 
   private buildFooterMenu(): HTMLElement | null {
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js
index 04ffcba6b8..1c36140212 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js
@@ -71,7 +71,7 @@ define(["require", "exports", "tslib", "./Container", "../../../Language", "../.
             const container = document.createElement("div");
             container.classList.add("pageMenuMainContainer");
             container.addEventListener("scroll", () => this.updateOverflowIndicator(container), { passive: true });
-            container.append(...this.buildMainMenu());
+            container.append(this.buildMainMenu());
             const footerMenu = this.buildFooterMenu();
             if (footerMenu) {
                 container.append(footerMenu);
@@ -99,7 +99,7 @@ define(["require", "exports", "tslib", "./Container", "../../../Language", "../.
             const nav = this.buildMenu(boxMenu);
             nav.setAttribute("aria-label", window.PAGE_TITLE);
             nav.setAttribute("role", "navigation");
-            return [nav];
+            return nav;
         }
         buildFooterMenu() {
             const box = document.querySelector('.box[data-box-identifier="com.woltlab.wcf.FooterMenu"]');
diff --git a/wcfsetup/install/files/style/ui/pageMenu.scss b/wcfsetup/install/files/style/ui/pageMenu.scss
index 77ab2f04ff..ca902ae3ec 100644
--- a/wcfsetup/install/files/style/ui/pageMenu.scss
+++ b/wcfsetup/install/files/style/ui/pageMenu.scss
@@ -102,6 +102,10 @@
 	padding: 0 10px;
 	text-overflow: ellipsis;
 	white-space: nowrap;
+
+	&:hover {
+		color: inherit;
+	}
 }
 
 .pageMenuMainItemCounter {
@@ -237,7 +241,12 @@
 }
 
 @include screen-sm-down {
-	.pageMenuContent {
+	.pageMenuMainNavigation:last-child {
+		/* Gap to prevent conflicts with the UI elements of touch browsers. */
+		margin-bottom: 30px;
+	}
+
+	.pageMenuUserTabContainer {
 		/* Gap to prevent conflicts with the UI elements of touch browsers. */
 		padding-bottom: 30px;
 	}