Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

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

Merged
merged 10 commits into from
May 22, 2022
25 changes: 24 additions & 1 deletion res/css/views/messages/_DisambiguatedProfile.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,39 @@ 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;
}
}

.mx_EventTile[data-layout=bubble] {
luixxiul marked this conversation as resolved.
Show resolved Hide resolved
// 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]
}
}
}
9 changes: 0 additions & 9 deletions res/css/views/rooms/_EventTile.scss
Original file line number Diff line number Diff line change
Expand Up @@ -116,14 +116,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);
}

Expand Down Expand Up @@ -321,10 +316,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;
Expand Down
5 changes: 0 additions & 5 deletions res/css/views/rooms/_ReplyTile.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}