diff --git a/web/chat/message-tooltip.css b/web/chat/message-tooltip.css
--- a/web/chat/message-tooltip.css
+++ b/web/chat/message-tooltip.css
@@ -4,6 +4,7 @@
   align-items: center;
   font-size: var(--s-font-14);
   padding: 8px 0;
+  z-index: 5;
 }
 
 div.messageActionContainer {
@@ -15,27 +16,32 @@
   border-radius: 8px;
   width: fit-content;
   box-shadow: var(--message-action-tooltip-bg) 0 2px 8px;
+  z-index: 5;
 }
 
 div.messageActionButtons {
   display: flex;
   font-size: 16px;
+  z-index: 5;
 }
 div.messageActionButtons svg {
   padding: 10px 6px 6px;
   color: var(--color-disabled);
+  z-index: 5;
 }
 
 div.messageActionButtons svg:hover,
 div.messageActionButtons span:hover {
   cursor: pointer;
   color: var(--fg);
+  z-index: 5;
 }
 
 div.messageTooltipButton {
   display: flex;
   align-items: center;
   justify-content: center;
+  z-index: 5;
 }
 
 div.messageTooltipLabel {
@@ -65,4 +71,5 @@
 
 div.emojiKeyboard {
   position: absolute;
+  z-index: 5;
 }
diff --git a/web/chat/message-tooltip.react.js b/web/chat/message-tooltip.react.js
--- a/web/chat/message-tooltip.react.js
+++ b/web/chat/message-tooltip.react.js
@@ -123,6 +123,7 @@
   const messageTooltipTopLabelStyle = React.useMemo(
     () => ({
       height: `${tooltipLabelStyle.height + 2 * tooltipLabelStyle.padding}px`,
+      zIndex: 5,
     }),
     [],
   );
@@ -131,6 +132,7 @@
     if (!activeTooltipLabel) {
       return null;
     }
+
     return (
       <div className={css.messageTooltipLabel} style={messageTooltipLabelStyle}>
         {activeTooltipLabel}
diff --git a/web/utils/tooltip-action-utils.js b/web/utils/tooltip-action-utils.js
--- a/web/utils/tooltip-action-utils.js
+++ b/web/utils/tooltip-action-utils.js
@@ -44,6 +44,7 @@
   threadInfo: ThreadInfo,
 ): ?MessageTooltipAction {
   const { threadCreatedFromMessage, messageInfo } = item;
+  const { popModal } = useModalContext();
   const sidebarExists = !!threadCreatedFromMessage;
   const sidebarExistsOrCanBeCreated = useSidebarExistsOrCanBeCreated(
     threadInfo,
@@ -57,6 +58,8 @@
     }
     const buttonContent = <CommIcon icon="sidebar-filled" size={16} />;
     const onClick = (event: SyntheticEvent<HTMLElement>) => {
+      popModal();
+
       if (threadCreatedFromMessage) {
         openThread(event);
       } else {
@@ -69,6 +72,7 @@
       label: sidebarExists ? 'Go to thread' : 'Create thread',
     };
   }, [
+    popModal,
     openPendingSidebar,
     openThread,
     sidebarExists,
@@ -82,6 +86,7 @@
   threadInfo: ThreadInfo,
 ): ?MessageTooltipAction {
   const { messageInfo } = item;
+  const { popModal } = useModalContext();
   const inputState = React.useContext(InputStateContext);
   invariant(inputState, 'inputState is required');
   const { addReply } = inputState;
@@ -94,6 +99,8 @@
     }
     const buttonContent = <CommIcon icon="reply-filled" size={18} />;
     const onClick = () => {
+      popModal();
+
       if (!messageInfo.text) {
         return;
       }
@@ -104,7 +111,7 @@
       onClick,
       label: 'Reply',
     };
-  }, [addReply, item.messageInfo.type, messageInfo, threadInfo]);
+  }, [popModal, addReply, item.messageInfo.type, messageInfo, threadInfo]);
 }
 
 const copiedMessageDurationMs = 2000;