Fix user page display on mobile

js/forum/src/components/UserCard.js

@@ -27,6 +27,7 @@ export default class UserCard extends Component {
     const user = this.props.user;
     const controls = UserControls.controls(user, this).toArray();
     const color = user.color();
+    const badges = user.badges().toArray();
 
     return (
       <div className={'UserCard ' + (this.props.className || '')}
@@ -53,9 +54,11 @@ export default class UserCard extends Component {
                   )}
               </h2>
 
-              <ul className="UserCard-badges badges">
+              {badges.length ? (
-                {listItems(user.badges().toArray())}
+                <ul className="UserCard-badges badges">
-              </ul>
+                  {listItems(badges)}
+                </ul>
+              ) : ''}
 
               <ul className="UserCard-info">
                 {listItems(this.infoItems().toArray())}

js/forum/src/components/UserPage.js

@@ -89,8 +89,7 @@ export default class UserPage extends Component {
    * Given a username, load the user's profile from the store, or make a request
    * if we don't have it yet. Then initialize the profile page with that user.
    *
-   * @param {[type]} username [description]
+   * @param {String} username
-   * @return {[type]}
    */
   loadUser(username) {
     const lowercaseUsername = username.toLowerCase();

less/forum/UserCard.less

@@ -47,6 +47,7 @@
   margin-left: -130px;
 
   @media @phone {
+    display: block;
     float: none;
     margin: 0 auto 20px;
     width: 64px + 8px;

less/forum/UserPage.less

@@ -1,4 +1,3 @@
-
 .UserPage {
   .UserCard-controls {
     float: right;