From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 3 May 2023 12:44:47 +0000 (+0200)
Subject: Suppress the forced alignment of elements on desktop
X-Git-Tag: 6.0.0_Alpha_1~168
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=68d8201506681549502b066998642933bdba9335;p=GitHub%2FWoltLab%2FWCF.git

Suppress the forced alignment of elements on desktop

The change 33420e94314be013a48d6fecb1a8a38c1635e6d1 was targeted at touch devices, but affected desktop environments too.
---

diff --git a/ts/WoltLabSuite/Core/Ui/Alignment.ts b/ts/WoltLabSuite/Core/Ui/Alignment.ts
index cd320fdf13..5b2ddb4e37 100644
--- a/ts/WoltLabSuite/Core/Ui/Alignment.ts
+++ b/ts/WoltLabSuite/Core/Ui/Alignment.ts
@@ -10,6 +10,7 @@ import * as Core from "../Core";
 import * as DomTraverse from "../Dom/Traverse";
 import DomUtil from "../Dom/Util";
 import * as Language from "../Language";
+import * as Environment from "../Environment";
 
 type HorizontalAlignment = "center" | "left" | "right";
 type VerticalAlignment = "bottom" | "top";
@@ -264,6 +265,8 @@ export function set(element: HTMLElement, referenceElement: HTMLElement, options
     }
   }
 
+  let isForcedVerticalPosition = false;
+
   const left = horizontal!.left;
   const right = horizontal!.right;
   let vertical = tryAlignmentVertical(
@@ -286,7 +289,7 @@ export function set(element: HTMLElement, referenceElement: HTMLElement, options
     // only use these results if it fits into the boundaries, otherwise both directions exceed and we honor the demanded direction
     if (verticalFlipped.result) {
       vertical = verticalFlipped;
-    } else {
+    } else if (Environment.platform() !== "desktop") {
       // The element fits neither to the top nor the bottom. This is
       // especially an issue on mobile devices where the element might
       // exceed the window boundary if we are stubborn about the alignment.
@@ -312,6 +315,8 @@ export function set(element: HTMLElement, referenceElement: HTMLElement, options
           top: preferTop ? "auto" : 0,
         };
       }
+
+      isForcedVerticalPosition = true;
     }
   }
 
@@ -349,9 +354,11 @@ export function set(element: HTMLElement, referenceElement: HTMLElement, options
     window.getComputedStyle(element).position === "fixed" ||
     (element.offsetParent && window.getComputedStyle(element.offsetParent).position === "fixed")
   ) {
-    // Ignore offsets caused by page scrolling.
-    if (bottom !== "auto") bottom = bottom + window.scrollY;
-    if (top !== "auto") top = top - window.scrollY;
+    if (!isForcedVerticalPosition) {
+      // Ignore offsets caused by page scrolling.
+      if (bottom !== "auto") bottom = bottom + window.scrollY;
+      if (top !== "auto") top = top - window.scrollY;
+    }
   }
 
   DomUtil.setStyles(element, {
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Alignment.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Alignment.js
index a567321531..db01391b6d 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Alignment.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Alignment.js
@@ -5,7 +5,7 @@
  * @copyright  2001-2019 WoltLab GmbH
  * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  */
-define(["require", "exports", "tslib", "../Core", "../Dom/Traverse", "../Dom/Util", "../Language"], function (require, exports, tslib_1, Core, DomTraverse, Util_1, Language) {
+define(["require", "exports", "tslib", "../Core", "../Dom/Traverse", "../Dom/Util", "../Language", "../Environment"], function (require, exports, tslib_1, Core, DomTraverse, Util_1, Language, Environment) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.set = void 0;
@@ -13,6 +13,7 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Traverse", "../Dom/Uti
     DomTraverse = tslib_1.__importStar(DomTraverse);
     Util_1 = tslib_1.__importDefault(Util_1);
     Language = tslib_1.__importStar(Language);
+    Environment = tslib_1.__importStar(Environment);
     /**
      * Calculates top/bottom position and verifies if the element would be still within the page's boundaries.
      */
@@ -198,6 +199,7 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Traverse", "../Dom/Uti
                 }
             }
         }
+        let isForcedVerticalPosition = false;
         const left = horizontal.left;
         const right = horizontal.right;
         let vertical = tryAlignmentVertical(options.vertical, elDimensions, refDimensions, refOffsets, windowHeight, options.verticalOffset);
@@ -207,7 +209,7 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Traverse", "../Dom/Uti
             if (verticalFlipped.result) {
                 vertical = verticalFlipped;
             }
-            else {
+            else if (Environment.platform() !== "desktop") {
                 // The element fits neither to the top nor the bottom. This is
                 // especially an issue on mobile devices where the element might
                 // exceed the window boundary if we are stubborn about the alignment.
@@ -233,6 +235,7 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Traverse", "../Dom/Uti
                         top: preferTop ? "auto" : 0,
                     };
                 }
+                isForcedVerticalPosition = true;
             }
         }
         let bottom = vertical.bottom;
@@ -267,11 +270,13 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Traverse", "../Dom/Uti
         // Check if the element itself has a position of `fixed`.
         if (window.getComputedStyle(element).position === "fixed" ||
             (element.offsetParent && window.getComputedStyle(element.offsetParent).position === "fixed")) {
-            // Ignore offsets caused by page scrolling.
-            if (bottom !== "auto")
-                bottom = bottom + window.scrollY;
-            if (top !== "auto")
-                top = top - window.scrollY;
+            if (!isForcedVerticalPosition) {
+                // Ignore offsets caused by page scrolling.
+                if (bottom !== "auto")
+                    bottom = bottom + window.scrollY;
+                if (top !== "auto")
+                    top = top - window.scrollY;
+            }
         }
         Util_1.default.setStyles(element, {
             bottom: bottom === "auto" ? bottom : Math.round(bottom).toString() + "px",