🚸(frontend) show two initials in the Avatar when possible

Display two initials in the Avatar whenever the participant's name
allows it, instead of a single letter.

A single initial makes it too hard to distinguish participants when
their cameras are off, especially in larger

CHANGELOG.md

@@ -35,6 +35,7 @@ and this project adheres to
 - 🐛(backend) preserve recording metadata when updating room access
 - 🐛(backend) allow any string as sub in the API serializer
 - 🐛(frontend) fall back to user.full_name on request-entry
+- 🚸(frontend) show two initials in the Avatar when possible
 
 ## [1.24.0] - 2026-07-21
 

src/frontend/src/components/Avatar.tsx

@@ -28,6 +28,15 @@ const avatar = cva({
   },
 })
 
+const getInitials = (name?: string): string => {
+  if (!name) return ''
+  const words = name.trim().split(/\s+/).filter(Boolean)
+  if (words.length === 0) return ''
+  const first = words[0].charAt(0)
+  const second = words.length > 1 ? words[1].charAt(0) : ''
+  return (first + second).toUpperCase()
+}
+
 export type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {
   name?: string
   bgColor?: string
@@ -35,7 +44,7 @@ export type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {
 
 export const Avatar = React.memo(
   ({ name, bgColor, context, notification, style, ...props }: AvatarProps) => {
-    const initial = name?.trim()?.charAt(0) ?? ''
+    const initials = getInitials(name)
     return (
       <div
         style={{ backgroundColor: bgColor, ...style }}
@@ -52,11 +61,11 @@ export const Avatar = React.memo(
             y="50"
             textAnchor="middle"
             dominantBaseline="central"
-            fontSize="52"
+            fontSize={initials.length > 1 ? 48 : 52}
             fontWeight="500"
             fill="currentColor"
           >
-            {initial.toUpperCase()}
+            {initials.toUpperCase()}
           </text>
         </svg>
       </div>