From 2fcf7875788310168a0151db75b110c18d0448fa Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Wed, 20 Apr 2022 07:41:27 +0000
Subject: [PATCH] Use -webkit-line-clamp for the room header topic overflow
 (#8367)

---
 res/css/views/rooms/_RoomHeader.scss | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss
index 3eabf5e57a..7d25ade6ba 100644
--- a/res/css/views/rooms/_RoomHeader.scss
+++ b/res/css/views/rooms/_RoomHeader.scss
@@ -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 {