From d3623217068ca9d2bc8cb170ac1f9f8329b9de3a Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Thu, 20 May 2021 15:25:20 +0100
Subject: [PATCH] Simplify SenderProfile DOM structure

---
 res/css/views/rooms/_IRCLayout.scss            | 15 ++++++---------
 src/components/views/messages/SenderProfile.js | 17 +++++------------
 2 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index b6b901757c..48505fbb53 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/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 {
-            display: flex;
-
-            > .mx_SenderProfile_name {
-                overflow: hidden;
-                text-overflow: ellipsis;
-                min-width: var(--name-width);
-                text-align: end;
-            }
+        > .mx_SenderProfile_name {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            min-width: var(--name-width);
+            text-align: end;
         }
     }
 
diff --git a/src/components/views/messages/SenderProfile.js b/src/components/views/messages/SenderProfile.js
index bd10526799..f1855de99e 100644
--- a/src/components/views/messages/SenderProfile.js
+++ b/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_hover">
-                    { nameFlair }
-                </div>
+            <div className="mx_SenderProfile mx_SenderProfile_hover" dir="auto" onClick={this.props.onClick}>
+                <span className={`mx_SenderProfile_name ${colorClass}`}>
+                    { nameElem }
+                </span>
+                { flair }
             </div>
         );
     }