imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix broken threads list timestamp layout (#9922)

Browse source 
* Add option to show full identifier as tooltip on sender profiles
* Show full user id as tooltip on threads list entries
* Fix broken threads list timestamp layout

Previously, thread list timestamps would overflow
into the unread messages bubble on the right.

This is fixed by resetting the width of the
timestamp and ensuring both the timestamp and the
display name can shrink if necessary.
Both now also use ellipses if necessary.
This commit is contained in:
Janne Mareike Koschinski 2023-01-18 15:56:43 +01:00 • committed by GitHub
parent 6d354e3e10
commit 4d2b27a96d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 40 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

11
res/css/views/rooms/_EventTile.pcss
View file

@ -884,6 +884,7 @@ $left-gutter: 64px;
&::before {
inset: 0;
pointer-events: none; /* ensures the title for the sender name can be correctly displayed */
}
/* Display notification dot */
@ -927,8 +928,14 @@ $left-gutter: 64px;
inset: $padding auto auto $padding;
}
.mx_EventTile_details {
overflow: hidden;
}
.mx_DisambiguatedProfile {
display: inline-flex;
align-items: center;
flex: 1;
.mx_DisambiguatedProfile_displayName,
.mx_DisambiguatedProfile_mxid {
@ -979,7 +986,9 @@ $left-gutter: 64px;
.mx_MessageTimestamp {
font-size: $font-12px;
max-width: var(--MessageTimestamp-max-width);
width: unset; /* Cancel the default width */
overflow: hidden; /* ensure correct overflow behavior */
text-overflow: ellipsis;
position: initial;
margin-left: auto; /* to ensure it's end-aligned even if it's the only element of its parent */
}