diff --git a/web/chat/chat-message-list.css b/web/chat/chat-message-list.css
index 36264273d..481019f07 100644
--- a/web/chat/chat-message-list.css
+++ b/web/chat/chat-message-list.css
@@ -1,488 +1,487 @@
 div.container {
   margin-left: 400px;
   height: 100%;
   background-color: white;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
 }
 div.activeContainer {
   border: 2px solid #5989D6;
   margin-left: 402px;
 }
 div.messageContainer {
   flex-grow: 1;
   flex: 1;
   overflow-y: auto;
   display: flex;
   flex-direction: column-reverse;
 }
 div.mirroredMessageContainer {
   flex-direction: column !important;
   transform: scaleY(-1);
 }
 div.mirroredMessageContainer > div {
   transform: scaleY(-1);
 }
 
 div.message {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
 }
 
 div.inputBar {
   display: flex;
   flex-direction: column;
   border-top: 2px solid #E4E4E4;
 }
 div.inputBarTextInput {
   display: flex;
   padding: 10px;
   align-items: center;
   flex-shrink: 0;
 }
 div.inputBarTextInput > textarea {
   flex-grow: 1;
   border: none;
   font-family: sans-serif;
   font-size: 15px;
   line-height: 15px;
   width: 100%;
   resize: none;
   padding-right: 20px;
   min-height: 17px;
 }
 div.inputBarTextInput > textarea:focus {
   outline: none;
 }
 a.send {
   display: flex;
   align-items: center;
   text-transform: uppercase;
   font-family: 'Open Sans', sans-serif;
   font-weight: 600;
   color: #555555;
   cursor: pointer;
 }
 svg.sendButton {
   padding: 0 4px;
   font-size: 24px;
   color: #88BB88;
 }
 div.joinButtonContainer > a {
   margin: 3px 12px;
   padding: 3px 0 5px 0;
   display: flex;
   background-color: #44CC99;
   border-radius: 5px;
   justify-content: center;
   cursor: pointer;
 }
 span.joinButtonText {
   font-size: 18px;
   color: white;
   text-align: center;
 }
 span.explanation {
   color: #777777;
   text-align: center;
   padding-top: 4px;
   padding-bottom: 8px;
 }
 
 div.loading {
   text-align: center;
   padding: 12px;
 }
 
 div.conversationHeader {
   text-transform: uppercase;
   color: #777777;
   font-size: 14px;
   padding: 7px 0;
   text-align: center;
 }
 div.conversationHeader:last-child {
   padding-top: 6px;
 }
 
 div.robotextContainer {
   text-align: center;
   color: #333333;
   padding: 6px 0;
   margin: 0 40px 5px 40px;
   font-size: 15px;
 }
 div.innerRobotextContainer {
   display: inline-flex;
   position: relative;
 }
 
 div.messageTimestampTooltip {
   position: absolute;
   margin-bottom: 8px;
   background-color: black;
   color: white;
   padding: 5px;
   border-radius: 5px;
   font-size: 14px;
   z-index: 1;
   pointer-events: none;
 }
 div.messageTimestampTooltip:after {
   content: "";
   position: absolute;
   width: 0;
   height: 0;
   border-width: 7px;
   border-style: solid;
 }
 div.messageTimestampLeftTooltip:after {
   top: 7px;
   right: -14px;
   border-color: transparent transparent transparent black;
 }
 div.messageTimestampRightTooltip:after {
   top: 7px;
   left: -14px;
   border-color: transparent black transparent transparent;
 }
 div.messageTimestampTopLeftTooltip:after {
   bottom: -14px;
   left: 4px;
   border-color: black transparent transparent transparent;
 }
 div.messageTimestampTopRightTooltip:after {
   bottom: -14px;
   right: 4px;
   border-color: black transparent transparent transparent;
 }
 div.messageTimestampBottomLeftTooltip:after {
   top: -14px;
   left: 4px;
   border-color: transparent transparent black transparent;
 }
 div.messageTimestampBottomRightTooltip:after {
   top: -14px;
   right: 4px;
   border-color: transparent transparent black transparent;
 }
 
 div.messageActionLinks {
   position: absolute;
   display: flex;
-  padding: 0 8px;
   top: 0;
   bottom: 0;
+  align-items: center;
+  color: gray;
+}
+div.messageBoxContainer:hover div.messageActionLinks,
+div.innerRobotextContainer:hover div.messageActionLinks {
+  padding: 0 8px;
 }
 div.viewerMessageActionLinks {
   right: 100%;
 }
 div.nonViewerMessageActionLinks {
   left: 100%;
 }
 div.messageActionLinks > div + div {
   margin-left: 8px;
 }
