From a79517a79a262831d9ab0751100c2b1e52f5320c Mon Sep 17 00:00:00 2001
From: Tink bot <tink-bot@kolaente.de>
Date: Mon, 18 May 2026 18:59:35 +0000
Subject: [PATCH] fix(frontend): prevent avatar layout shift while loading

The .avatar img in User.vue relied solely on the width/height HTML
attributes for sizing. Those are presentational hints with zero CSS
specificity, so Bulma's global reset (img { height: auto; max-width: 100% })
overrode them. While avatarSrc was still resolving (initial src=""),
the browser had no intrinsic dimensions to compute the auto height from
and fell back to the broken-image box (~96px in Chrome), then snapped
to the real size once the blob URL loaded.

Set inline-size/block-size explicitly via a CSS custom property bound
to the avatarSize prop so the rendered size is locked regardless of
load state or the Bulma reset.
---
 frontend/src/components/misc/User.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/components/misc/User.vue b/frontend/src/components/misc/User.vue
index b7348b1a5..bc7fe137a 100644
--- a/frontend/src/components/misc/User.vue
+++ b/frontend/src/components/misc/User.vue
@@ -2,6 +2,7 @@
 	<div
 		class="user"
 		:class="{'is-inline': isInline}"
+		:style="{'--avatar-size': `${avatarSize}px`}"
 	>
 		<span class="avatar-wrapper">
 			<img
@@ -74,6 +75,8 @@ watch(() => [props.user, props.avatarSize], loadAvatar, { immediate: true })
 }
 
 .avatar {
+	inline-size: var(--avatar-size);
+	block-size: var(--avatar-size);
 	border-radius: 100%;
 	vertical-align: middle;
 }