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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user