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"

src/components/mobile_nav/mobile_nav.js

@@ -31,8 +31,8 @@ const MobileNav = {
     },
     hideSitename () { return this.$store.state.instance.hideSitename },
     sitename () { return this.$store.state.instance.name },
-    navBarStyle () {
+    isChat () {
-      return { 'visibility': this.$route.name === 'chat' ? 'hidden' : 'visible' }
+      return this.$route.name === 'chat'
     }
   },
   methods: {

src/components/mobile_nav/mobile_nav.vue

@@ -3,7 +3,7 @@
     <nav
       id="nav"
       class="nav-bar container"
-      :style="navBarStyle"
+      :class="{ 'mobile-hidden': isChat }"
     >
       <div
         class="mobile-inner-nav"