diff --git a/web/chat/chat-message-list.css b/web/chat/chat-message-list.css
--- a/web/chat/chat-message-list.css
+++ b/web/chat/chat-message-list.css
@@ -101,24 +101,6 @@
   margin-left: 4px;
 }
 
-div.messageActionContainer {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding: 0 6px;
-  background-color: var(--message-action-tooltip-bg);
-  border-radius: 8px;
-}
-
-div.messageActionContainer svg {
-  padding: 10px 6px 6px;
-  color: var(--fg);
-}
-div.messageActionContainer svg:hover {
-  cursor: pointer;
-}
-
 div.messageActionLinkIcon:hover {
   cursor: pointer;
 }
diff --git a/web/chat/composed-message.react.js b/web/chat/composed-message.react.js
--- a/web/chat/composed-message.react.js
+++ b/web/chat/composed-message.react.js
@@ -150,11 +150,7 @@
       });
 
       messageActionLinks = (
-        <div className={actionLinksClassName}>
-          <div className={css.messageActionContainer}>
-            {messageActionButtons}
-          </div>
-        </div>
+        <div className={actionLinksClassName}>{messageActionButtons}</div>
       );
     }
 
diff --git a/web/chat/message-action-buttons.css b/web/chat/message-action-buttons.css
--- a/web/chat/message-action-buttons.css
+++ b/web/chat/message-action-buttons.css
@@ -1,11 +1,23 @@
+div.messageActionContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 0 6px;
+  background-color: var(--message-action-tooltip-bg);
+  border-radius: 8px;
+}
+
 div.messageActionButtons {
   display: flex;
   font-size: 16px;
 }
 div.messageActionButtons svg {
+  padding: 10px 6px 6px;
   color: var(--color-disabled);
 }
 div.messageActionButtons svg:hover {
+  cursor: pointer;
   color: var(--fg);
 }
 div.messageActionButtonsViewer {
diff --git a/web/chat/message-action-buttons.js b/web/chat/message-action-buttons.js
--- a/web/chat/message-action-buttons.js
+++ b/web/chat/message-action-buttons.js
@@ -189,13 +189,14 @@
   }
 
   const { isViewer } = messageInfo.creator;
-  const messageActionButtonsContainer = classNames({
+  const messageActionButtonsContainerClassName = classNames({
+    [css.messageActionContainer]: true,
     [css.messageActionButtons]: true,
     [css.messageActionButtonsViewer]: isViewer,
     [css.messageActionButtonsNonViewer]: !isViewer,
   });
   return (
-    <div className={messageActionButtonsContainer}>
+    <div className={messageActionButtonsContainerClassName}>
       {sidebarButton}
       {replyButton}
     </div>
diff --git a/web/chat/robotext-message.react.js b/web/chat/robotext-message.react.js
--- a/web/chat/robotext-message.react.js
+++ b/web/chat/robotext-message.react.js
@@ -84,7 +84,9 @@
             css.nonViewerMessageActionLinks,
           )}
         >
-          {messageActionTooltip}
+          <div className={css.messageActionContainer}>
+            {messageActionTooltip}
+          </div>
         </div>
       );
     }