🐛(frontend) fix long-standing initials centering in Avatar

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

@@ -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>
     )
   }