From fca7c3b8b815f307484348107fbe5bece02fd225 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>
     )
   }