Merge branch '270-improve-replying-to-long-messages' into 'dev'

reply long messages close button visibility fixed

Closes #270

See merge request keanuapp/keanuapp-weblite!58

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);

src/components/Chat.vue

@@ -137,7 +137,7 @@
           <div v-if="replyToEvent" class="row">
             <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>