From 1a28cb52b8ef22e01d3eed4eb4e54f2a4f9ccc0e Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 17 Jul 2026 20:00:50 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20fix=20long-standing=20?=
 =?UTF-8?q?initials=20centering=20in=20Avatar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Avatar was rendered as an image, which made the initials
centering unreliable across sizes and browsers.

Render the Avatar as an SVG instead, which allows the initials to be
properly centered by construction.
---
 src/frontend/src/components/Avatar.tsx | 52 +++++++++++---------------
 1 file changed, 21 insertions(+), 31 deletions(-)

diff --git a/src/frontend/src/components/Avatar.tsx b/src/frontend/src/components/Avatar.tsx
index 6be35f90..92b60908 100644
--- a/src/frontend/src/components/Avatar.tsx
+++ b/src/frontend/src/components/Avatar.tsx
@@ -7,36 +7,20 @@ const avatar = cva({
     color: 'white',
     display: 'flex',
     borderRadius: '50%',
-    justifyContent: 'center',
-    alignItems: 'center',
     userSelect: 'none',
     cursor: 'default',
     flexGrow: 0,
     flexShrink: 0,
+    overflow: 'hidden',
   },
   variants: {
     context: {
-      subtitles: {
-        width: '40px',
-        height: '40px',
-        fontSize: '1.3rem',
-        lineHeight: '1rem',
-      },
-      list: {
-        width: '32px',
-        height: '32px',
-        fontSize: '1.3rem',
-        lineHeight: '1rem',
-      },
-      placeholder: {
-        width: '100%',
-        height: '100%',
-      },
+      subtitles: { width: '40px', height: '40px' },
+      list: { width: '32px', height: '32px' },
+      placeholder: { width: '100%', height: '100%' },
     },
     notification: {
-      true: {
-        border: '2px solid white',
-      },
+      true: { border: '2px solid white' },
     },
   },
   defaultVariants: {
@@ -54,21 +38,27 @@ export const Avatar = React.memo(
     const initial = name?.trim()?.charAt(0) ?? ''
     return (
       <div
-        style={{
-          backgroundColor: bgColor,
-          ...style,
-        }}
+        style={{ backgroundColor: bgColor, ...style }}
         className={avatar({ context, notification })}
         {...props}
       >
-        <span
+        <svg
+          viewBox="0 0 100 100"
           aria-hidden="true"
-          className={css({
-            marginTop: '-0.3rem',
-          })}
+          className={css({ width: '100%', height: '100%', display: 'block' })}
         >
-          {initial}
-        </span>
+          <text
+            x="50"
+            y="50"
+            textAnchor="middle"
+            dominantBaseline="central"
+            fontSize="52"
+            fontWeight="500"
+            fill="currentColor"
+          >
+            {initial}
+          </text>
+        </svg>
       </div>
     )
   }