Chats: clean up menu icon

app/soapbox/features/chats/components/chat_message_list.js

@@ -248,6 +248,7 @@ class ChatMessageList extends ImmutablePureComponent {
           title={this.getFormattedTimestamp(chatMessage)}
           className='chat-message__bubble'
           ref={this.setBubbleRef}
+          tabIndex={0}
         >
           {this.maybeRenderMedia(chatMessage)}
           <span

app/styles/chats.scss

@@ -146,14 +146,23 @@
     max-width: 70%;
     border-radius: 10px;
     background-color: var(--background-color);
-    overflow: hidden;
     text-overflow: ellipsis;
     overflow-wrap: break-word;
     white-space: break-spaces;
+    position: relative;
 
     a {
       color: var(--brand-color--hicontrast);
     }
+
+    &:hover,
+    &:focus,
+    &:active, {
+      .chat-message__menu {
+        opacity: 1;
+        pointer-events: all;
+      }
+    }
   }
 
   &--me .chat-message__bubble {
@@ -164,6 +173,17 @@
   &--pending .chat-message__bubble {
     opacity: 0.5;
   }
+
+  &__menu {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    background: var(--background-color);
+    border-radius: 999px;
+    opacity: 0;
+    pointer-events: none;
+    transition: 0.2s;
+  }
 }
 
 .chat-list {