Bug 1393001 - Fix edit address dialog form layout problems. r=lchang
MozReview-Commit-ID: 9nWODMbh0SV
--- a/browser/extensions/formautofill/skin/shared/editAddress.css
+++ b/browser/extensions/formautofill/skin/shared/editAddress.css
@@ -5,46 +5,47 @@
label > span {
flex: 0 0 9.5em;
}
input,
select {
width: calc(50% - 9.5em);
+ margin: 0;
}
#given-name-container,
#additional-name-container,
#address-level1-container,
#postal-code-container,
-#country-container {
+#country-container,
+#family-name-container,
+#organization-container,
+#address-level2-container,
+#tel-container {
flex: 0 1 50%;
}
#family-name-container,
#organization-container,
-#street-address-container,
#address-level2-container,
-#email-container,
#tel-container {
- flex: 0 1 100%;
+ padding-inline-end: 50%;
}
-#family-name,
-#organization,
-#address-level2,
-#tel {
- flex: 0 0 auto;
+#street-address-container,
+#email-container {
+ flex: 0 1 100%;
}
#street-address,
#email {
flex: 1 0 auto;
}
#country-warning-message {
- flex: 1;
+ flex: 1 0 auto;
align-items: center;
text-align: start;
color: #737373;
padding-inline-start: 1em;
}
--- a/browser/extensions/formautofill/skin/shared/editDialog.css
+++ b/browser/extensions/formautofill/skin/shared/editDialog.css
@@ -12,19 +12,19 @@ div,
p {
display: flex;
}
form {
flex-wrap: wrap;
}
-label,
-p {
- margin: 0 0 0.5em;
+form > label,
+form > p {
+ margin: 0 0 0.5em !important;
}
label > span,
div > span {
box-sizing: border-box;
padding-inline-end: 0.7em;
align-self: center;
text-align: end;