cr-elements: Uniform padding for buttons in cr-dialog.
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}
diff --git a/chrome/browser/resources/settings/autofill_page/credit_card_edit_dialog.html b/chrome/browser/resources/settings/autofill_page/credit_card_edit_dialog.html
index 6c6b510..5132bad 100644
--- a/chrome/browser/resources/settings/autofill_page/credit_card_edit_dialog.html
+++ b/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;
}
diff --git a/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html b/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html
index 513a6b1..4e04527 100644
--- a/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html
+++ b/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]) {
