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;