Dynamically stack the dialog controls on top of each other

Fixes #6400

Author: dtdesign

ts/WoltLabSuite/Core/Element/woltlab-core-dialog-control.ts

@@ -24,6 +24,15 @@ export class WoltlabCoreDialogControlElement extends HTMLElement {
   #extraButton?: HTMLButtonElement;
   #primaryButton?: HTMLButtonElement;
 
+  constructor() {
+    super();
+
+    const observer = new ResizeObserver(() => {
+      this.#checkForButtonOverflow();
+    });
+    observer.observe(this);
+  }
+
   set primary(primary: string) {
     this.setAttribute("primary", primary);
   }
@@ -144,6 +153,40 @@ export class WoltlabCoreDialogControlElement extends HTMLElement {
 
       this.append(this.#extraButton);
     }
+
+    this.#checkForButtonOverflow();
+  }
+
+  #checkForButtonOverflow(): void {
+    const hasCancelButton = this.#cancelButton !== undefined;
+    const hasExtraButton = this.#extraButton !== undefined;
+
+    if (!hasCancelButton) {
+      return;
+    }
+
+    const gap = parseInt(window.getComputedStyle(this).columnGap.replace(/^px/, ""), 10);
+
+    const primaryAndCancelWidth = this.#primaryButton!.clientWidth + gap + this.#cancelButton!.clientWidth;
+    const extraWidth = hasExtraButton ? gap + this.#extraButton!.clientWidth : 0;
+
+    if (hasExtraButton) {
+      if (primaryAndCancelWidth > this.clientWidth) {
+        this.classList.add("dialog__control--tripple-stacked");
+        this.classList.remove("dialog__control--extra-stacked");
+      } else if (primaryAndCancelWidth + extraWidth > this.clientWidth) {
+        this.classList.add("dialog__control--extra-stacked");
+        this.classList.remove("dialog__control--tripple-stacked");
+      } else {
+        this.classList.remove("dialog__control--tripple-stacked", "dialog__control--extra-stacked");
+      }
+    } else {
+      if (primaryAndCancelWidth > this.clientWidth) {
+        this.classList.add("dialog__control--duo-stacked");
+      } else {
+        this.classList.remove("dialog__control--duo-stacked");
+      }
+    }
   }
 }
 

wcfsetup/install/files/js/WoltLabSuite/Core/Element/woltlab-core-dialog-control.js

@@ -388,8 +388,39 @@ html[data-color-scheme="dark"] .dialog::backdrop {
 	column-gap: 10px;
 	display: grid;
 	grid-template-areas: "extra cancel primary";
-	grid-template-columns: auto max-content max-content;
+	grid-template-columns: minmax(min-content, auto) max-content max-content;
 	margin-top: 30px;
+	row-gap: 10px;
+}
+
+.dialog__control--duo-stacked,
+.dialog__control--extra-stacked,
+.dialog__control--tripple-stacked {
+	justify-content: end;
+}
+
+/* Cancel + Primary stacked on top of each other */
+.dialog__control--duo-stacked {
+	grid-template-areas:
+		"cancel"
+		"primary";
+	grid-template-columns: auto;
+}
+
+/* Cancel + Primary are next to each other and extra on top */
+.dialog__control--extra-stacked {
+	grid-template-areas:
+		"extra  extra"
+		"cancel primary";
+	grid-template-columns: auto max-content;
+}
+
+.dialog__control--tripple-stacked {
+	grid-template-areas:
+		"extra"
+		"cancel"
+		"primary";
+	grid-template-columns: auto;
 }
 
 .dialog__control__button--primary {
@@ -402,7 +433,13 @@ html[data-color-scheme="dark"] .dialog::backdrop {
 
 .dialog__control__button--extra {
 	grid-area: extra;
-	margin-right: auto;
+	justify-self: start;
+}
+
+.dialog__control--extra-stacked .dialog__control__button--extra,
+.dialog__control--tripple-stacked .dialog__control__button--extra {
+	justify-self: end;
+	margin-right: 0;
 }
 
 /* Sections inside dialogs */