UX: improve styling of messages and mobile view of messages

app/assets/javascripts/discourse/controllers/user-private-messages.js.es6

@@ -10,7 +10,15 @@ export default Ember.Controller.extend({
 
   selected: Em.computed.alias('controllers.user-topics-list.selected'),
   bulkSelectEnabled: Em.computed.alias('controllers.user-topics-list.bulkSelectEnabled'),
-  showNewPM: Em.computed.alias('controllers.user-topics-list.showNewPM'),
+
+  mobileView: function() {
+    return Discourse.Mobile.mobileView;
+  }.property(),
+
+  showNewPM: function(){
+    return this.get('controllers.user.viewingSelf') &&
+           Discourse.User.currentProp('can_send_private_messages');
+  }.property('controllers.user.viewingSelf'),
 
   @computed('selected.@each', 'bulkSelectEnabled')
   hasSelection(selected, bulkSelectEnabled){

app/assets/javascripts/discourse/controllers/user-topics-list.js.es6

@@ -14,9 +14,4 @@ export default Ember.Controller.extend({
     }
   },
 
-  showNewPM: function(){
-    return this.get('controllers.user.viewingSelf') &&
-           Discourse.User.currentProp('can_send_private_messages');
-  }.property('controllers.user.viewingSelf')
-
 });

app/assets/javascripts/discourse/templates/user/messages.hbs

@@ -1,7 +1,9 @@
 <section class='user-navigation'>
+  {{#unless mobileView}}
   {{#if showNewPM}}
   {{d-button class="btn-primary new-private-message" action="composePrivateMessage" icon="envelope" label="user.new_private_message"}}
   {{/if}}
+  {{/unless}}
   <ul class='action-list nav-stacked'>
     <li class="noGlyph">
       {{#link-to 'userPrivateMessages.index' model}}
@@ -26,7 +28,7 @@
         {{capitalize group.name}}
       {{/link-to}}
     </li>
-    <li>
+    <li class='archive'>
       {{#link-to 'userPrivateMessages.groupArchive' group.name}}
         {{i18n 'user.messages.archive'}}
       {{/link-to}}
@@ -44,6 +46,12 @@
       <i class="fa fa-list"></i>
     </button>
 
+    {{#if mobileView}}
+    {{#if showNewPM}}
+    {{d-button class="btn-primary new-private-message" action="composePrivateMessage" icon="envelope" label="user.new_private_message"}}
+    {{/if}}
+    {{/if}}
+
     {{#if canArchive}}
     <button {{action "archive"}} class="btn btn-archive">
       {{i18n "user.messages.archive"}}

app/assets/stylesheets/desktop/user.scss

@@ -99,7 +99,7 @@
   display: table-cell;
   vertical-align: top;
   width: 170px;
-  padding-right: 50px;
+  padding-right: 30px;
 
   h3 {
     color: $primary;
@@ -694,6 +694,10 @@
   li > a.active:after {
     display: none;
   }
+
+  li.archive {
+    padding-left: 15px;
+  }
 }