diff --git a/app/soapbox/components/status-reply-mentions.tsx b/app/soapbox/components/status-reply-mentions.tsx
index 0964c84ae..3adde6b65 100644
--- a/app/soapbox/components/status-reply-mentions.tsx
+++ b/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,32 +72,34 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
   }
 
   return (
-    <div className='reply-mentions'>
-      <FormattedMessage
-        id='reply_mentions.reply.hoverable'
-        defaultMessage='<hover>Replying to</hover> {accounts}'
-        values={{
-          accounts: <FormattedList type='conjunction' value={accounts} />,
-          hover: (children: React.ReactNode) => {
-            if (hoverable) {
-              return (
-                <HoverStatusWrapper statusId={status.in_reply_to_id} inline>
-                  <span
-                    key='hoverstatus'
-                    className='hover:underline cursor-pointer'
-                    role='presentation'
-                  >
-                    {children}
-                  </span>
-                </HoverStatusWrapper>
-              );
-            } else {
-              return children;
-            }
-          },
-        }}
-      />
-    </div>
+    <StopPropagation>
+      <div className='reply-mentions'>
+        <FormattedMessage
+          id='reply_mentions.reply.hoverable'
+          defaultMessage='<hover>Replying to</hover> {accounts}'
+          values={{
+            accounts: <FormattedList type='conjunction' value={accounts} />,
+            hover: (children: React.ReactNode) => {
+              if (hoverable) {
+                return (
+                  <HoverStatusWrapper statusId={status.in_reply_to_id} inline>
+                    <span
+                      key='hoverstatus'
+                      className='hover:underline cursor-pointer'
+                      role='presentation'
+                    >
+                      {children}
+                    </span>
+                  </HoverStatusWrapper>
+                );
+              } else {
+                return children;
+              }
+            },
+          }}
+        />
+      </div>
+    </StopPropagation>
   );
 };