diff --git a/app/javascript/flavours/glitch/components/avatar_overlay.tsx b/app/javascript/flavours/glitch/components/avatar_overlay.tsx index 66d85325ed..478facfa61 100644 --- a/app/javascript/flavours/glitch/components/avatar_overlay.tsx +++ b/app/javascript/flavours/glitch/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 = ({ account, friend, @@ -39,7 +47,13 @@ export const AvatarOverlay: React.FC = ({ style={{ width: `${baseSize}px`, height: `${baseSize}px` }} data-avatar-of={`@${account?.get('acct')}`} > - {accountSrc && {account?.get('acct')}} + {accountSrc && ( + {account?.get('acct')} + )}
@@ -48,7 +62,13 @@ export const AvatarOverlay: React.FC = ({ style={{ width: `${overlaySize}px`, height: `${overlaySize}px` }} data-avatar-of={`@${friend?.get('acct')}`} > - {friendSrc && {friend?.get('acct')}} + {friendSrc && ( + {friend?.get('acct')} + )}