Fix other user's displayName being wrapped on the bubble message layout (#8456)

Author: luixxiul

res/css/views/messages/_DisambiguatedProfile.scss

@@ -18,15 +18,18 @@ limitations under the License.
 .mx_DisambiguatedProfile {
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
 
     .mx_DisambiguatedProfile_displayName {
         font-weight: 600;
+        margin-inline-end: 0;
     }
 
     .mx_DisambiguatedProfile_mxid {
         font-weight: 600;
         font-size: 1.1rem;
-        margin-left: 5px;
+        margin-inline-start: 5px;
         opacity: 0.5; // Match mx_TextualEvent
         color: $primary-content;
     }

res/css/views/rooms/_EventBubbleTile.scss

@@ -117,6 +117,24 @@ limitations under the License.
         line-height: $font-18px;
     }
 
+    // other users profile on bubble layout
+    > .mx_DisambiguatedProfile {
+        white-space: normal; // display mxid
+
+        .mx_DisambiguatedProfile_displayName {
+            white-space: nowrap; // truncate long display names
+            margin-inline-end: 5px;
+
+            // For RTL displayName
+            unicode-bidi: embed;
+            direction: ltr;
+        }
+
+        .mx_DisambiguatedProfile_mxid {
+            margin-inline-start: 0; // Align mxid with truncated displayName inside mx_EventTile[data-layout=bubble]
+        }
+    }
+
     // inside mx_RoomView_MessageList, outside of mx_ReplyTile
     // (on the main panel and the chat panel with a maximized widget)
     > .mx_DisambiguatedProfile,

res/css/views/rooms/_EventTile.scss

@@ -138,14 +138,9 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
         color: $primary-content;
         font-size: $font-14px;
         display: inline-block;
-        /* anti-zalgo, with overflow hidden */
-        overflow: hidden;
         padding-bottom: 0px;
         padding-top: 0px;
         margin: 0px;
-        /* the next three lines, along with overflow hidden, truncate long display names */
-        white-space: nowrap;
-        text-overflow: ellipsis;
         max-width: calc(100% - $left-gutter);
     }
 
@@ -442,10 +437,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     // on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter
 }
 
-.mx_DisambiguatedProfile {
-    cursor: pointer;
-}
-
 .mx_EventTile_bubbleContainer {
     display: grid;
     grid-template-columns: 1fr 100px;

res/css/views/rooms/_ReplyTile.scss

@@ -111,10 +111,5 @@ limitations under the License.
         display: inline-block; // anti-zalgo, with overflow hidden
         padding: 0;
         margin: 0;
-
-        // truncate long display names
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
     }
 }