From 203527c9d8f09f638c728731a9d7fe0dc9eff184 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Thu, 9 Jun 2022 15:50:03 +0200
Subject: [PATCH] Incorrect alignment of drop-down menus on mobile

See https://www.woltlab.com/community/thread/295903-abonniert-dropdown-fehlerhafte-darstellung/
---
 ts/WoltLabSuite/Core/Ui/Alignment.ts          | 27 ++++++++++++++++++
 .../js/WoltLabSuite/Core/Ui/Alignment.js      | 28 +++++++++++++++++++
 .../style/bootstrap/mixin/dropdownMenu.scss   | 12 --------
 3 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/ts/WoltLabSuite/Core/Ui/Alignment.ts b/ts/WoltLabSuite/Core/Ui/Alignment.ts
index 9b0ee7cd7a..64556e0f97 100644
--- a/ts/WoltLabSuite/Core/Ui/Alignment.ts
+++ b/ts/WoltLabSuite/Core/Ui/Alignment.ts
@@ -235,6 +235,33 @@ export function set(element: HTMLElement, referenceElement: HTMLElement, options
         horizontal = horizontalFlipped;
       } else if (alignCenter) {
         horizontal = horizontalCenter;
+      } else {
+        // The element fits neither to the left nor the right, but the center
+        // position is not requested either. This is especially an issue on mobile
+        // devices where the element might exceed the window boundary if we are
+        // stubborn about the alignment.
+        //
+        // The last thing we can try is to check if the element fits inside the
+        // viewport and then align it at the left / right boundary, whichever
+        // is closest to the boundary of the reference element.
+        if (elDimensions.width === windowWidth) {
+          horizontal = {
+            align: "left",
+            left: 0,
+            result: true,
+            right: 0,
+          };
+        } else if (elDimensions.width < windowWidth) {
+          const distanceToRightBoundary = windowWidth - (refOffsets.left + refDimensions.width);
+          const preferLeft = refOffsets.left <= distanceToRightBoundary;
+
+          horizontal = {
+            align: preferLeft ? "left" : "right",
+            left: preferLeft ? 0 : "auto",
+            result: true,
+            right: preferLeft ? "auto" : 0,
+          };
+        }
       }
     }
   }
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Alignment.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Alignment.js
index b5e60e5483..8444c9b5ca 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Alignment.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Alignment.js
@@ -170,6 +170,34 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Traverse", "../Dom/Uti
                 else if (alignCenter) {
                     horizontal = horizontalCenter;
                 }
+                else {
+                    // The element fits neither to the left nor the right, but the center
+                    // position is not requested either. This is especially an issue on mobile
+                    // devices where the element might exceed the window boundary if we are
+                    // stubborn about the alignment.
+                    //
+                    // The last thing we can try is to check if the element fits inside the
+                    // viewport and then align it at the left / right boundary, whichever
+                    // is closest to the boundary of the reference element.
+                    if (elDimensions.width === windowWidth) {
+                        horizontal = {
+                            align: "left",
+                            left: 0,
+                            result: true,
+                            right: 0,
+                        };
+                    }
+                    else if (elDimensions.width < windowWidth) {
+                        const distanceToRightBoundary = windowWidth - (refOffsets.left + refDimensions.width);
+                        const preferLeft = refOffsets.left <= distanceToRightBoundary;
+                        horizontal = {
+                            align: preferLeft ? "left" : "right",
+                            left: preferLeft ? 0 : "auto",
+                            result: true,
+                            right: preferLeft ? "auto" : 0,
+                        };
+                    }
+                }
             }
         }
         const left = horizontal.left;
diff --git a/wcfsetup/install/files/style/bootstrap/mixin/dropdownMenu.scss b/wcfsetup/install/files/style/bootstrap/mixin/dropdownMenu.scss
index 108e7e97c0..f2fb2e41a5 100644
--- a/wcfsetup/install/files/style/bootstrap/mixin/dropdownMenu.scss
+++ b/wcfsetup/install/files/style/bootstrap/mixin/dropdownMenu.scss
@@ -140,18 +140,6 @@
 		}
 	}
 
-	@include screen-md-down {
-		li {
-			overflow: hidden;
-
-			> a,
-			> span {
-				max-width: none;
-				white-space: normal;
-			}
-		}
-	}
-
 	@include screen-md-up {
 		.dropdownMenu.pageHeaderSearchDropdown {
 			transform: translateY(-10px);
-- 
2.20.1