diff --git a/web/chat/chat-message-list.css b/web/chat/chat-message-list.css
index 4d2f74ac8..36264273d 100644
--- a/web/chat/chat-message-list.css
+++ b/web/chat/chat-message-list.css
@@ -1,493 +1,488 @@
 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.messageTooltip {
-  position: relative;
-  color: gray;
-  font-size: 14px;
-}
-div.messageSidebarTooltip {
+div.messageActionLinks {
   position: absolute;
-  left: 100%;
+  display: flex;
+  padding: 0 8px;
   top: 0;
   bottom: 0;
-  color: gray;
-  font-size: 16px;
 }
-div.viewerMessageSidebarTooltip {
-  left: unset;
+div.viewerMessageActionLinks {
   right: 100%;
 }
-div.tooltipLeftPadding {
-  padding-left: 8px;
+div.nonViewerMessageActionLinks {
+  left: 100%;
+}
+div.messageActionLinks > div + div {
+  margin-left: 8px;
 }
-div.tooltipRightPadding {
-  padding-right: 8px;
+div.messageTooltip {
+  position: relative;
+  color: gray;
+  font-size: 14px;
 }
-div.tooltipLeftRightPadding {
-  padding-left: 8px;
-  padding-right: 8px;
+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;
 }
-.menuSidebarCenterContent {
-  margin-right: 5px;
-}
 .menuSidebarContent:before {
   height: 15px;
   width: 55px;
   content: "";
   position: absolute;
   top: -15px;
   right: 0;
 }
 .menuSidebarNonViewerContent:before {
   left: 0;
 }
diff --git a/web/chat/composed-message.react.js b/web/chat/composed-message.react.js
index 6bc010020..58cf54eff 100644
--- a/web/chat/composed-message.react.js
+++ b/web/chat/composed-message.react.js
@@ -1,230 +1,244 @@
 // @flow
 
 import classNames from 'classnames';
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   Circle as CircleIcon,
   CheckCircle as CheckCircleIcon,
   XCircle as XCircleIcon,
 } from 'react-feather';
 
 import { type ChatMessageInfoItem } from 'lib/selectors/chat-selectors';
 import { useSidebarExistsOrCanBeCreated } from 'lib/shared/thread-utils';
 import { stringForUser } from 'lib/shared/user-utils';
 import { assertComposableMessageType } from 'lib/types/message-types';
 import { type ThreadInfo } from 'lib/types/thread-types';
 
 import { type InputState, InputStateContext } from '../input/input-state';
 import css from './chat-message-list.css';
 import FailedSend from './failed-send.react';
 import { InlineSidebar } from './inline-sidebar.react';
 import {
   type OnMessagePositionInfo,
   type MessagePositionInfo,
 } from './message-position-types';
 import MessageReplyTooltip from './message-reply-tooltip.react';
 import SidebarTooltip from './sidebar-tooltip.react';
 
 type BaseProps = {|
   +item: ChatMessageInfoItem,
   +threadInfo: ThreadInfo,
   +sendFailed: boolean,
   +setMouseOverMessagePosition: (
     messagePositionInfo: MessagePositionInfo,
   ) => void,
   +mouseOverMessagePosition?: ?OnMessagePositionInfo,
   +canReply: boolean,
   +children: React.Node,
   +fixedWidth?: boolean,
   +borderRadius: number,
 |};
 type BaseConfig = React.Config<BaseProps, typeof ComposedMessage.defaultProps>;
 type Props = {|
   ...BaseProps,
   // Redux state
   +sidebarExistsOrCanBeCreated: boolean,
   // withInputState
   +inputState: ?InputState,
 |};
 class ComposedMessage extends React.PureComponent<Props> {
   static defaultProps = {
     borderRadius: 8,
   };
 
   render() {
     assertComposableMessageType(this.props.item.messageInfo.type);
     const { borderRadius, item, threadInfo } = this.props;
     const { id, creator } = item.messageInfo;
     const threadColor = threadInfo.color;
 
     const { isViewer } = creator;
     const contentClassName = classNames({
       [css.content]: true,
       [css.viewerContent]: isViewer,
       [css.nonViewerContent]: !isViewer,
     });
     const messageBoxContainerClassName = classNames({
       [css.messageBoxContainer]: true,
       [css.viewerMessageBoxContainer]: isViewer,
       [css.nonViewerMessageBoxContainer]: !isViewer,
       [css.fixedWidthMessageBoxContainer]: this.props.fixedWidth,
     });
     const messageBoxClassName = classNames({
       [css.messageBox]: true,
       [css.fixedWidthMessageBox]: this.props.fixedWidth,
     });
     const messageBoxStyle = {
       borderTopRightRadius: isViewer && !item.startsCluster ? 0 : borderRadius,
       borderBottomRightRadius: isViewer && !item.endsCluster ? 0 : borderRadius,
       borderTopLeftRadius: !isViewer && !item.startsCluster ? 0 : borderRadius,
       borderBottomLeftRadius: !isViewer && !item.endsCluster ? 0 : borderRadius,
     };
 
     let authorName = null;
     if (!isViewer && item.startsCluster) {
       authorName = (
         <span className={css.authorName}>{stringForUser(creator)}</span>
       );
     }
 
     let deliveryIcon = null;
     let failedSendInfo = null;
     if (isViewer) {
       let deliveryIconSpan;
       let deliveryIconColor = threadColor;
       if (id !== null && id !== undefined) {
         deliveryIconSpan = <CheckCircleIcon />;
       } else if (this.props.sendFailed) {
         deliveryIconSpan = <XCircleIcon />;
         deliveryIconColor = 'FF0000';
         failedSendInfo = <FailedSend item={item} threadInfo={threadInfo} />;
       } else {
         deliveryIconSpan = <CircleIcon />;
       }
       deliveryIcon = (
         <div
           className={css.iconContainer}
           style={{ color: `#${deliveryIconColor}` }}
         >
           {deliveryIconSpan}
         </div>
       );
     }
 
-    let viewerReplyTooltip, nonViewerReplyTooltip;
+    let replyTooltip;
     if (
       this.props.mouseOverMessagePosition &&
       this.props.mouseOverMessagePosition.item.messageInfo.id === id &&
       this.props.canReply
     ) {
       const { inputState } = this.props;
       invariant(inputState, 'inputState should be set in ComposedMessage');
-      const replyTooltip = (
+      replyTooltip = (
         <MessageReplyTooltip
           messagePositionInfo={this.props.mouseOverMessagePosition}
           onReplyClick={this.onMouseLeave}
           inputState={inputState}
         />
       );
-      if (isViewer) {
-        viewerReplyTooltip = replyTooltip;
-      } else {
-        nonViewerReplyTooltip = replyTooltip;
-      }
     }
 
     const positioning = isViewer ? 'right' : 'left';
-    let viewerSidebarTooltip, nonViewerSidebarTooltip;
+    let sidebarTooltip;
     if (
       this.props.mouseOverMessagePosition &&
       this.props.mouseOverMessagePosition.item.messageInfo.id === id &&
       this.props.sidebarExistsOrCanBeCreated
     ) {
-      const sidebarTooltip = (
+      sidebarTooltip = (
         <SidebarTooltip
           threadInfo={threadInfo}
           item={item}
           onLeave={this.onMouseLeave}
           messagePosition={positioning}
         />
       );
+    }
 
-      if (isViewer) {
-        viewerSidebarTooltip = sidebarTooltip;
-      } else {
-        nonViewerSidebarTooltip = sidebarTooltip;
-      }
+    let viewerActionLinks, nonViewerActionLinks;
+    if (isViewer) {
+      viewerActionLinks = (
+        <div
+          className={classNames(
+            css.messageActionLinks,
+            css.viewerMessageActionLinks,
+          )}
+        >
+          {sidebarTooltip}
+          {replyTooltip}
+        </div>
+      );
+    } else {
+      nonViewerActionLinks = (
+        <div
+          className={classNames(
+            css.messageActionLinks,
+            css.nonViewerMessageActionLinks,
+          )}
+        >
+          {replyTooltip}
+          {sidebarTooltip}
+        </div>
+      );
     }
 
     let inlineSidebar = null;
     if (item.threadCreatedFromMessage) {
       inlineSidebar = (
         <div className={css.sidebarMarginBottom}>
           <InlineSidebar
             threadInfo={item.threadCreatedFromMessage}
             positioning={positioning}
           />
         </div>
       );
     }
 
     return (
       <React.Fragment>
         {authorName}
         <div className={contentClassName}>
           <div
             className={messageBoxContainerClassName}
             onMouseEnter={this.onMouseEnter}
             onMouseLeave={this.onMouseLeave}
           >
-            {viewerSidebarTooltip}
-            {viewerReplyTooltip}
+            {viewerActionLinks}
             <div className={messageBoxClassName} style={messageBoxStyle}>
               {this.props.children}
             </div>
-            {nonViewerReplyTooltip}
-            {nonViewerSidebarTooltip}
+            {nonViewerActionLinks}
           </div>
           {deliveryIcon}
         </div>
         {failedSendInfo}
         {inlineSidebar}
       </React.Fragment>
     );
   }
 
   onMouseEnter = (event: SyntheticEvent<HTMLDivElement>) => {
     const { item } = this.props;
     const rect = event.currentTarget.getBoundingClientRect();
     const { top, bottom, left, right, height, width } = rect;
     const messagePosition = { top, bottom, left, right, height, width };
     this.props.setMouseOverMessagePosition({
       type: 'on',
       item,
       messagePosition,
     });
   };
 
   onMouseLeave = () => {
     const { item } = this.props;
     this.props.setMouseOverMessagePosition({ type: 'off', item });
   };
 }
 
 export default React.memo<BaseConfig>(function ConnectedComposedMessage(
   props: BaseConfig,
 ) {
   const sidebarExistsOrCanBeCreated = useSidebarExistsOrCanBeCreated(
     props.threadInfo,
     props.item,
   );
   const inputState = React.useContext(InputStateContext);
   return (
     <ComposedMessage
       {...props}
       sidebarExistsOrCanBeCreated={sidebarExistsOrCanBeCreated}
       inputState={inputState}
     />
   );
 });
diff --git a/web/chat/message-reply-tooltip.react.js b/web/chat/message-reply-tooltip.react.js
index 589a046b2..563ce14a6 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(() => {
-    const { item } = messagePositionInfo;
     invariant(item.messageInfo.text, 'text should be set in message clicked');
     addReply(createMessageReply(item.messageInfo.text));
     onReplyClick();
-  }, [addReply, messagePositionInfo, onReplyClick]);
+  }, [addReply, item, onReplyClick]);
 
-  const { isViewer } = messagePositionInfo.item.messageInfo.creator;
+  const { isViewer } = item.messageInfo.creator;
   const replyTooltipClassName = classNames({
     [css.messageTooltip]: 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;
diff --git a/web/chat/robotext-message.react.js b/web/chat/robotext-message.react.js
index 6dc08e314..c684ad4c9 100644
--- a/web/chat/robotext-message.react.js
+++ b/web/chat/robotext-message.react.js
@@ -1,196 +1,204 @@
 // @flow
 
+import classNames from 'classnames';
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 
 import { type RobotextChatMessageInfoItem } from 'lib/selectors/chat-selectors';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors';
 import { splitRobotext, parseRobotextEntity } from 'lib/shared/message-utils';
 import { useSidebarExistsOrCanBeCreated } from 'lib/shared/thread-utils';
 import type { Dispatch } from 'lib/types/redux-types';
 import { type ThreadInfo } from 'lib/types/thread-types';
 
 import Markdown from '../markdown/markdown.react';
 import { linkRules } from '../markdown/rules.react';
 import { updateNavInfoActionType } from '../redux/redux-setup';
 import { useSelector } from '../redux/redux-utils';
 import css from './chat-message-list.css';
 import { InlineSidebar } from './inline-sidebar.react';
 import type {
   MessagePositionInfo,
   OnMessagePositionInfo,
 } from './message-position-types';
 import SidebarTooltip from './sidebar-tooltip.react';
 
 type BaseProps = {|
   +item: RobotextChatMessageInfoItem,
   +threadInfo: ThreadInfo,
   +setMouseOverMessagePosition: (
     messagePositionInfo: MessagePositionInfo,
   ) => void,
   +mouseOverMessagePosition: ?OnMessagePositionInfo,
 |};
 type Props = {|
   ...BaseProps,
   // Redux state
   +sidebarExistsOrCanBeCreated: boolean,
 |};
 class RobotextMessage extends React.PureComponent<Props> {
   render() {
     let inlineSidebar;
     if (this.props.item.threadCreatedFromMessage) {
       inlineSidebar = (
         <div className={css.sidebarMarginTop}>
           <InlineSidebar
             threadInfo={this.props.item.threadCreatedFromMessage}
             positioning="center"
           />
         </div>
       );
     }
 
     const { item, threadInfo, sidebarExistsOrCanBeCreated } = this.props;
     const { id } = item.messageInfo;
     let sidebarTooltip;
     if (
       this.props.mouseOverMessagePosition &&
       this.props.mouseOverMessagePosition.item.messageInfo.id === id &&
       sidebarExistsOrCanBeCreated
     ) {
       sidebarTooltip = (
         <SidebarTooltip
           threadInfo={threadInfo}
           item={item}
           onLeave={this.onMouseLeave}
           messagePosition="center"
         />
       );
     }
 
     return (
       <div className={css.robotextContainer}>
         <div
           className={css.innerRobotextContainer}
           onMouseEnter={this.onMouseEnter}
           onMouseLeave={this.onMouseLeave}
         >
           <span>{this.linkedRobotext()}</span>
-          {sidebarTooltip}
+          <div
+            className={classNames(
+              css.messageActionLinks,
+              css.nonViewerMessageActionLinks,
+            )}
+          >
+            {sidebarTooltip}
+          </div>
         </div>
         {inlineSidebar}
       </div>
     );
   }
 
   linkedRobotext() {
     const { item } = this.props;
     const { robotext } = item;
     const robotextParts = splitRobotext(robotext);
     const textParts = [];
     let keyIndex = 0;
     for (let splitPart of robotextParts) {
       if (splitPart === '') {
         continue;
       }
       if (splitPart.charAt(0) !== '<') {
         const key = `text${keyIndex++}`;
         textParts.push(
           <Markdown key={key} rules={linkRules(false)}>
             {decodeURI(splitPart)}
           </Markdown>,
         );
         continue;
       }
 
       const { rawText, entityType, id } = parseRobotextEntity(splitPart);
 
       if (entityType === 't' && id !== item.messageInfo.threadID) {
         textParts.push(<ThreadEntity key={id} id={id} name={rawText} />);
       } else if (entityType === 'c') {
         textParts.push(<ColorEntity key={id} color={rawText} />);
       } else {
         textParts.push(rawText);
       }
     }
 
     return textParts;
   }
 
   onMouseEnter = (event: SyntheticEvent<HTMLDivElement>) => {
     const { item } = this.props;
     const rect = event.currentTarget.getBoundingClientRect();
     const { top, bottom, left, right, height, width } = rect;
     const messagePosition = { top, bottom, left, right, height, width };
     this.props.setMouseOverMessagePosition({
       type: 'on',
       item,
       messagePosition,
     });
   };
 
   onMouseLeave = () => {
     const { item } = this.props;
     this.props.setMouseOverMessagePosition({ type: 'off', item });
   };
 }
 
 type BaseInnerThreadEntityProps = {|
   +id: string,
   +name: string,
 |};
 type InnerThreadEntityProps = {|
   ...BaseInnerThreadEntityProps,
   +threadInfo: ThreadInfo,
   +dispatch: Dispatch,
 |};
 class InnerThreadEntity extends React.PureComponent<InnerThreadEntityProps> {
   render() {
     return <a onClick={this.onClickThread}>{this.props.name}</a>;
   }
 
   onClickThread = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     const id = this.props.id;
     this.props.dispatch({
       type: updateNavInfoActionType,
       payload: {
         activeChatThreadID: id,
       },
     });
   };
 }
 const ThreadEntity = React.memo<BaseInnerThreadEntityProps>(
   function ConnectedInnerThreadEntity(props: BaseInnerThreadEntityProps) {
     const { id } = props;
     const threadInfo = useSelector((state) => threadInfoSelector(state)[id]);
     const dispatch = useDispatch();
 
     return (
       <InnerThreadEntity
         {...props}
         threadInfo={threadInfo}
         dispatch={dispatch}
       />
     );
   },
 );
 
 function ColorEntity(props: {| color: string |}) {
   const colorStyle = { color: props.color };
   return <span style={colorStyle}>{props.color}</span>;
 }
 
 export default React.memo<BaseProps>(function ConnectedRobotextMessage(
   props: BaseProps,
 ) {
   const sidebarExistsOrCanBeCreated = useSidebarExistsOrCanBeCreated(
     props.threadInfo,
     props.item,
   );
   return (
     <RobotextMessage
       {...props}
       sidebarExistsOrCanBeCreated={sidebarExistsOrCanBeCreated}
     />
   );
 });
diff --git a/web/chat/sidebar-tooltip.react.js b/web/chat/sidebar-tooltip.react.js
index 43d1f8590..eea0b12e5 100644
--- a/web/chat/sidebar-tooltip.react.js
+++ b/web/chat/sidebar-tooltip.react.js
@@ -1,156 +1,141 @@
 // @flow
 
 import { faEllipsisH } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import * as React from 'react';
 
 import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors';
 import {
   type ComposableMessageInfo,
   type RobotextMessageInfo,
 } from 'lib/types/message-types';
 import type { ThreadInfo } from 'lib/types/thread-types';
 
 import {
   useOnClickThread,
   useOnClickPendingSidebar,
 } from '../selectors/nav-selectors';
 import css from './chat-message-list.css';
 
 type Props = {|
   +onLeave: () => void,
   +onButtonClick: (event: SyntheticEvent<HTMLAnchorElement>) => void,
   +messagePosition: 'left' | 'center' | 'right',
   +buttonText: string,
 |};
 function SidebarTooltipButton(props: Props) {
   const { onLeave, onButtonClick, messagePosition, buttonText } = props;
   const [tooltipVisible, setTooltipVisible] = React.useState(false);
 
   const toggleMenu = React.useCallback(() => {
     setTooltipVisible(!tooltipVisible);
   }, [tooltipVisible]);
 
   const toggleSidebar = React.useCallback(
     (event: SyntheticEvent<HTMLAnchorElement>) => {
       onButtonClick(event);
       onLeave();
     },
     [onLeave, onButtonClick],
   );
 
   const hideMenu = React.useCallback(() => {
     setTooltipVisible(false);
   }, []);
 
   const sidebarMenuClassName = classNames({
     [css.menuSidebarContent]: true,
     [css.menuSidebarContentVisible]: tooltipVisible,
     [css.menuSidebarNonViewerContent]: messagePosition === 'left',
-    [css.menuSidebarCenterContent]: messagePosition === 'center',
     [css.messageTimestampBottomRightTooltip]: messagePosition !== 'left',
     [css.messageTimestampBottomLeftTooltip]: messagePosition === 'left',
   });
 
-  const sidebarTooltipClassName = classNames({
-    [css.messageSidebarTooltip]: true,
-    [css.viewerMessageSidebarTooltip]: messagePosition === 'right',
-    [css.tooltipRightPadding]: messagePosition === 'right',
-    [css.tooltipLeftPadding]: messagePosition !== 'right',
-  });
-
-  const sidebarIconClassName = classNames({
-    [css.messageTooltipIcon]: true,
-    [css.tooltipRightPadding]: messagePosition === 'left',
-    [css.tooltipLeftPadding]: messagePosition === 'right',
-    [css.tooltipLeftRightPadding]: messagePosition === 'center',
-  });
-
   return (
-    <div className={sidebarTooltipClassName}>
+    <div className={css.messageSidebarTooltip}>
       <div
-        className={sidebarIconClassName}
+        className={css.messageTooltipIcon}
         onClick={toggleMenu}
         onMouseLeave={hideMenu}
       >
         <FontAwesomeIcon icon={faEllipsisH} />
         <div className={sidebarMenuClassName}>
           <ul>
             <li>
               <button onClick={toggleSidebar}>{buttonText}</button>
             </li>
           </ul>
         </div>
       </div>
     </div>
   );
 }
 
 type OpenSidebarProps = {|
   +threadCreatedFromMessage: ThreadInfo,
   +onLeave: () => void,
   +messagePosition: 'left' | 'center' | 'right',
 |};
 function OpenSidebar(props: OpenSidebarProps) {
   const onButtonClick = useOnClickThread(props.threadCreatedFromMessage.id);
   return (
     <SidebarTooltipButton
       onButtonClick={onButtonClick}
       onLeave={props.onLeave}
       messagePosition={props.messagePosition}
       buttonText="Go to sidebar"
     />
   );
 }
 
 type CreateSidebarProps = {|
   +threadInfo: ThreadInfo,
   +messageInfo: ComposableMessageInfo | RobotextMessageInfo,
   +onLeave: () => void,
   +messagePosition: 'left' | 'center' | 'right',
 |};
 function CreateSidebar(props: CreateSidebarProps) {
   const onButtonClick = useOnClickPendingSidebar(
     props.messageInfo,
     props.threadInfo,
   );
   return (
     <SidebarTooltipButton
       onButtonClick={onButtonClick}
       onLeave={props.onLeave}
       messagePosition={props.messagePosition}
       buttonText="Create sidebar"
     />
   );
 }
 
 type SidebarTooltipProps = {|
   +threadInfo: ThreadInfo,
   +item: ChatMessageInfoItem,
   +onLeave: () => void,
   +messagePosition: 'left' | 'center' | 'right',
 |};
 function SidebarTooltip(props: SidebarTooltipProps) {
   const { threadInfo, item, onLeave, messagePosition } = props;
   if (item.threadCreatedFromMessage) {
     return (
       <OpenSidebar
         threadCreatedFromMessage={item.threadCreatedFromMessage}
         onLeave={onLeave}
         messagePosition={messagePosition}
       />
     );
   } else {
     return (
       <CreateSidebar
         threadInfo={threadInfo}
         messageInfo={item.messageInfo}
         onLeave={onLeave}
         messagePosition={messagePosition}
       />
     );
   }
 }
 
 export default SidebarTooltip;