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>
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user