Leatherface/mastodon
0
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2026-03-29 11:11:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Fix avatar alt-text running into other elements on image load failure

Browse Source 
Port 3c8e37907d to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Dock
2026-02-27 10:22:19 -05:00
committed by Claire
parent 310acf113b
commit d6fa72cfdf
1 changed files with 22 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/javascript/flavours/glitch/components/avatar_overlay.tsx
View File

@@ -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,
@@ -39,7 +47,13 @@ export const AvatarOverlay: React.FC<Props> = ({
style={{ width: `${baseSize}px`, height: `${baseSize}px` }}
data-avatar-of={`@${account?.get('acct')}`}
>
{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'>
@@ -48,7 +62,13 @@ export const AvatarOverlay: React.FC<Props> = ({
style={{ width: `${overlaySize}px`, height: `${overlaySize}px` }}
data-avatar-of={`@${friend?.get('acct')}`}
>
{friendSrc && <img src={friendSrc} alt={friend?.get('acct')} />}
{friendSrc && (
<img
src={friendSrc}
alt={friend?.get('acct')}
onError={handleImgLoadError}
/>
)}
</div>
</div>
</div>