From 20adc2d821dc5767dd02f990d3db83c84375ce9b Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Mon, 18 Jan 2016 13:58:23 -0500
Subject: [PATCH] (css) Improve display of msg viewer/editor

---
 UI/Templates/MailerUI/UIxMailEditor.wox        |  4 ++--
 UI/Templates/MailerUI/UIxMailViewTemplate.wox  | 10 +++++-----
 UI/WebServerResources/scss/views/MailerUI.scss |  8 ++++++++
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/UI/Templates/MailerUI/UIxMailEditor.wox b/UI/Templates/MailerUI/UIxMailEditor.wox
index 5fd3ac2e8..44c776206 100644
--- a/UI/Templates/MailerUI/UIxMailEditor.wox
+++ b/UI/Templates/MailerUI/UIxMailEditor.wox
@@ -19,7 +19,7 @@
                          size="32"><!-- avatar --></sg-avatar-image>
         <md-input-container flex="flex">
           <label><var:string label:value="From"/></label>
-          <md-select name="from"
+          <md-select class="sg-no-wrap" name="from"
                      ng-model="editor.message.editable.from">
             <md-option ng-value="identity" ng-repeat="identity in editor.identities">{{identity}}</md-option>
           </md-select>
@@ -219,7 +219,7 @@
       </div>
     </md-dialog-content>
 
-    <!-- TOOLBAR BUTTONS -->
+    <!-- ATTACHMENTS -->
     <md-dialog-actions>
       <div layout="row" layout-align="space-between center" layout-fill="layout-fill">
           <!-- Attachments -->
diff --git a/UI/Templates/MailerUI/UIxMailViewTemplate.wox b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
index ddd42bdfb..253e0f2dd 100644
--- a/UI/Templates/MailerUI/UIxMailViewTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
@@ -95,8 +95,7 @@
             <h5>{{viewer.message.subject}}</h5>
             <time class="msg-date" datetime="viewer.message.date" ng-bind="viewer.message.date"><!-- date --></time>
           </div>
-          <div class="sg-padded">
-
+          <div>
             <div layout="row" layout-wrap="layout-wrap">
               <div class="pseudo-input-container--compact" flex="50" flex-xs="100">
                 <div layout="row" layout-align="start center">
@@ -113,7 +112,7 @@
                   </div>
                 </div>
               </div>
-              <div layout="column" flex="50">
+              <div class="msg-recipients" layout="column" flex="50">
                 <div class="pseudo-input-container--compact">
                   <label class="pseudo-input-label">
                     <var:string label:value="To"/>
@@ -141,8 +140,9 @@
                 </div>
               </div>
             </div>
-            <md-chips class="sg-readonly hide-xs"
-                      ng-show="viewer.showFlags"
+          </div>
+          <div class="sg-padded hide-xs" ng-show="viewer.showFlags">
+            <md-chips class="sg-readonly"
                       ng-model="viewer.message.flags"
                       md-transform-chip="$chip.name"
                       md-on-remove="viewer.message.removeTag($chip)">
diff --git a/UI/WebServerResources/scss/views/MailerUI.scss b/UI/WebServerResources/scss/views/MailerUI.scss
index 37c2eb86f..e5a3d9f45 100644
--- a/UI/WebServerResources/scss/views/MailerUI.scss
+++ b/UI/WebServerResources/scss/views/MailerUI.scss
@@ -44,6 +44,14 @@
   }
 }
 
+.msg-recipients {
+  margin-bottom: $mg;
+  @include to(xs) {
+    padding-left: $mg;
+    padding-right: $mg;
+  }
+}
+
 .msg-body {
   padding-top: $mg;
 }