From 58bbbf31b9a6b94beccd6d2756d80ceaba8ab042 Mon Sep 17 00:00:00 2001 From: Michel Zimmer Date: Fri, 2 Oct 2020 18:00:58 +0200 Subject: [PATCH] Fix room directory clipping links in the room's topic Signed-off-by: Michel Zimmer --- res/css/structures/_RoomDirectory.scss | 4 ++++ src/components/structures/RoomDirectory.js | 5 ++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss index e0814182f5..29e6fecd34 100644 --- a/res/css/structures/_RoomDirectory.scss +++ b/res/css/structures/_RoomDirectory.scss @@ -133,6 +133,10 @@ limitations under the License. .mx_RoomDirectory_topic { cursor: initial; color: $light-fg-color; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + overflow: hidden; } .mx_RoomDirectory_alias { diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index 55c6527f06..df580e8de0 100644 --- a/src/components/structures/RoomDirectory.js +++ b/src/components/structures/RoomDirectory.js @@ -35,7 +35,7 @@ import GroupStore from "../../stores/GroupStore"; import FlairStore from "../../stores/FlairStore"; const MAX_NAME_LENGTH = 80; -const MAX_TOPIC_LENGTH = 160; +const MAX_TOPIC_LENGTH = 800; function track(action) { Analytics.trackEvent('RoomDirectory', action); @@ -497,6 +497,9 @@ export default class RoomDirectory extends React.Component { } let topic = room.topic || ''; + // Additional truncation based on line numbers is done via CSS, + // but to ensure that the DOM is not polluted with a huge string + // we give it a hard limit before rendering. if (topic.length > MAX_TOPIC_LENGTH) { topic = `${topic.substring(0, MAX_TOPIC_LENGTH)}...`; }