move message context menu trigger

src/components/messaging/Message.tsx

@@ -30,7 +30,16 @@ function Message({ message, header }: Props) {
 		message.mention_roles.some((role) => guild.members.me?.roles.some((role) => role.id === role.id));
 
 	return (
-		<MessageBase header={header} mention={isEveryoneMentioned || isUserMentioned || isRoleMentioned}>
+		<MessageBase
+			header={header}
+			mention={isEveryoneMentioned || isUserMentioned || isRoleMentioned}
+			onContextMenu={(e) =>
+				contextMenuContext.onContextMenu(e, {
+					type: "message",
+					message: message,
+				})
+			}
+		>
 			<MessageInfo>
 				{header ? (
 					<Avatar key={message.author.id} user={message.author} size={40} />
@@ -45,14 +54,7 @@ function Message({ message, header }: Props) {
 						<MessageDetails message={message} position="top" />
 					</span>
 				)}
-				<div
-					onContextMenu={(e) =>
-						contextMenuContext.onContextMenu(e, {
-							type: "message",
-							message: message,
-						})
-					}
-				>
+
 				<MessageContentText
 					sending={"status" in message && message.status === QueuedMessageStatus.SENDING}
 					failed={"status" in message && message.status === QueuedMessageStatus.FAILED}
@@ -66,10 +68,7 @@ function Message({ message, header }: Props) {
 					))}
 				{"embeds" in message &&
 					message.embeds?.map((embed, index) => <MessageEmbed key={index} embed={embed} />)}
-					{"files" in message && message.files?.length !== 0 && (
-						<AttachmentUploadProgress message={message} />
-					)}
-				</div>
+				{"files" in message && message.files?.length !== 0 && <AttachmentUploadProgress message={message} />}
 			</MessageContent>
 		</MessageBase>
 	);

src/hooks/useContextMenu.tsx

@@ -62,6 +62,7 @@ export default function () {
 
 	function onContextMenu(e: React.MouseEvent, props: ContextMenuProps) {
 		e.preventDefault();
+		e.stopPropagation();
 
 		data.refs.setPositionReference({
 			getBoundingClientRect() {