Simplify SenderProfile DOM structure

res/css/views/rooms/_IRCLayout.scss

@@ -177,16 +177,13 @@ $irc-line-height: $font-18px;
     .mx_SenderProfile_hover {
         background-color: $primary-bg-color;
         overflow: hidden;
+        display: flex;
 
-        > span {
+        > .mx_SenderProfile_name {
-            display: flex;
+            overflow: hidden;
-
+            text-overflow: ellipsis;
-            > .mx_SenderProfile_name {
+            min-width: var(--name-width);
-                overflow: hidden;
+            text-align: end;
-                text-overflow: ellipsis;
-                min-width: var(--name-width);
-                text-align: end;
-            }
         }
     }
 

src/components/views/messages/SenderProfile.js

@@ -110,19 +110,12 @@ export default class SenderProfile extends React.Component {
 
         const nameElem = name || '';
 
-        // Name + flair
-        const nameFlair = <span>
-            <span className={`mx_SenderProfile_name ${colorClass}`}>
-                { nameElem }
-            </span>
-            { flair }
-        </span>;
-
         return (
-            <div className="mx_SenderProfile" dir="auto" onClick={this.props.onClick}>
+            <div className="mx_SenderProfile mx_SenderProfile_hover" dir="auto" onClick={this.props.onClick}>
-                <div className="mx_SenderProfile_hover">
+                <span className={`mx_SenderProfile_name ${colorClass}`}>
-                    { nameFlair }
+                    { nameElem }
-                </div>
+                </span>
+                { flair }
             </div>
         );
     }