chromium/src
0
Fork 0
Code Activity

cr-elements: Uniform padding for buttons in cr-dialog.

Browse Source 
In situations where the the button-container border is visible,
non-uniform padding for cr-buttons results in off-center buttons. This
CL modifies the default padding to be a uniform 16px.

This CL fixes the layout for credit_card_edit_dialog.html as it was
overriding the button padding with non-uniform padding, which resulted
in the problem noted above. I manually verified that this also fixes a
similar issue for chrome://settings/addresses.

This CL will induce a small (8px) vertical layout shift cr-buttons in
button-containers for other WebUI surfaces.

Fixed: 1403663
Change-Id: I6dac729c0f3c9a3ffaff7af77851f2ed49139a58
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4482616
Reviewed-by: John Lee <johntlee@chromium.org>
Commit-Queue: Erik Chen <erikchen@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1144502}
This commit is contained in:
Erik Chen
2023-05-16 01:02:40 +00:00
committed by Chromium LUCI CQ
parent e2ff2a4a2d
commit 32f10a2b83
2 changed files with 4 additions and 7 deletions
chrome/browser/resources/settings/autofill_page
credit_card_edit_dialog.html
ui/webui/resources/cr_elements/cr_dialog
cr_dialog.html

7
chrome/browser/resources/settings/autofill_page/credit_card_edit_dialog.html

@ -6,11 +6,6 @@
width: var(--cr-default-input-max-width);
}
/* Override the padding-top (the space is set by save-to-this-device). */
div[slot='button-container'] {
padding-top: 0;
}
.md-select + .md-select {
margin-inline-start: 8px;
}
@ -23,7 +18,7 @@
/* Overall space between input fields, including space between
nicknameInput and saved-to-this-device text, between
saved-to-this-device text and button. */
margin-bottom: 26px;
margin-bottom: 10px;
margin-top: 0;
}

4
ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html

@ -79,13 +79,15 @@
padding-top: var(--cr-dialog-title-slot-padding-top, 20px);
}
/* Note that if the padding is non-uniform and the button-container
* border is visible, then the buttons will appear off-center. */
:host ::slotted([slot=button-container]) {
display: flex;
justify-content: flex-end;
padding-bottom: var(--cr-dialog-button-container-padding-bottom, 16px);
padding-inline-end: var(--cr-dialog-button-container-padding-horizontal, 16px);
padding-inline-start: var(--cr-dialog-button-container-padding-horizontal, 16px);
padding-top: 24px;
padding-top: 16px;
}
:host ::slotted([slot=footer]) {