style fixes

www/contacts/app-contacts.less

@@ -65,6 +65,11 @@
             padding: 5px;
             margin: 10px;
             cursor: pointer;
+            .right-col {
+                margin-left: 5px;
+                display: flex;
+                flex-flow: column;
+            }
             &:hover {
                 background-color: rgba(0,0,0,0.3);
             }
@@ -74,9 +79,9 @@
         }
     }
 
-    #friendList .friend, #messaging .avatar {
+    #friendList .friend, #messaging .cp-avatar {
         .avatar_main(30px);
-        &.avatar {
+        &.cp-avatar {
             display: flex;
         }
         cursor: pointer;
@@ -173,7 +178,7 @@
             .remove-history {
                 .hover;
             }
-            .avatar {
+            .cp-avatar {
                 margin: 10px;
             }
             .more-history {

www/contacts/inner.js

@@ -81,10 +81,11 @@ define([
             metadataMgr: common.getMetadataMgr(),
         };
         APP.toolbar = Toolbar.create(configTb);
+        APP.toolbar.$rightside.hide();
 
         var messenger = Messenger.create(sFrameChan);
 
-        UI.create(messenger, $(friendList), $(messaging));
+        UI.create(messenger, $(friendList), $(messaging), common);
 
         Cryptpad.removeLoadingScreen();
 

www/contacts/messenger-ui.js

@@ -35,7 +35,7 @@ define([
         };
     };
 
-    UI.create = function (messenger, $userlist, $messages) {
+    UI.create = function (messenger, $userlist, $messages, common) {
         var state = window.state = {
             active: '',
         };
@@ -168,7 +168,7 @@ define([
                 });
             });
 
-            var avatar = h('div.avatar');
+            var avatar = h('div.cp-avatar');
             var header = h('div.header', [
                 avatar,
                 moreHistory,
@@ -190,11 +190,11 @@ define([
             if (data.avatar && avatars[data.avatar]) {
                 $avatar.append(avatars[data.avatar]).append(rightCol);
             } else {
-                Cryptpad.displayAvatar($avatar, data.avatar, data.displayName, function ($img) {
+                common.displayAvatar($avatar, data.avatar, data.displayName, function ($img) {
                     if (data.avatar && $img) {
                         avatars[data.avatar] = $img[0].outerHTML;
                     }
-                    $avatar.append(rightCol);
+                    $(rightCol).insertAfter($avatar);
                 });
             }
 
@@ -325,7 +325,7 @@ define([
 
         markup.friend = function (data) {
             var curvePublic = data.curvePublic;
-            var friend = h('div.friend.avatar', {
+            var friend = h('div.friend.cp-avatar', {
                 'data-key': curvePublic,
             });
 
@@ -365,7 +365,7 @@ define([
                 $friend.append(avatars[data.avatar]);
                 $friend.append(rightCol);
             } else {
-                Cryptpad.displayAvatar($friend, data.avatar, data.displayName, function ($img) {
+                common.displayAvatar($friend, data.avatar, data.displayName, function ($img) {
                     if (data.avatar && $img) {
                         avatars[data.avatar] = $img[0].outerHTML;
                     }