From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 15 May 2022 11:00:09 +0000 (+0200)
Subject: Use CSS variable to apply the dialog offset
X-Git-Tag: 5.5.0_Beta_3~28
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=2743fae0b4567981ed564a7654d178020bfcb841;p=GitHub%2FWoltLab%2FWCF.git

Use CSS variable to apply the dialog offset
---

diff --git a/ts/WoltLabSuite/Core/Ui/Dialog.ts b/ts/WoltLabSuite/Core/Ui/Dialog.ts
index ee349cd6a6..a0ac4c163b 100644
--- a/ts/WoltLabSuite/Core/Ui/Dialog.ts
+++ b/ts/WoltLabSuite/Core/Ui/Dialog.ts
@@ -414,7 +414,7 @@ const UiDialog = {
             : entry.contentBoxSize;
 
           const offset = Math.floor(contentBoxSize.inlineSize / 2);
-          dialog.style.setProperty("transform", `translateX(-${offset}px)`);
+          dialog.style.setProperty("--translate-x", `-${offset}px`);
         }
       }
     });
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
index 65c330e1fd..4e574134c1 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
@@ -341,7 +341,7 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Change/Listener", "./S
                             ? entry.contentBoxSize[0]
                             : entry.contentBoxSize;
                         const offset = Math.floor(contentBoxSize.inlineSize / 2);
-                        dialog.style.setProperty("transform", `translateX(-${offset}px)`);
+                        dialog.style.setProperty("--translate-x", `-${offset}px`);
                     }
                 }
             });
diff --git a/wcfsetup/install/files/style/ui/dialog.scss b/wcfsetup/install/files/style/ui/dialog.scss
index 42f0504f68..648a923ea8 100644
--- a/wcfsetup/install/files/style/ui/dialog.scss
+++ b/wcfsetup/install/files/style/ui/dialog.scss
@@ -53,9 +53,6 @@
 		position: fixed;
 		right: 0 !important;
 		top: 0 !important;
-
-		// Remove the offsets for the dialog position.
-		transform: none !important;
 	}
 
 	@include screen-sm-up {
@@ -76,6 +73,7 @@
 		// this causes a blurry text rendering in Chromium.
 		// The offset is calculated using a `ResizeObserver`.
 		left: 50%;
+		transform: translateX(var(--translate-x, 0));
 
 		&[aria-hidden="false"] {
 			animation: wcfDialog 0.3s;