Improvements of user names display

In #users, their height may vary depending on the available
space and number of users.
In #messages and #users, they disappear when the profile
is visible so that the button area looks less clutered.

src/main-js/miaou.usr.js

@@ -70,7 +70,8 @@ miaou(function(usr, ed, locals, mod, time, ws){
 			if (enterTime <= $u.data('time')) return $u;
 			$u.detach();
 		} else {
-			$u = $('<span class=user/>').text(user.name).data('user',user);
+			$u = $('<div>').addClass('user').data('user', user);
+			$('<span>').text(user.name).appendTo($u);
 			$('<div>').addClass('decorations').appendTo($u);
 		}
 		$u.data('time', enterTime);

src/main-scss/chat.scss

@@ -94,23 +94,30 @@ section {
 }
 #users {
 	padding-top: 2px;
-	.user {
+	height: 95%;
+	@include flexbox(column);
+	.user, .user.profiled {
 		position: relative;
+		@include flex(1 0 18px);
+		max-height: 30px;
 		cursor: pointer;
+		@include flexbox(row, center);
 		padding: 1px 5px;
-		display: block;
 		text-overflow: ellipsis;
 		overflow: hidden;
-		line-height: 18px;
 		font-style: italic;
-		color: $user-text-color-in-user-list;
 		font-size: 95%;
+		span {
+			color: $user-text-color-in-user-list;		
+		}
 		&:hover {
 			background: $profile-bg;
 		}
 		&.connected {
-			font-style: normal;
-			color: $connected-user-text-color-in-user-list;
+			span {
+				font-style: normal;
+				color: $connected-user-text-color-in-user-list;
+			}
 			box-shadow: $connected-user-bg-color-in-user-list 200px 0 0 0 inset;
 			transition: box-shadow 3s;
 		}
@@ -419,6 +426,7 @@ body.mobile #message-scroller {
 	position: absolute;
 	top: 0;
 	right: 0;
+	height: 100%;
 }
 
 .rendered {

src/main-scss/mobile-chat.scss

@@ -4,7 +4,8 @@
 body.mobile {
 	font-size: 12px;
 	#users .user {
-		line-height: 30px;
+		@include flex(1 0 24px);
+		max-height: 36px;
 	}
 	.message .user {
 		width: 75px;

src/main-scss/profile.scss

@@ -102,6 +102,13 @@ div.externalProfile {
 	}
 }
 
+.user.profiled {
+	span, .avatar {
+		opacity: 0;
+		transition: opacity .3s;
+	}
+}
+
 #userinfo {
 	th {
 		font-weight: normal;