From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 9 May 2022 13:51:17 +0000 (+0200)
Subject: Dialogs could become too wide with lots of text
X-Git-Tag: 5.5.0_Beta_1~4
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=3c4160a9d50514433fc5ab43944dac7461ec899e;p=GitHub%2FWoltLab%2FWCF.git

Dialogs could become too wide with lots of text
---

diff --git a/ts/WoltLabSuite/Core/Ui/Dialog.ts b/ts/WoltLabSuite/Core/Ui/Dialog.ts
index 695b7b4cd9..ee349cd6a6 100644
--- a/ts/WoltLabSuite/Core/Ui/Dialog.ts
+++ b/ts/WoltLabSuite/Core/Ui/Dialog.ts
@@ -401,6 +401,25 @@ const UiDialog = {
       closeButton.appendChild(span);
     }
 
+    // Dialogs are positioned using `left: 50%` as a hack to
+    // force long softwrapping of text without causing other
+    // elements to be squished together. The actual value for
+    // `transform` must not use percent values, because this
+    // causes blurry text rendering in Chromium.
+    const resizeObserver = new ResizeObserver((entries) => {
+      if (dialog.getAttribute("aria-hidden") === "false") {
+        for (const entry of entries) {
+          const contentBoxSize: ResizeObserverSize = Array.isArray(entry.contentBoxSize)
+            ? entry.contentBoxSize[0]
+            : entry.contentBoxSize;
+
+          const offset = Math.floor(contentBoxSize.inlineSize / 2);
+          dialog.style.setProperty("transform", `translateX(-${offset}px)`);
+        }
+      }
+    });
+    resizeObserver.observe(dialog);
+
     const contentContainer = document.createElement("div");
     contentContainer.classList.add("dialogContent");
     if (options.disableContentPadding) contentContainer.classList.add("dialogContentNoPadding");
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
index 18521fb4c2..65c330e1fd 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
@@ -329,6 +329,23 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Change/Listener", "./S
                 span.className = "icon icon24 fa-times";
                 closeButton.appendChild(span);
             }
+            // Dialogs are positioned using `left: 50%` as a hack to
+            // force long softwrapping of text without causing other
+            // elements to be squished together. The actual value for
+            // `transform` must not use percent values, because this
+            // causes blurry text rendering in Chromium.
+            const resizeObserver = new ResizeObserver((entries) => {
+                if (dialog.getAttribute("aria-hidden") === "false") {
+                    for (const entry of entries) {
+                        const contentBoxSize = Array.isArray(entry.contentBoxSize)
+                            ? entry.contentBoxSize[0]
+                            : entry.contentBoxSize;
+                        const offset = Math.floor(contentBoxSize.inlineSize / 2);
+                        dialog.style.setProperty("transform", `translateX(-${offset}px)`);
+                    }
+                }
+            });
+            resizeObserver.observe(dialog);
             const contentContainer = document.createElement("div");
             contentContainer.classList.add("dialogContent");
             if (options.disableContentPadding)
diff --git a/wcfsetup/install/files/style/ui/dialog.scss b/wcfsetup/install/files/style/ui/dialog.scss
index e45883b324..81313321ff 100644
--- a/wcfsetup/install/files/style/ui/dialog.scss
+++ b/wcfsetup/install/files/style/ui/dialog.scss
@@ -67,6 +67,13 @@
 		min-width: 500px;
 		position: absolute;
 
+		// This is required to prevent dialogs from becoming
+		// unncessarily wide by forcing text to wrap. We cannot
+		// use `transform` to offset this indentation, because
+		// this causes a blurry text rendering in Chromium.
+		// The offset is calculated using a `ResizeObserver`.
+		left: 50%;
+
 		&[aria-hidden="false"] {
 			animation: wcfDialog 0.3s;
 			animation-fill-mode: forwards;