StatusReplyMentions: prevent bubbling

app/soapbox/components/status-reply-mentions.tsx

@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
 import { openModal } from 'soapbox/actions/modals';
 import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
 import HoverStatusWrapper from 'soapbox/components/hover-status-wrapper';
+import StopPropagation from 'soapbox/components/stop-propagation';
 import { useAppDispatch } from 'soapbox/hooks';
 
 import type { Account, Status } from 'soapbox/types/entities';
@@ -18,8 +19,6 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
   const dispatch = useAppDispatch();
 
   const handleOpenMentionsModal: React.MouseEventHandler<HTMLSpanElement> = (e) => {
-    e.stopPropagation();
-
     const account = status.account as Account;
 
     dispatch(openModal('MENTIONS', {
@@ -50,7 +49,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
   // The typical case with a reply-to and a list of mentions.
   const accounts = to.slice(0, 2).map(account => {
     const link = (
-      <Link to={`/@${account.acct}`} className='reply-mentions__account' onClick={(e) => e.stopPropagation()}>@{account.username}</Link>
+      <Link to={`/@${account.acct}`} className='reply-mentions__account'>@{account.username}</Link>
     );
 
     if (hoverable) {
@@ -73,6 +72,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
   }
 
   return (
+    <StopPropagation>
       <div className='reply-mentions'>
         <FormattedMessage
           id='reply_mentions.reply.hoverable'
@@ -99,6 +99,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
           }}
         />
       </div>
+    </StopPropagation>
   );
 };