Merge pull request #2746 from matrix-org/bwindels/flairnolayout

Prevent flair pushing timeline downwards

res/css/views/rooms/_EventTile.scss

@@ -58,13 +58,17 @@ limitations under the License.
 .mx_EventTile .mx_SenderProfile .mx_Flair {
     opacity: 0.7;
     margin-left: 5px;
-}
+    display: inline-block;
+    vertical-align: top;
+    height: 16px;
+    overflow: hidden;
 
-.mx_EventTile .mx_SenderProfile .mx_Flair img {
+    img {
         vertical-align: -2px;
         margin-right: 2px;
         border-radius: 8px;
     }
+}
 
 .mx_EventTile .mx_MessageTimestamp {
     display: block;

src/components/views/elements/Flair.js

@@ -117,7 +117,7 @@ export default class Flair extends React.Component {
 
     render() {
         if (this.state.profiles.length === 0) {
-            return <div />;
+            return <span className="mx_Flair" />;
         }
         const avatars = this.state.profiles.map((profile, index) => {
             return <FlairAvatar key={index} groupProfile={profile} />;