Bug 1393001 - Fix edit address dialog form layout problems. r=lchang draft
authorScott Wu <scottcwwu@gmail.com>
Fri, 25 Aug 2017 16:42:06 +0800
changeset 652895 12e0bb66fccf6717615a67f9490a3109d1b428ab
parent 652622 2306e153fba9ca55726ffcce889eaca7a479c29f
child 728219 7c44f6f1edaee101e4cd33c633b2452ffdb23d0b
push id76194
push userbmo:scwwu@mozilla.com
push dateFri, 25 Aug 2017 10:08:58 +0000
reviewerslchang
bugs1393001
milestone57.0a1
Bug 1393001 - Fix edit address dialog form layout problems. r=lchang MozReview-Commit-ID: 9nWODMbh0SV
browser/extensions/formautofill/skin/shared/editAddress.css
browser/extensions/formautofill/skin/shared/editDialog.css
--- 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;