Bug 1393001 - Fix edit address dialog form layout problems. r=lchang
authorScott Wu <scottcwwu@gmail.com>
Fri, 25 Aug 2017 16:42:06 +0800
changeset 377170 19142556f7cbf62a0d613a1755b32ba8c9905cfa
parent 377169 6819414d32eb9e2a293f5c937d3db745237ea26a
child 377171 859f3f5bfb3d4993d7bf3ceb58baa01c19c1437f
push id32402
push userarchaeopteryx@coole-files.de
push dateMon, 28 Aug 2017 14:47:04 +0000
treeherdermozilla-central@d5b6d113cf17 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerslchang
bugs1393001
milestone57.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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;