3 files changed, 13 insertions, 14 deletions
diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js
index 4d737e42..be4a7c89 100644
--- a/src/components/chat_message/chat_message.js
+++ b/src/components/chat_message/chat_message.js
@@ -60,19 +60,6 @@ const ChatMessage = {
       currentUser: state => state.users.currentUser,
       restrictedNicknames: state => state.instance.restrictedNicknames
     }),
-    ellipsisButtonWrapperStyle () {
-      let res = {
-        'opacity': this.hovered || this.menuOpened ? '1' : '0'
-      }
-
-      if (this.isCurrentUser) {
-        res.right = '0.4rem'
-      } else {
-        res.left = '0.4rem'
-      }
-
-      return res
-    },
     popoverMarginStyle () {
       if (this.isCurrentUser) {
         return {}
diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss
index 9d7b7936..240beea4 100644
--- a/src/components/chat_message/chat_message.scss
+++ b/src/components/chat_message/chat_message.scss
@@ -117,6 +117,10 @@
         color: var(--chatMessageIncomingText, $fallback--text);
       }
     }
+
+    .chat-message-menu {
+      left: 0.4rem;
+    }
   }
 
   .outgoing {
@@ -139,6 +143,14 @@
     .chat-message-inner {
       align-items: flex-end;
     }
+
+    .chat-message-menu {
+      right: 0.4rem;
+    }
+  }
+
+  .visible {
+    opacity: 1;
   }
 }
 
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index 872ddf70..e923d694 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -39,7 +39,7 @@
           >
             <div
               class="chat-message-menu"
-              :style="ellipsisButtonWrapperStyle"
+              :class="{ 'visible': hovered || menuOpened }"
             >
               <Popover
                 trigger="click"