Remove direct style manipulations in favor of classes

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 {}

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

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"