Align second line of email addresses to the beginning of the first line

Fixes #514

3 files changed, 34 insertions, 9 deletions

diff --git a/web-ui/app/js/mail_view/ui/recipients/recipients.js b/web-ui/app/js/mail_view/ui/recipients/recipients.js
index 3d756bd5..2caa8d14 100644
--- a/web-ui/app/js/mail_view/ui/recipients/recipients.js
+++ b/web-ui/app/js/mail_view/ui/recipients/recipients.js
@@ -32,7 +32,8 @@ define(
 
     function recipients() {
       this.defaultAttrs({
-        navigationHandler: '.recipients-navigation-handler'
+        navigationHandler: '.recipients-navigation-handler',
+        recipientsList: '.recipients-list'
       });
 
       function getAddresses(recipients) {
@@ -85,7 +86,7 @@ define(
       };
 
       this.addRecipient = function(recipient) {
-        var newRecipient = Recipient.prototype.renderAndPrepend(this.$node, recipient);
+        var newRecipient = Recipient.prototype.renderAndPrepend(this.$node.find(this.attr.recipientsList), recipient);
         this.attr.recipients.push(newRecipient);
       };
 
diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index 0e1edf66..1f3e618e 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -176,13 +176,25 @@
     box-sizing: border-box;
     position: relative;
 
-    .recipients-label {
+    .compose-column-label {
       width: 5%;
+      display: inline-block;
+    }
+
+    .compose-column-recipients {
+      width: 95%;
+      display: inline-block;
+    }
+
+    .recipients-label {
+      width: 100%;
+      height: 100%;
     }
 
     .recipients-navigation-handler {
       z-index: -1;
       position: absolute;
+      top: -200px;
     }
 
     .twitter-typeahead {
diff --git a/web-ui/app/templates/compose/recipients.hbs b/web-ui/app/templates/compose/recipients.hbs
index effe48e2..6dbed714 100644
--- a/web-ui/app/templates/compose/recipients.hbs
+++ b/web-ui/app/templates/compose/recipients.hbs
@@ -1,19 +1,31 @@
 <div id="recipients-fields" style="display:none">
     <div id='recipients-to-area' class="recipients-area input-container columns large-12 no-padding">
         <input class="recipients-navigation-handler"/>
-        <label for="recipients-to-box" class="recipients-label column large-1">{{t 'TO'}}: </label>
-        <input id='recipients-to-box' class="recipients-input" type="text" tabindex="1"/>
+        <div class='compose-column-label'>
+          <label for="recipients-to-box" class="recipients-label column large-1">{{t 'TO'}}: </label>
+        </div>
+        <div class='recipients-list compose-column-recipients'>
+          <input id='recipients-to-box' class="recipients-input" type="text" tabindex="1"/>
+        </div>
     </div>
 
     <div id="recipients-cc-area" class="recipients-area input-container columns large-12 no-padding">
         <input class="recipients-navigation-handler"/>
-        <label for="recipients-cc-box" class="recipients-label column large-1">{{t 'CC'}}: </label>
-        <input id='recipients-cc-box' class="recipients-input" type="text" tabindex="2"/>
+        <div class='compose-column-label'>
+          <label for="recipients-cc-box" class="recipients-label column large-1">{{t 'CC'}}: </label>
+        </div>
+        <div class='recipients-list compose-column-recipients'>
+          <input id='recipients-cc-box' class="recipients-input" type="text" tabindex="2"/>
+        </div>
     </div>
 
     <div id="recipients-bcc-area" class="recipients-area input-container columns large-12 no-padding">
         <input class="recipients-navigation-handler"/>
-        <label for ="recipients-bcc-box" class="recipients-label column large-1">{{t 'BCC'}}: </label>
-        <input id='recipients-bcc-box' class="recipients-input" type="text" tabindex="3"/>
+        <div class='compose-column-label'>
+          <label for ="recipients-bcc-box" class="recipients-label column large-1">{{t 'BCC'}}: </label>
+        </div>
+        <div class='recipients-list compose-column-recipients'>
+          <input id='recipients-bcc-box' class="recipients-input" type="text" tabindex="3"/>
+        </div>
     </div>
 </div>