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,8 @@ align-items: center; font-size: var(--s-font-14); padding: 8px 0; + position: relative; + z-index: 5; } div.messageActionContainer { @@ -65,4 +67,5 @@ div.emojiKeyboard { position: absolute; + z-index: 5; } 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 = ; const onClick = (event: SyntheticEvent) => { + 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 = ; 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;