From ccccdedf2eb8c3dadd0ccd87df462c8b91a70e4c Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Sun, 6 Mar 2022 15:19:37 +0200
Subject: [PATCH] reply long messages close button visibility fixed

---
 src/assets/css/chat.scss | 8 ++++++++
 src/components/Chat.vue  | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 7dacf06..6ea6685 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -163,6 +163,14 @@ $admin-fg: white;
 
         &.reply-to {
             padding: 0;
+
+            .reply-text {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 4;
+                -webkit-box-orient: vertical;
+            }
         }
         .iput-area-inner-box {
             box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index 521f296..dbab24f 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -148,7 +148,7 @@
             </div>
             <div class="col">
               <div class="font-weight-medium">{{ $t("message.replying_to", { user: replyToEvent.sender.name }) }}</div>
-              <div v-if="replyToContentType === 'm.text'"> {{ replyToEvent.getContent().body }} </div>
+              <div v-if="replyToContentType === 'm.text'" class="reply-text" :title="replyToEvent.getContent().body"> {{ replyToEvent.getContent().body }} </div>
               <div v-if="replyToContentType === 'm.image'"> {{ $t("message.reply_image") }} </div>
               <div v-if="replyToContentType === 'm.audio'"> {{ $t("message.reply_audio_message") }} </div>
               <div v-if="replyToContentType === 'm.video'"> {{ $t("message.reply_video") }} </div>