Disallow status card nested hovering

app/soapbox/components/status-hover-card.tsx

@@ -70,6 +70,7 @@ export const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true })
       <StatusContainer
         key={statusId}
         id={statusId}
+        hoverable={false}
         hideActionBar
         muted
       />

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

@@ -11,9 +11,10 @@ import type { Account, Status } from 'soapbox/types/entities';
 
 interface IStatusReplyMentions {
   status: Status,
+  hoverable?: boolean,
 }
 
-const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status }) => {
+const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable = true }) => {
   const dispatch = useAppDispatch();
 
   const handleOpenMentionsModal: React.MouseEventHandler<HTMLSpanElement> = (e) => {
@@ -47,11 +48,21 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status }) => {
   }
 
   // The typical case with a reply-to and a list of mentions.
-  const accounts = to.slice(0, 2).map(account => (
-    <HoverRefWrapper key={account.id} accountId={account.id} inline>
+  const accounts = to.slice(0, 2).map(account => {
+    const link = (
       <Link to={`/@${account.acct}`} className='reply-mentions__account'>@{account.username}</Link>
-    </HoverRefWrapper>
-  )).toArray();
+    );
+
+    if (hoverable) {
+      return (
+        <HoverRefWrapper key={account.id} accountId={account.id} inline>
+          {link}
+        </HoverRefWrapper>
+      );
+    } else {
+      return link;
+    }
+  }).toArray();
 
   if (to.size > 2) {
     accounts.push(
@@ -68,17 +79,23 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status }) => {
         defaultMessage='<hover>Replying to</hover> {accounts}'
         values={{
           accounts: <FormattedList type='conjunction' value={accounts} />,
-          hover: (children: React.ReactNode) => (
-            <HoverStatusWrapper statusId={status.in_reply_to_id} inline>
-              <span
-                key='hoverstatus'
-                className='hover:underline cursor-pointer'
-                role='presentation'
-              >
-                {children}
-              </span>
-            </HoverStatusWrapper>
-          ),
+          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>

app/soapbox/components/status.tsx

@@ -94,6 +94,7 @@ interface IStatus extends RouteComponentProps {
   featured?: boolean,
   withDismiss?: boolean,
   hideActionBar?: boolean,
+  hoverable?: boolean,
 }
 
 interface IStatusState {
@@ -106,6 +107,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
 
   static defaultProps = {
     focusable: true,
+    hoverable: true,
   };
 
   didShowCard = false;
@@ -481,6 +483,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
                   action={reblogElement}
                   hideActions={!reblogElement}
                   showEdit={!!status.edited_at}
+                  showProfileHoverCard={this.props.hoverable}
                 />
               </HStack>
             </div>
@@ -492,7 +495,10 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
                 </div>
               )}
 
-              <StatusReplyMentions status={this._properStatus()} />
+              <StatusReplyMentions
+                status={this._properStatus()}
+                hoverable={this.props.hoverable}
+              />
 
               <StatusContent
                 status={status}