Files
breadcrumb-the-shire/templates/partials/app-confirm-dialog.phtml
fs 6ea3c2b88c 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>
2026-03-26 10:48:12 +01:00

23 lines
1.1 KiB
PHTML

<dialog
data-app-confirm-dialog
data-default-title="<?php e(t('Please confirm')); ?>"
data-default-confirm-label="<?php e(t('Confirm')); ?>"
data-default-cancel-label="<?php e(t('Cancel')); ?>"
data-default-danger-note="<?php e(t('This action cannot be undone.')); ?>"
aria-labelledby="app-confirm-dialog-title"
aria-describedby="app-confirm-dialog-message"
>
<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>
</header>
<p id="app-confirm-dialog-message" data-app-confirm-message></p>
<p id="app-confirm-dialog-note" data-app-confirm-note class="muted" hidden></p>
<footer>
<button type="button" class="secondary outline" data-app-confirm-cancel><?php e(t('Cancel')); ?></button>
<button type="button" class="primary" data-app-confirm-confirm><?php e(t('Confirm')); ?></button>
</footer>
</article>
</dialog>