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

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

Merged
merged 4 commits into from
Apr 20, 2022
Merged

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

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1ee7bff
Use line-clamp for block-axis overflow
luixxiul Apr 19, 2022
c0a3b07
Merge branch 'develop' into line-clamp
luixxiul Apr 19, 2022
6322a4e
Use $font variable, camel case, and remove line-clamp
luixxiul Apr 20, 2022
6b24cad
Remove "legacy compatibility" comment
luixxiul Apr 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 11 additions & 4 deletions res/css/views/rooms/_RoomHeader.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,17 +141,24 @@ limitations under the License.
}

.mx_RoomHeader_topic {
$lineHeight: $font-16px;
$lines: 2;

flex: 1;
color: $roomtopic-color;
font-weight: 400;
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
margin: 4px 7px 0;

overflow: hidden;
text-overflow: ellipsis;
border-bottom: 1px solid transparent;
line-height: 1.2em;
max-height: 2.4em;
-webkit-line-clamp: $lines; // See: https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
-webkit-box-orient: vertical;
display: -webkit-box;
}

.mx_RoomHeader_avatar {
Expand Down