From c96c537a528cbfb0bfd4acfb675197849aa1ca90 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 22 Sep 2020 17:00:01 -0500
Subject: [PATCH] Chats: clean up menu icon

---
 .../chats/components/chat_message_list.js     |  1 +
 app/styles/chats.scss                         | 22 ++++++++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/features/chats/components/chat_message_list.js b/app/soapbox/features/chats/components/chat_message_list.js
index 1247c404f..af35f216d 100644
--- a/app/soapbox/features/chats/components/chat_message_list.js
+++ b/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
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 126c371a2..e6fc5d601 100644
--- a/app/styles/chats.scss
+++ b/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 {