Fix visual glitch with private mentions

app/javascript/mastodon/components/status.jsx

@@ -116,6 +116,8 @@ class Status extends ImmutablePureComponent {
     cacheMediaWidth: PropTypes.func,
     cachedMediaWidth: PropTypes.number,
     scrollKey: PropTypes.string,
+    skipPrepend: PropTypes.bool,
+    avatarSize: PropTypes.number,
     deployPictureInPicture: PropTypes.func,
     pictureInPicture: ImmutablePropTypes.contains({
       inUse: PropTypes.bool,
@@ -353,7 +355,7 @@ class Status extends ImmutablePureComponent {
   };
 
   render () {
-    const { intl, hidden, featured, unread, showThread, scrollKey, pictureInPicture, previousId, nextInReplyToId, rootId } = this.props;
+    const { intl, hidden, featured, unread, showThread, scrollKey, pictureInPicture, previousId, nextInReplyToId, rootId, skipPrepend, avatarSize } = this.props;
 
     let { status, account, ...other } = this.props;
 
@@ -539,7 +541,7 @@ class Status extends ImmutablePureComponent {
     }
 
     if (account === undefined || account === null) {
-      statusAvatar = <Avatar account={status.get('account')} size={46} />;
+      statusAvatar = <Avatar account={status.get('account')} size={avatarSize} />;
     } else {
       statusAvatar = <AvatarOverlay account={status.get('account')} friend={account} />;
     }
@@ -550,7 +552,7 @@ class Status extends ImmutablePureComponent {
     return (
       <HotKeys handlers={handlers}>
         <div className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), unread, focusable: !this.props.muted })} tabIndex={this.props.muted ? null : 0} data-featured={featured ? 'true' : null} aria-label={textForScreenReader(intl, status, rebloggedByText)} ref={this.handleRef} data-nosnippet={status.getIn(['account', 'noindex'], true) || undefined}>
-          {prepend}
+          {!skipPrepend && prepend}
 
           <div className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), 'status--in-thread': !!rootId, 'status--first-in-thread': previousId && (!connectUp || connectToRoot), muted: this.props.muted })} data-id={status.get('id')}>
             {(connectReply || connectUp || connectToRoot) && <div className={classNames('status__line', { 'status__line--full': connectReply, 'status__line--first': !status.get('in_reply_to_id') && !connectToRoot })} />}

app/javascript/mastodon/features/notifications_v2/components/notification_with_status.tsx

@@ -53,7 +53,7 @@ export const NotificationWithStatus: React.FC<{
       </div>
 
       {/* @ts-expect-error -- <Status> is not yet typed */}
-      <Status id={statusId} contextType='notifications' withDismiss />
+      <Status id={statusId} contextType='notifications' withDismiss skipPrepend avatarSize={40} />
     </div>
   );
 };

app/javascript/styles/mastodon/components.scss

@@ -10505,14 +10505,13 @@ noscript {
     &__avatar {
       width: 40px;
       height: 40px;
-
-      .account__avatar {
-        width: 40px !important;
-        height: 40px !important;
-      }
     }
   }
 
+  .status__wrapper-direct {
+    background: transparent;
+  }
+
   $icon-margin: 48px; // 40px avatar + 8px gap
 
   .status__content,