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,8 +1,13 @@
-div.messageActionButtonsContainer {
+div.messageActionButtons {
   display: flex;
-  flex-direction: row;
   font-size: 16px;
 }
+div.messageActionButtonsViewer {
+  flex-direction: row;
+}
+div.messageActionButtonsNonViewer {
+  flex-direction: row-reverse;
+}
 div.messageActionLinkIcon {
   margin: 0 3px;
   position: relative;
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
@@ -172,8 +172,14 @@
     );
   }
 
+  const { isViewer } = messageInfo.creator;
+  const messageActionButtonsContainer = classNames({
+    [css.messageActionButtons]: true,
+    [css.messageActionButtonsViewer]: isViewer,
+    [css.messageActionButtonsNonViewer]: !isViewer,
+  });
   return (
-    <div className={css.messageActionButtonsContainer}>
+    <div className={messageActionButtonsContainer}>
       {sidebarButton}
       {replyButton}
     </div>