(css) Improve display of msg viewer/editor

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 -->

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)">

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;
 }