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 695b7b4cd98083a8b732a5fb8b78d43fc4d347c1..ee349cd6a66c1c55bf09396f3fabdcab6caeb406 100644 (file)
--- 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 18521fb4c221484fa1cab49dbb2b853f7be87be0..65c330e1fd59715162849525e63f9c6f338e9644 100644 (file)
--- 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 e45883b324741bd93da44c7506f7fd04363f5c3e..81313321ffdf5dd037ac015f186c7089bdfcbb83 100644 (file)
--- 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;