From 6ea3c2b88cc0325759995de64b0636e9b99e5455 Mon Sep 17 00:00:00 2001
From: fs <fs@breadcrumb-solutions.de>
Date: Thu, 26 Mar 2026 10:48:12 +0100
Subject: [PATCH] feat(ui): standardize dialog widths with tiered size system
 (sm/md/lg)

Add three reusable size tier classes (app-dialog-sm, app-dialog-md,
app-dialog-lg) to base dialog CSS, replacing per-variant max-width
rules. Each tier uses width: min(Xrem, calc(100vw - 2rem)) for
consistent fixed widths with responsive mobile fallback.

- Confirm dialog + session warning: app-dialog-sm (24rem)
- Bookmark + bookmark group dialog: app-dialog-md (32rem)
- Remove max-width from app-confirm-dialog.css and app-bookmark-form.css

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 modules/bookmarks/templates/bookmark-dialogs.phtml   |  4 ++--
 .../web/css/components/app-bookmark-form.css         |  5 -----
 templates/partials/app-confirm-dialog.phtml          |  2 +-
 templates/partials/app-session-warning-dialog.phtml  |  2 +-
 web/css/components/app-confirm-dialog.css            |  4 ----
 web/css/components/app-dialog.css                    | 12 ++++++++++++
 6 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/modules/bookmarks/templates/bookmark-dialogs.phtml b/modules/bookmarks/templates/bookmark-dialogs.phtml
index e1a06cb..a941db2 100644
--- a/modules/bookmarks/templates/bookmark-dialogs.phtml
+++ b/modules/bookmarks/templates/bookmark-dialogs.phtml
@@ -51,7 +51,7 @@ $iconLabels = [
   data-url-preview-label="<?php e(t('Bookmarking this page:')); ?>"
   aria-labelledby="app-bookmark-dialog-title"
 >
-  <article class="app-bookmark-dialog">
+  <article class="app-bookmark-dialog app-dialog-md">
     <header>
       <h2 id="app-bookmark-dialog-title"><?php e(t('Add bookmark')); ?></h2>
       <button type="button" class="close" data-bookmark-dialog-close aria-label="<?php e(t('Close')); ?>" title="<?php e(t('Close')); ?>"></button>
@@ -101,7 +101,7 @@ $iconLabels = [
   data-msg-name-required="<?php e(t('Group name is required')); ?>"
   aria-labelledby="app-bookmark-group-dialog-title"
 >
-  <article class="app-bookmark-dialog app-bookmark-group-dialog">
+  <article class="app-bookmark-dialog app-bookmark-group-dialog app-dialog-md">
     <header>
       <h2 id="app-bookmark-group-dialog-title"><?php e(t('New group')); ?></h2>
       <button type="button" class="close" data-bookmark-group-dialog-close aria-label="<?php e(t('Close')); ?>" title="<?php e(t('Close')); ?>"></button>
diff --git a/modules/bookmarks/web/css/components/app-bookmark-form.css b/modules/bookmarks/web/css/components/app-bookmark-form.css
index cbcefd3..cd8c481 100644
--- a/modules/bookmarks/web/css/components/app-bookmark-form.css
+++ b/modules/bookmarks/web/css/components/app-bookmark-form.css
@@ -3,11 +3,6 @@
  * Styles for bookmark and bookmark-group dialogs.
  */
 @layer components {
-  dialog[data-app-bookmark-dialog] > article.app-bookmark-dialog,
-  dialog[data-app-bookmark-group-dialog] > article.app-bookmark-dialog {
-    max-width: 24rem;
-  }
-
   dialog[data-app-bookmark-dialog] > article.app-bookmark-dialog > header,
   dialog[data-app-bookmark-group-dialog] > article.app-bookmark-dialog > header {
     position: relative;
diff --git a/templates/partials/app-confirm-dialog.phtml b/templates/partials/app-confirm-dialog.phtml
index efeb1fb..0e96dda 100644
--- a/templates/partials/app-confirm-dialog.phtml
+++ b/templates/partials/app-confirm-dialog.phtml
@@ -7,7 +7,7 @@
   aria-labelledby="app-confirm-dialog-title"
   aria-describedby="app-confirm-dialog-message"
 >
-  <article class="app-confirm-dialog">
+  <article class="app-confirm-dialog app-dialog-sm">
     <header>
       <h2 id="app-confirm-dialog-title" data-app-confirm-title><?php e(t('Please confirm')); ?></h2>
       <button type="button" class="close" data-app-confirm-close aria-label="<?php e(t('Close')); ?>" title="<?php e(t('Close')); ?>"></button>
diff --git a/templates/partials/app-session-warning-dialog.phtml b/templates/partials/app-session-warning-dialog.phtml
index fff247c..b573813 100644
--- a/templates/partials/app-session-warning-dialog.phtml
+++ b/templates/partials/app-session-warning-dialog.phtml
@@ -5,7 +5,7 @@
   aria-describedby="app-session-warning-message"
   aria-live="assertive"
 >
-  <article class="app-session-warning-dialog">
+  <article class="app-session-warning-dialog app-dialog-sm">
     <header>
       <h2 id="app-session-warning-title"><?php e(t('Session expiring')); ?></h2>
     </header>
diff --git a/web/css/components/app-confirm-dialog.css b/web/css/components/app-confirm-dialog.css
index 8302bf2..081e2b2 100644
--- a/web/css/components/app-confirm-dialog.css
+++ b/web/css/components/app-confirm-dialog.css
@@ -1,9 +1,5 @@
 @layer components {
   /* Confirm dialog — modal overlay for destructive action confirmation with danger/warning variants. */
-  dialog[data-app-confirm-dialog] > article.app-confirm-dialog {
-    max-width: 32rem;
-  }
-
   dialog[data-app-confirm-dialog] > article.app-confirm-dialog > header {
     position: relative;
     padding-inline-end: 2rem;
diff --git a/web/css/components/app-dialog.css b/web/css/components/app-dialog.css
index 574ace1..1d730e6 100644
--- a/web/css/components/app-dialog.css
+++ b/web/css/components/app-dialog.css
@@ -5,6 +5,18 @@
  * Variant-specific styles live in their own component files (app-confirm-dialog.css, etc.).
  */
 @layer components {
+  /* ── Size tiers ────────────────────────────────────────────────────────
+   * Fixed-width tiers so every dialog of the same purpose feels consistent.
+   * Apply one of these classes to the <article> inside <dialog>.
+   *   sm (24rem) — simple prompts, confirmations, alerts
+   *   md (32rem) — form dialogs with 1-3 fields, pickers
+   *   lg (40rem) — complex forms, multi-section dialogs
+   * min() ensures graceful shrink on narrow viewports.
+   * ──────────────────────────────────────────────────────────────────── */
+  dialog > article.app-dialog-sm { width: min(24rem, calc(100vw - 2rem)); }
+  dialog > article.app-dialog-md { width: min(32rem, calc(100vw - 2rem)); }
+  dialog > article.app-dialog-lg { width: min(40rem, calc(100vw - 2rem)); }
+
   /* ── Footer layout ───────────────────────────────────────────────────── */
   dialog > article > footer,
   dialog > article form > footer {