From 6047682fb1f86b034b9094ea631ce0c1c07c1bac Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 23 Jul 2026 13:07:15 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F(frontend)=20size=20the=20Ava?=
 =?UTF-8?q?tar=20with=20CSS=20instead=20of=20useSize?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Stop using the useSize hook to compute the Avatar size in JS. Rely
on CSS to size the Avatar responsively instead.

This removes a set of unnecessary re-renders triggered by the
useSize subscription every time the container resized.
---
 .../components/ParticipantPlaceholder.tsx     | 40 +++++++------------
 .../utils/getParticipantBackgroundGradient.ts |  2 +-
 2 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/src/frontend/src/features/participantTile/components/ParticipantPlaceholder.tsx b/src/frontend/src/features/participantTile/components/ParticipantPlaceholder.tsx
index 8338aa9a..a6612514 100644
--- a/src/frontend/src/features/participantTile/components/ParticipantPlaceholder.tsx
+++ b/src/frontend/src/features/participantTile/components/ParticipantPlaceholder.tsx
@@ -4,8 +4,7 @@ import { Avatar } from '@/components/Avatar'
 import { useIsSpeaking } from '@livekit/components-react'
 import { getParticipantBackgroundGradient } from '@/features/rooms/utils/getParticipantBackgroundGradient'
 import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
-import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
-import { useMemo, useRef } from 'react'
+import { useMemo } from 'react'
 
 const StyledParticipantPlaceHolder = styled('div', {
   base: {
@@ -14,6 +13,16 @@ const StyledParticipantPlaceHolder = styled('div', {
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
+    containerType: 'size',
+  },
+})
+
+const StyledAvatarWrapper = styled('div', {
+  base: {
+    borderRadius: '50%',
+    aspectRatio: '1 / 1',
+    width: 'min(90cqmin, 160px)',
+    fontSize: 'min(27cqmin, 48px)',
   },
 })
 
@@ -31,43 +40,22 @@ export const ParticipantPlaceholder = ({
     [participantColor]
   )
 
-  const placeholderEl = useRef<HTMLDivElement>(null)
-  const { width, height } = useSize(placeholderEl)
-
-  const minDimension = Math.min(width, height)
-  const avatarSize = useMemo(
-    () => Math.min(Math.round(minDimension * 0.9), 160),
-    [minDimension]
-  )
-
-  const initialSize = useMemo(() => Math.round(avatarSize * 0.3), [avatarSize])
-
   return (
     <StyledParticipantPlaceHolder
-      ref={placeholderEl}
       style={{
         backgroundColor: participantColor,
         backgroundImage: backgroundGradient,
       }}
     >
-      <div
-        style={{
-          borderRadius: '50%',
-          animation: isSpeaking ? 'pulse 1s infinite' : undefined,
-          height: 'auto',
-          aspectRatio: '1/1',
-          width: '80%',
-          maxWidth: `${avatarSize}px`,
-          fontSize: `${initialSize}px`,
-        }}
+      <StyledAvatarWrapper
+        style={{ animation: isSpeaking ? 'pulse 1s infinite' : undefined }}
       >
-        {/*fixme - participant doesn't update on ParticipantNameChanged event */}
         <Avatar
           name={participant.name}
           bgColor={participantColor}
           context="placeholder"
         />
-      </div>
+      </StyledAvatarWrapper>
     </StyledParticipantPlaceHolder>
   )
 }
diff --git a/src/frontend/src/features/rooms/utils/getParticipantBackgroundGradient.ts b/src/frontend/src/features/rooms/utils/getParticipantBackgroundGradient.ts
index b2cfe7ef..ea77b607 100644
--- a/src/frontend/src/features/rooms/utils/getParticipantBackgroundGradient.ts
+++ b/src/frontend/src/features/rooms/utils/getParticipantBackgroundGradient.ts
@@ -4,7 +4,7 @@
  * Mixed in oklch so the color stays vivid as it darkens instead of greying out.
  */
 export const getParticipantBackgroundGradient = (color: string): string =>
-  `radial-gradient(circle at 50% 45%,
+  `radial-gradient(circle at 50% 50%,
     color-mix(in oklch, ${color} 82%, white) 0%,
     color-mix(in oklch, ${color} 90%, white) 8%,
     ${color} 35%,