Fix alignment of avatars and status messages

also introduce the status message to the MemberInfo pane

Part of https://github.com/vector-im/riot-web/issues/1528

res/css/views/rooms/_EntityTile.scss

@@ -111,4 +111,12 @@ limitations under the License.
     opacity: 0.25;
 }
 
+.mx_EntityTile_subtext {
+    font-size: 11px;
+    opacity: 0.5;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: clip;
+}
+
 

res/css/views/rooms/_MemberInfo.scss

@@ -110,3 +110,10 @@ limitations under the License.
     margin-left: 8px;
 }
 
+.mx_MemberInfo_statusMessage {
+    font-size: 11px;
+    opacity: 0.5;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: clip;
+}

res/css/views/rooms/_RoomTile.scss

@@ -41,7 +41,7 @@ limitations under the License.
 
 .mx_RoomTile_subtext {
     display: inline-block;
-    font-size: 0.8em;
+    font-size: 11px;
     padding: 0 0 0 7px;
     margin: 0;
     overflow: hidden;
@@ -62,10 +62,14 @@ limitations under the License.
     padding-left: 16px;
     padding-right: 6px;
     width: 24px;
-    height: 24px;
     vertical-align: middle;
 }
 
+.mx_RoomTile_hasSubtext .mx_RoomTile_avatar {
+    padding-top: 0;
+    vertical-align: super;
+}
+
 .mx_RoomTile_dm {
     display: block;
     position: absolute;
@@ -89,10 +93,6 @@ limitations under the License.
     text-overflow: ellipsis;
 }
 
-.mx_RoomTile_hasSubtext .mx_RoomTile_avatar {
-    padding-top: 0;
-}
-
 .mx_RoomTile_invite {
 /*    color: rgba(69, 69, 69, 0.5); */
 }