From 65da3356439f9d7f0b3ab63a34d4a6c52b448eac Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Tue, 31 Jul 2018 14:10:40 +0300
Subject: [PATCH] Fix layout for user names in chat panel

---
 apps/common/main/lib/view/Chat.js         |  3 +--
 apps/common/main/resources/less/chat.less | 13 ++++++-------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/apps/common/main/lib/view/Chat.js b/apps/common/main/lib/view/Chat.js
index 2ad7b383b..af9f423cb 100644
--- a/apps/common/main/lib/view/Chat.js
+++ b/apps/common/main/lib/view/Chat.js
@@ -60,8 +60,7 @@ define([
         storeMessages: undefined,
 
         tplUser: ['<li id="<%= user.get("iid") %>"<% if (!user.get("online")) { %> class="offline"<% } %>>',
-                        '<div class="name"><%= scope.getUserName(user.get("username")) %>',
-                            '<div class="color" style="background-color: <%= user.get("color") %>;" ></div>',
+                        '<div class="name"><div class="color" style="background-color: <%= user.get("color") %>;" ></div><%= scope.getUserName(user.get("username")) %>',
                         '</div>',
                     '</li>'].join(''),
 
diff --git a/apps/common/main/resources/less/chat.less b/apps/common/main/resources/less/chat.less
index a1df8b984..9746a0e72 100644
--- a/apps/common/main/resources/less/chat.less
+++ b/apps/common/main/resources/less/chat.less
@@ -52,10 +52,9 @@
         }
 
         .color {
-            position: absolute;
-            top: 0;
-            left: 0;
-            margin-top: 1px;
+            display: inline-block;
+            vertical-align: middle;
+            margin: 0 5px 3px 0;
             width: 12px;
             height: 12px;
             border: 1px solid @gray-dark;
@@ -65,12 +64,12 @@
             font-size: 12px;
             font-weight: bold;
             display: block;
-            position: relative;
-            padding: 0 10px 0 16px;
-            margin-top: -2px;
+            padding: 0 10px 0 0;
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
+            line-height: normal;
+            height: 16px;
         }
     }