make Account Settings more responsive

media/css/mkt/account.less

@@ -7,7 +7,9 @@
         margin: 0;
         padding: 0;
     }
-    ol,
+    ol {
+        margin-top: 5px;
+    }
     ol > li + li {
         margin-top: 10px;
     }

media/css/mkt/forms.less

@@ -7,25 +7,6 @@ button, input, select, textarea {
     vertical-align: middle;
 }
 
-input {
-    &[type=file] {
-        font-family: sans-serif;
-    }
-    &[type=checkbox],
-    &[type=radio] {
-        margin-right: 5px;
-    }
-}
-
-.html-rtl {
-    input {
-        &[type=checkbox],
-        &[type=radio] {
-            margin: 0 0 0 5px;
-        }
-    }
-}
-
 button, input {
     line-height: normal;
 }
@@ -46,14 +27,6 @@ input:-moz-placeholder {
     color: @gray;
 }
 
-textarea {
-    .border-box;
-    display: block;
-    overflow: auto;
-    vertical-align: top;
-    width: 100%;
-}
-
 input[type=text], input[type=password], select, textarea {
     .border-box;
     .border-radius(5px);
@@ -79,6 +52,34 @@ input[type=file], select {
     }
 }
 
+input {
+    &[type=file] {
+        font-family: sans-serif;
+    }
+    &[type=checkbox],
+    &[type=radio] {
+        margin-right: 5px;
+        vertical-align: baseline;
+    }
+}
+
+.html-rtl {
+    input {
+        &[type=checkbox],
+        &[type=radio] {
+            margin: 0 0 0 5px;
+        }
+    }
+}
+
+textarea {
+    .border-box;
+    display: block;
+    overflow: auto;
+    vertical-align: top;
+    width: 100%;
+}
+
 select {
     padding: 0;
 }
@@ -163,6 +164,13 @@ form {
     }
 }
 
+.edit_with_prefix {
+    max-width: 100%;
+    span, input {
+        max-width: 49%;
+    }
+}
+
 .form-grid {
     .simple-field {
         .border-box;
@@ -179,16 +187,13 @@ form {
         float: left;
     }
     .form-label {
-        line-height: 27px;
+        padding: 5px 0;
         font-weight: bold;
         min-height: 1px;
         width: 25%;
     }
     .form-col {
         width: 75%;
-        li {
-            line-height: 1;
-        }
         p,
         .errorlist {
             margin: 5px 0 0;
@@ -208,10 +213,14 @@ form {
         border-top: 1px solid @light-gray;
         padding-top: 15px;
     }
+    input[type=text],
+    textarea {
+        .width(4);
+    }
+    .html-support {
+        .max-width(4);
+    }
     input {
-        &[type=text] {
-            .width(4);
-        }
         + a {
             margin-left: 10px;
         }
@@ -230,6 +239,28 @@ form {
 
 }
 
+@media (max-width: @4col) {
+    .form-grid {
+        .form-label {
+            width: 30%;
+        }
+        .form-col {
+            width: 70%;
+        }
+    }
+}
+
+@media (max-width: @3col) {
+    .form-grid {
+        .form-label {
+            width: 40%;
+        }
+        .form-col {
+            width: 60%;
+        }
+    }
+}
+
 .form-footer {
     button {
         margin-right: 5px;

mkt/asset_bundles.py

@@ -30,8 +30,8 @@ CSS = {
         'css/devreg/l10n.less',
 
         # Forms (used for tables on "Manage ..." pages).
-        'css/devreg/devhub-forms.less',
         'css/common/forms.less',
+        'css/devreg/devhub-forms.less',
 
         # Landing page
         'css/devreg/landing.less',
@@ -69,9 +69,9 @@ CSS = {
         'css/mkt/reset.less',
         'css/mkt/typography.less',
         'css/mkt/site.less',
-        'css/mkt/forms.less',
         'css/common/invisible-upload.less',
         'css/common/forms.less',
+        'css/mkt/forms.less',
         'css/mkt/header.less',
         'css/mkt/breadcrumbs.less',
         'css/mkt/buttons.less',