Improve the mxid overlap situation

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

res/css/views/rooms/_IRCLayout.scss

@@ -49,18 +49,6 @@ $irc-line-height: $font-18px;
             }
         }
 
-        > .mx_SenderProfile {
-            order: 2;
-            flex-shrink: 0;
-            width: var(--name-width);
-            text-overflow: ellipsis;
-            text-align: left;
-            display: flex;
-            align-items: center;
-            overflow: visible;
-            justify-content: flex-end;
-        }
-
         .mx_EventTile_line, .mx_EventTile_reply {
             padding: 0;
             display: flex;
@@ -173,27 +161,37 @@ $irc-line-height: $font-18px;
         border-left: 0;
     }
 
-    .mx_SenderProfile_hover {
+    .mx_SenderProfile {
-        background-color: $primary-bg-color;
+        width: var(--name-width);
-        overflow: hidden;
         display: flex;
+        order: 2;
+        flex-shrink: 0;
+        justify-content: flex-start;
+        align-items: center;
 
-        > .mx_SenderProfile_displayName, .mx_SenderProfile_mxid {
+        > .mx_SenderProfile_displayName {
+            width: 100%;
+            text-align: end;
             overflow: hidden;
             text-overflow: ellipsis;
-            min-width: var(--name-width);
+        }
-            text-align: end;
+
+        > .mx_SenderProfile_mxid {
+            visibility: collapse;
         }
     }
 
     .mx_SenderProfile:hover {
-        justify-content: flex-start;
+        overflow: visible;
+        z-index: 10;
+
+        > .mx_SenderProfile_displayName {
+            overflow: visible;
         }
 
-    .mx_SenderProfile_hover:hover {
+        > .mx_SenderProfile_mxid {
-        overflow: visible;
+            visibility: visible;
-        width: max(auto, 100%);
+        }
-        z-index: 10;
     }
 
     .mx_ReplyThread {
@@ -201,16 +199,7 @@ $irc-line-height: $font-18px;
         .mx_SenderProfile {
             width: unset;
             max-width: var(--name-width);
-        }
-
-        .mx_SenderProfile_hover {
             background: transparent;
-
-            > span {
-                > .mx_SenderProfile_displayName, .mx_SenderProfile_mxid {
-                    min-width: inherit;
-                }
-            }
         }
 
         .mx_EventTile_emote {

src/components/views/messages/SenderProfile.tsx

@@ -140,7 +140,7 @@ export default class SenderProfile extends React.Component<IProps, IState> {
         }
 
         return (
-            <div className="mx_SenderProfile mx_SenderProfile_hover" dir="auto" onClick={this.props.onClick}>
+            <div className="mx_SenderProfile" dir="auto" onClick={this.props.onClick}>
                 <span className={`mx_SenderProfile_displayName ${colorClass}`}>
                     { displayName }
                 </span>