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 (
{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 = ; 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;