-div.messageTooltip {
-  position: relative;
-  color: gray;
+div.messageReplyTooltip {
   font-size: 14px;
 }
 div.messageSidebarTooltip {
-  color: gray;
   font-size: 16px;
 }
 
 div.messageTooltipIcon {
   position: relative;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
 }
 div.messageTooltipIcon:hover {
   cursor: pointer;
 }
 
 div.textMessage {
   padding: 6px 12px;
   white-space: pre-wrap;
   word-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 div.normalTextMessage {
   font-size: 16px;
   font-family: sans-serif;
 }
 div.emojiOnlyTextMessage {
   font-size: 32px;
   font-family: sans-serif;
 }
 span.authorName {
   color: #777777;
   font-size: 14px;
   padding: 4px 24px;
 }
 div.darkTextMessage {
   color: white;
 }
 div.lightTextMessage {
   color: black;
 }
 div.darkTextMessage a {
   color: #129AFF;
   text-decoration: underline;
 }
 div.lightTextMessage a {
   color: #2A5DB0;
   text-decoration: underline;
 }
 
 div.content {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   margin-bottom: 5px;
   box-sizing: border-box;
   width: 100%;
 }
 div.nonViewerContent {
   align-self: flex-start;
   justify-content: flex-start;
   padding-right: 8px;
 }
 div.viewerContent {
   align-self: flex-end;
   justify-content: flex-end;
   padding-right: 4px;
 }
 div.iconContainer {
   margin-right: 1px;
 }
 div.iconContainer > svg {
   height: 16px;
 }
 
 div.messageBoxContainer {
   position: relative;
   display: flex;
   max-width: calc(min(68%, 1000px));
   margin: 0 4px 0 12px;
 }
 div.nonViewerMessageBoxContainer {
   justify-content: flex-start;
 }
 div.viewerMessageBoxContainer {
   justify-content: flex-end;
 }
 div.fixedWidthMessageBoxContainer {
   width: 68%;
 }
 
 div.messageBox {
   overflow: hidden;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   flex-shrink: 0;
   max-width: 100%;
 }
 div.fixedWidthMessageBox {
   width: 100%;
 }
 
 div.failedSend {
   text-transform: uppercase;
   display: flex;
   justify-content: flex-end;
   flex-shrink: 0;
   font-size: 14px;
   margin-right: 30px;
   padding-bottom: 6px;
 }
 span.deliveryFailed {
   padding: 0 3px;
   color: #555555;
 }
 a.retrySend {
   padding: 0 3px;
   color: #036AFF;
   cursor: pointer;
 }
 a.multimediaUpload {
   cursor: pointer;
   position: relative;
 }
 a.multimediaUpload > input[type="file"] {
   visibility: hidden;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: 0;
   padding: 0;
 }
 a.multimediaUpload > svg {
   padding: 0 6px;
   font-size: 20px;
   color: #8A8A8A;
   cursor: pointer;
 }
 
 div.previews {
   display: flex;
   overflow-x: auto;
   white-space: nowrap;
 }
 div.previews > span.multimedia {
   margin: 10px;
 }
 div.previews > span.multimedia > span.multimediaImage > img {
   max-height: 200px;
   max-width: 200px;
 }
 
 div.messageBox > div.imageGrid {
   display: grid;
   width: 100%;
   grid-template-columns: repeat(6, 1fr);
   grid-gap: 5px;
 }
 div.messageBox span.multimedia > span.multimediaImage {
   min-height: initial;
   min-width: initial;
 }
 div.messageBox span.multimedia > span.multimediaImage > img {
   max-height: 600px;
 }
 
 div.imageGrid > span.multimedia {
   grid-column-end: span 3;
 }
 div.imageGrid > span.multimedia:first-child {
   margin-top: 0;
 }
 div.imageGrid > span.multimedia > span.multimediaImage {
   flex: 1;
 }
 div.imageGrid > span.multimedia > span.multimediaImage:after {
   content: "";
   display: block;
   padding-bottom: calc(min(600px, 100%));
 }
 div.imageGrid > span.multimedia > span.multimediaImage > img {
   position: absolute;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
 div.imageGrid > span.multimedia:nth-last-child(n+3):first-child,
 div.imageGrid > span.multimedia:nth-last-child(n+3):first-child ~ * {
   grid-column-end: span 2;
 }
 div.imageGrid > span.multimedia:nth-last-child(n+4):first-child,
 div.imageGrid > span.multimedia:nth-last-child(n+4):first-child ~ * {
   grid-column-end: span 3;
 }
 div.imageGrid > span.multimedia:nth-last-child(n+5):first-child,
 div.imageGrid > span.multimedia:nth-last-child(n+5):first-child ~ * {
   grid-column-end: span 2;
 }
 
 div.inlineSidebarContent {
   flex-direction: row;
   display: flex;
   margin: 0 40px 0 20px;
   cursor: pointer;
 }
 div.inlineSidebar {
   flex-direction: row;
   display: flex;
   align-items: center;
 }
 div.inlineSidebarName {
   padding-Top: 1px;
   color: #666666;
   font-size: 16px;
   padding-left: 4px;
   padding-right: 2px;
 }
 div.unread {
   font-weight: bold;
 }
 div.centerContainer {
   justify-content: center;
 }
 div.sidebarMarginBottom {
   margin-bottom: 8px;
 }
 div.sidebarMarginTop {
   margin-top: 4px;
   margin-bottom: -8px;
 }
 svg.inlineSidebarIcon {
   color: #666666;
 }
 
 .menuSidebarContent {
   display: none;
   position: absolute;
   top: 100%;
   right: 0;
   z-index: 1;
   width: max-content;
   border-radius: 5px;
   margin-top: 2px;
   margin-right: -3px;
   overflow: visible;
   box-shadow: unset;
 }
 .menuSidebarContentVisible {
   display: block;
 }
 .menuSidebarContent ul {
   list-style: none;
 }
 .menuSidebarContent li:not(:last-child) {
   border-bottom: 1px solid #DDDDDD;
 }
 .menuSidebarContent:after {
   content: "";
   position: absolute;
   border-width: 7px;
   border-style: solid;
 }
 .menuSidebarContent button {
   border: none;
   cursor: pointer;
   padding: 5px;
   font-size: 14px;
   outline: none;
   border-radius: 5px;
   background-color: black;
   color: white;
   text-decoration: underline;
 }
 .menuSidebarContent button:hover {
   background-color: black;
   color: #129AFF;
 }
 .menuSidebarNonViewerContent {
   left: 0;
   margin-left: -3px;
 }
 .menuSidebarContent:before {
   height: 15px;
   width: 55px;
   content: "";
   position: absolute;
   top: -15px;
   right: 0;
 }
 .menuSidebarNonViewerContent:before {
   left: 0;
 }
diff --git a/web/chat/message-reply-tooltip.react.js b/web/chat/message-reply-tooltip.react.js
index 563ce14a6..29a59aca8 100644
--- a/web/chat/message-reply-tooltip.react.js
+++ b/web/chat/message-reply-tooltip.react.js
@@ -1,46 +1,46 @@
 // @flow
 
 import { faReply } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { createMessageReply } from 'lib/shared/message-utils';
 
 import type { InputState } from '../input/input-state';
 import css from './chat-message-list.css';
 import type { OnMessagePositionInfo } from './message-position-types';
 
 type Props = {|
   +messagePositionInfo: OnMessagePositionInfo,
   +onReplyClick: () => void,
   +inputState: InputState,
 |};
 function MessageReplyTooltip(props: Props) {
   const { inputState, onReplyClick, messagePositionInfo } = props;
   const { addReply } = inputState;
 
   const { item } = messagePositionInfo;
   const replyClicked = React.useCallback(() => {
     invariant(item.messageInfo.text, 'text should be set in message clicked');
     addReply(createMessageReply(item.messageInfo.text));
     onReplyClick();
   }, [addReply, item, onReplyClick]);
 
   const { isViewer } = item.messageInfo.creator;
   const replyTooltipClassName = classNames({
-    [css.messageTooltip]: true,
+    [css.messageReplyTooltip]: true,
     [css.tooltipRightPadding]: isViewer,
     [css.tooltipLeftPadding]: !isViewer,
   });
   return (
     <div className={replyTooltipClassName}>
       <div className={css.messageTooltipIcon} onClick={replyClicked}>
         <FontAwesomeIcon icon={faReply} />
       </div>
     </div>
   );
 }
 
 export default MessageReplyTooltip;