Improvided chat list.

src/styles/components/_chat.scss

@@ -86,15 +86,17 @@
     border-right: none;
     border-left: none;
     border-radius: 0;
-    padding-right: 30px;
+    padding-right: 70px;
     position: relative;
+    min-height: 51px;
+    line-height: 26px;
     &.newmessage {
       animation: newmessage 1s ease -0.3s infinite;
     }
     &.disabled {
       color: $chat-disabled;
     }
-    &:hover .item-btn {
+    &:hover button {
       display: inline;
     }
     .fa-lg {
@@ -105,13 +107,14 @@
     .badge {
       background: $chat-badge;
       border: 1px solid white;
-      font-size: .8em;
+      position: absolute;
+      right: 50px;
+      top: 14px;
     }
-    .item-btn {
+    button {
-      cursor: pointer;
       display: none;
       position: absolute;
-      right: 12px;
+      right: 10px;
     }
   }
 }

static/partials/chat.html

@@ -10,7 +10,7 @@
 						<i class="fa fa-users fa-lg"></i> {{_("Room chat")}} {{roomid}}
 					</a>
 					<a ng-repeat="room in getVisibleRooms()" ng-click="activateRoom(room.id, true)" class="list-group-item" ng-class="{newmessage: room.pending, disabled: !room.enabled}">
-				  	<span class="badge" ng-show="room.pending">{{room.pending}}</span><i class="fa fa-user fa-lg"></i> {{room.id|displayName}} <span ng-click="hideRoom(room.id)" class="item-btn fa fa-trash-o"></span>
+						<span class="badge" ng-show="room.pending">{{room.pending}}</span><i class="fa fa-user fa-lg"></i> {{room.id|displayName}} <button class="btn btn-sm btn-default" ng-click="hideRoom(room.id)"><i class="fa fa-trash-o"></i></button>
 					</a>
 				</div>
 			</div>