From 3c8e37907d2e34bf51a889488cc28dbffb822a41 Mon Sep 17 00:00:00 2001
From: Dock <mail@dockoneal.com>
Date: Fri, 27 Feb 2026 10:22:19 -0500
Subject: [PATCH] Fix avatar alt-text running into other elements on image load
 failure. (#38000)

---
 .../avatar_overlay-test.jsx.snap              |  2 ++
 .../mastodon/components/avatar_overlay.tsx    | 24 +++++++++++++++++--
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.jsx.snap b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.jsx.snap
index 94d5402b204..de4ccd65942 100644
--- a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.jsx.snap
+++ b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.jsx.snap
@@ -26,6 +26,7 @@ exports[`<AvatarOverlay > renders a overlay avatar 1`] = `
     >
       <img
         alt="alice"
+        onError={[Function]}
         src="/static/alice.jpg"
       />
     </div>
@@ -44,6 +45,7 @@ exports[`<AvatarOverlay > renders a overlay avatar 1`] = `
     >
       <img
         alt="eve@blackhat.lair"
+        onError={[Function]}
         src="/static/eve.jpg"
       />
     </div>
diff --git a/app/javascript/mastodon/components/avatar_overlay.tsx b/app/javascript/mastodon/components/avatar_overlay.tsx
index 0bd33fea693..e7fc1252c1b 100644
--- a/app/javascript/mastodon/components/avatar_overlay.tsx
+++ b/app/javascript/mastodon/components/avatar_overlay.tsx
@@ -10,6 +10,14 @@ interface Props {
   overlaySize?: number;
 }
 
+const handleImgLoadError = (error: { currentTarget: HTMLElement }) => {
+  //
+  // When the img tag fails to load the image, set the img tag to display: none. This prevents the
+  // alt-text from overrunning the containing div.
+  //
+  error.currentTarget.style.display = 'none';
+};
+
 export const AvatarOverlay: React.FC<Props> = ({
   account,
   friend,
@@ -38,7 +46,13 @@ export const AvatarOverlay: React.FC<Props> = ({
           className='account__avatar'
           style={{ width: `${baseSize}px`, height: `${baseSize}px` }}
         >
-          {accountSrc && <img src={accountSrc} alt={account?.get('acct')} />}
+          {accountSrc && (
+            <img
+              src={accountSrc}
+              alt={account?.get('acct')}
+              onError={handleImgLoadError}
+            />
+          )}
         </div>
       </div>
       <div className='account__avatar-overlay-overlay'>
@@ -46,7 +60,13 @@ export const AvatarOverlay: React.FC<Props> = ({
           className='account__avatar'
           style={{ width: `${overlaySize}px`, height: `${overlaySize}px` }}
         >
-          {friendSrc && <img src={friendSrc} alt={friend?.get('acct')} />}
+          {friendSrc && (
+            <img
+              src={friendSrc}
+              alt={friend?.get('acct')}
+              onError={handleImgLoadError}
+            />
+          )}
         </div>
       </div>
     </div>