UX: Better handle width for fields in sign up form.

app/assets/javascripts/discourse/templates/modal/create-account.hbs

@@ -37,10 +37,10 @@
 
         {{#if fullnameRequired}}
           <tr class="input">
-            <td style="width:80px" class="label">
+            <td class="label">
               <label for='new-account-name'>{{i18n 'user.name.title'}}</label>
             </td>
-            <td style="width:496px">
+            <td>
               {{text-field value=accountName id="new-account-name"}}&nbsp;{{input-tip validation=nameValidation}}
             </td>
           </tr>

app/assets/stylesheets/common/base/login.scss

@@ -12,22 +12,36 @@
   display: none;
 }
 
+
+$label-width: 92px;
+$input-width: 220px;
+
 .create-account {
+  table {
+    td.label {
+      width: $label-width;
+    }
+
+    td input {
+      width: $input-width;
+    }
+  }
+
   .user-field.confirm {
     margin-top: 20px;
   }
 
   .user-field {
     label {
-      width: 92px;
+      width: $label-width;
       float: left;
     }
     input[type=text] {
-      width: 220px;
+      width: $input-width;
       margin-bottom: 0;
     }
     .controls {
-      margin-left: 92px;
+      margin-left: $label-width;
       margin-bottom: 15px;
       label {
         width: auto;

app/assets/stylesheets/mobile/login.scss

@@ -33,11 +33,16 @@ a#forgot-password-link {clear: left; float: left; }
 
 .btn-primary {margin-bottom: 10px; font-size: 15; float: left;}
 
+
+$label-width: 85px;
+$input-width: 184px;
+
 .create-account .modal-body {
   input[type=text], input[type=email], input[type=password] {
     display: inline-block;
     margin-bottom: 5px;
     margin-top: 10px;
+    width: $input-width;
   }
 
   tr.instructions {
@@ -48,7 +53,7 @@ a#forgot-password-link {clear: left; float: left; }
 
   tr.input {
     td.label {
-      padding-right: 5px;
+      width: $label-width;
     }
   }
 }
@@ -61,15 +66,15 @@ a#forgot-password-link {clear: left; float: left; }
   .user-field {
     margin-top: 10px;
     label {
-      width: 85px;
+      width: $label-width;
     }
 
     input[type=text] {
       margin-top: 0;
-      width: 184px;
+      width: $input-width;
     }
     .controls {
-      margin-left: 85px;
+      margin-left: $label-width;
     }
   }
 }