From 006ef1081e63d36cc17a6b8ae7492494d8bfdd05 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Fri, 14 Jun 2024 17:36:26 +0200
Subject: [PATCH] Fix visual glitch with private mentions

---
 app/javascript/mastodon/components/status.jsx            | 8 +++++---
 .../components/notification_with_status.tsx              | 2 +-
 app/javascript/styles/mastodon/components.scss           | 9 ++++-----
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/javascript/mastodon/components/status.jsx b/app/javascript/mastodon/components/status.jsx
index dce48d7036..5aa7985684 100644
--- a/app/javascript/mastodon/components/status.jsx
+++ b/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 })} />}
diff --git a/app/javascript/mastodon/features/notifications_v2/components/notification_with_status.tsx b/app/javascript/mastodon/features/notifications_v2/components/notification_with_status.tsx
index deb4438078..3b616b7e11 100644
--- a/app/javascript/mastodon/features/notifications_v2/components/notification_with_status.tsx
+++ b/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>
   );
 };
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 9f46ffde63..5e920b5cdd 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/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,