PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Use -webkit-line-clamp for the room header topic overflow (#8367)

Browse source
This commit is contained in:
Suguru Hirahara 2022-04-20 07:41:27 +00:00 committed by GitHub
parent 70cdd57a5c
commit 2fcf787578
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
res/css/views/rooms/_RoomHeader.scss
View file

@ -141,17 +141,24 @@ limitations under the License.
} }
.mx_RoomHeader_topic { .mx_RoomHeader_topic {
$lineHeight: $font-16px;
$lines: 2;
flex: 1; flex: 1;
color: $roomtopic-color; color: $roomtopic-color;
font-weight: 400; font-weight: 400;
font-size: $font-13px; font-size: $font-13px;
line-height: $lineHeight;
max-height: calc($lineHeight * $lines);
border-bottom: 1px solid transparent;
// to align baseline of topic with room name // to align baseline of topic with room name
margin: 4px 7px 0; margin: 4px 7px 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; -webkit-line-clamp: $lines; // See: https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
border-bottom: 1px solid transparent; -webkit-box-orient: vertical;
line-height: 1.2em; display: -webkit-box;
max-height: 2.4em;
} }
.mx_RoomHeader_avatar { .mx_RoomHeader_avatar {