Fix group messages style on mobile.

app/assets/javascripts/discourse/controllers/group-messages.js.es6

@@ -0,0 +1,3 @@
+export default Ember.Controller.extend({
+  application: Ember.inject.controller(),
+});

app/assets/javascripts/discourse/controllers/group.js.es6

@@ -31,7 +31,7 @@ export default Ember.Controller.extend({
 
     if (showMessages) {
       defaultTabs.push(Tab.create({
-        name: 'messages.inbox', i18nKey: 'messages'
+        name: 'messages', i18nKey: 'messages'
       }));
     }
 

app/assets/javascripts/discourse/routes/group-messages-index.js.es6

@@ -0,0 +1,5 @@
+export default Ember.Route.extend({
+  beforeModel: function() {
+    this.transitionTo("group.messages.inbox");
+  }
+});

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

@@ -1,22 +1,20 @@
-<div class="group-table">
-  <div class="wrapper">
-    {{#d-section class="user-navigation" pageClass="group-messages"}}
-      {{#mobile-nav class='messages-nav' desktopClass='nav-stacked action-list' currentPath=currentPath}}
-        <li>
-          {{#link-to 'group.messages.inbox' model.name}}
-            {{i18n 'user.messages.inbox'}}
-          {{/link-to}}
-        </li>
-        <li>
-          {{#link-to 'group.messages.archive' model.name}}
-            {{i18n 'user.messages.archive'}}
-          {{/link-to}}
-        </li>
-      {{/mobile-nav}}
-    {{/d-section}}
+<div class='group-activity container'>
+  {{#mobile-nav class='group-messages-nav' desktopClass='pull-left nav nav-stacked' currentPath=application.currentPath}}
+    <li>
+      {{#link-to 'group.messages.inbox' model.name}}
+        {{i18n 'user.messages.inbox'}}
+      {{/link-to}}
+    </li>
+    <li>
+      {{#link-to 'group.messages.archive' model.name}}
+        {{i18n 'user.messages.archive'}}
+      {{/link-to}}
+    </li>
+  {{/mobile-nav}}
 
-    <section class='messages'>
+  <div class="{{if site.mobileView "" "pull-left"}} group-messages-outlet">
+    <div class='user-main'>
       {{outlet}}
-    </section>
+    </div>
   </div>
 </div>

app/assets/stylesheets/desktop/group.scss

@@ -21,7 +21,7 @@
   margin-bottom: 20px;
 }
 
-.group-activity-nav {
+.group-activity-nav, .group-messages-nav {
   width: 15%;
   background-color: transparent;
 
@@ -44,12 +44,12 @@
   }
 }
 
-.group-activity-outlet {
+.group-activity-outlet, .group-messages-outlet {
   width: 85%;
 }
 
 .group-edit {
-  border: 1px solid $primary-low; 
+  border: 1px solid $primary-low;
   padding: 10px;
 
   .form-horizontal {

app/assets/stylesheets/desktop/user.scss

@@ -31,7 +31,7 @@
   margin-top: 18px;
 }
 
-.user-table, .group-table {
+.user-table {
   width: 100%;
   display: table;
   table-layout: fixed;

app/assets/stylesheets/mobile/group.scss

@@ -27,13 +27,15 @@
   position: relative;
 }
 
-.group-activity-nav.mobile-nav {
-  position: absolute;
-  right: 0;
-  top: -55px;
+.group-activity-nav, .group-messages-nav {
+  &.mobile-nav {
+    position: absolute;
+    right: 0;
+    top: -57px;
+  }
 }
 
-.group-activity-outlet {
+.group-activity-outlet, .group-messages-outlet {
   float: none;
 }