diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index c4a04bc1a29..aab55b106ab 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -29,9 +29,9 @@ the main body of the message as well as a quote.
:id="`message_${id}`"
ref="message"
class="message"
- :class="{'hover': showActions && !isSystemMessage, 'system' : isSystemMessage}"
- @mouseover="showActions=true"
- @mouseleave="showActions=false">
+ :class="{'hover': showActions && !isSystemMessage && !isDeletedMessage, 'system' : isSystemMessage}"
+ @mouseover="handleMouseover"
+ @mouseleave="handleMouseleave">
+
= this.id
- && this.showSentIcon
+ && this.showSentIcon && !this.isDeletedMessage
},
showSentIcon() {
@@ -368,6 +368,7 @@ export default {
&& !this.isDeleting
&& this.actorType === this.participant.actorType
&& this.actorId === this.participant.actorId
+ && !this.isDeletedMessage
},
messagesList() {
@@ -594,6 +595,14 @@ export default {
this.isDeleting = false
},
+
+ handleMouseover() {
+ this.showActions = true
+ },
+
+ handleMouseleave() {
+ this.showActions = false
+ },
},
}
@@ -636,10 +645,10 @@ export default {
}
&.deleted-message {
- background-color: var(--color-background-dark);
color: var(--color-text-lighter);
- padding: var(--border-radius) var(--border-radius-large);
+ display: flex;
border-radius: var(--border-radius-large);
+ align-items: center;
}
::v-deep .rich-text--wrapper {