From d9bf6efa2ae3925601680122b1ad9fa76d714125 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 28 Jul 2026 22:16:03 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20improve=20participant?=
 =?UTF-8?q?=20name=20rendering=20in=20the=20list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rework how the participant name is displayed in the participant
list to show as much of the name as possible before truncating.

When the name has to be truncated, add a tooltip so users can hover
to see the full name.

Requested by users.
---
 CHANGELOG.md                                  |  2 +-
 .../components/ParticipantName.tsx            | 68 +++++++++++++++++++
 .../components/ParticipantRow.tsx             | 60 ++++------------
 .../participants/components/RaisedHandRow.tsx | 45 +++---------
 .../components/WaitingParticipantRow.tsx      | 40 ++---------
 .../src/primitives/VisualOnlyTooltip.tsx      | 42 ++++++++----
 6 files changed, 126 insertions(+), 131 deletions(-)
 create mode 100644 src/frontend/src/features/participants/components/ParticipantName.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2ee4b4c7..f3d6816a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,7 @@ and this project adheres to
 - ⚡️(frontend) limit unnecessary re-renders #1510
 - 📝(legal) update terms of service
 - 💄(frontend) render Avatar initials in uppercase
+- 💄(frontend) improve participant name rendering in the list
 
 ## Fixed
 
@@ -35,7 +36,6 @@ and this project adheres to
 - 🐛(backend) allow any string as sub in the API serializer
 - 🐛(frontend) fall back to user.full_name on request-entry
 
-
 ## [1.24.0] - 2026-07-21
 
 ### Added
diff --git a/src/frontend/src/features/participants/components/ParticipantName.tsx b/src/frontend/src/features/participants/components/ParticipantName.tsx
new file mode 100644
index 00000000..d8fec50c
--- /dev/null
+++ b/src/frontend/src/features/participants/components/ParticipantName.tsx
@@ -0,0 +1,68 @@
+import React, { useLayoutEffect, useRef, useState } from 'react'
+import { Text } from '@/primitives'
+import { css } from '@/styled-system/css'
+import { useTranslation } from 'react-i18next'
+import { VisualOnlyTooltip } from '@/primitives/VisualOnlyTooltip'
+
+export const ParticipantName = React.memo(
+  ({ displayedName, isLocal }: { displayedName: string; isLocal: boolean }) => {
+    const { t } = useTranslation('rooms')
+
+    const nameRef = useRef<HTMLParagraphElement>(null)
+    const [isTruncated, setIsTruncated] = useState(false)
+
+    useLayoutEffect(() => {
+      const el = nameRef.current
+      if (!el) return
+      const truncated = el.scrollWidth > el.clientWidth
+      setIsTruncated((prev) => (prev === truncated ? prev : truncated))
+    }, [displayedName])
+
+    return (
+      <Text
+        as="div"
+        variant="sm"
+        className={css({
+          userSelect: 'none',
+          cursor: 'default',
+          display: 'flex',
+          minWidth: 0,
+          width: 'full',
+          maxWidth: 'full',
+        })}
+      >
+        <VisualOnlyTooltip
+          tooltip={displayedName}
+          disabled={!isTruncated}
+          className={css({ display: 'flex', minWidth: 0, flex: 1 })}
+        >
+          <p
+            className={css({
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              display: 'block',
+              minWidth: 0,
+            })}
+            ref={nameRef}
+          >
+            {displayedName}
+          </p>
+        </VisualOnlyTooltip>
+        {isLocal && (
+          <span
+            className={css({
+              marginLeft: '.25rem',
+              whiteSpace: 'nowrap',
+              flexShrink: 0,
+            })}
+          >
+            ({t('participants.you')})
+          </span>
+        )}
+      </Text>
+    )
+  }
+)
+
+ParticipantName.displayName = 'ParticipantName'
diff --git a/src/frontend/src/features/participants/components/ParticipantRow.tsx b/src/frontend/src/features/participants/components/ParticipantRow.tsx
index 1b9e0198..3e7efc11 100644
--- a/src/frontend/src/features/participants/components/ParticipantRow.tsx
+++ b/src/frontend/src/features/participants/components/ParticipantRow.tsx
@@ -26,6 +26,7 @@ import { ParticipantMenuButton } from './menu/ParticipantMenuButton'
 import { PinBadge } from './PinBadge'
 import { UnauthenticatedBadge } from './UnauthenticatedBadge'
 import { MuteAlertDialog } from '@/features/rooms/livekit/components/MuteAlertDialog'
+import { ParticipantName } from './ParticipantName'
 
 type MicIndicatorProps = {
   participant: Participant
@@ -111,59 +112,26 @@ export const ParticipantRow = ({ participant }: ParticipantListItemProps) => {
         width: 'full',
       })}
     >
-      <HStack>
-        <div
-          className={css({
-            position: 'relative',
-          })}
-        >
+      <HStack flex="1" minW="0">
+        <div className={css({ position: 'relative', flexShrink: 0 })}>
           <Avatar name={name} bgColor={getParticipantColor(participant)} />
           <PinBadge participant={participant} />
           <UnauthenticatedBadge participant={participant} />
         </div>
-        <VStack gap={0} alignItems="start">
-          <Text
-            variant="sm"
-            className={css({
-              userSelect: 'none',
-              cursor: 'default',
-              display: 'flex',
-            })}
-          >
-            <span
-              className={css({
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                maxWidth: '120px',
-                display: 'block',
-              })}
-            >
-              {name}
-            </span>
-            {isLocal(participant) && (
-              <span
-                className={css({
-                  marginLeft: '.25rem',
-                  whiteSpace: 'nowrap',
-                })}
-              >
-                ({t('participants.you')})
-              </span>
-            )}
+        <VStack gap={0} alignItems="start" minW="0" flex="1">
+          <ParticipantName
+            displayedName={name}
+            isLocal={isLocal(participant)}
+          />
+          <Text variant="xsNote">
+            {getParticipantIsRoomOwner(participant) && t('participants.host')}
+            {getParticipantIsRoomAdmin(participant) && t('participants.cohost')}
+            {getParticipantIsRoomMember(participant) &&
+              t('participants.member')}
           </Text>
-          {getParticipantIsRoomOwner(participant) && (
-            <Text variant="xsNote">{t('participants.host')}</Text>
-          )}
-          {getParticipantIsRoomAdmin(participant) && (
-            <Text variant="xsNote">{t('participants.cohost')}</Text>
-          )}
-          {getParticipantIsRoomMember(participant) && (
-            <Text variant="xsNote">{t('participants.member')}</Text>
-          )}
         </VStack>
       </HStack>
-      <HStack>
+      <HStack flexShrink={0}>
         <MicIndicator participant={participant} />
         <ParticipantMenuButton participant={participant} />
       </HStack>
diff --git a/src/frontend/src/features/participants/components/RaisedHandRow.tsx b/src/frontend/src/features/participants/components/RaisedHandRow.tsx
index 65572220..aa052692 100644
--- a/src/frontend/src/features/participants/components/RaisedHandRow.tsx
+++ b/src/frontend/src/features/participants/components/RaisedHandRow.tsx
@@ -1,7 +1,6 @@
 import { css } from '@/styled-system/css'
 
 import { HStack } from '@/styled-system/jsx'
-import { Text } from '@/primitives/Text'
 import { useTranslation } from 'react-i18next'
 import { Avatar } from '@/components/Avatar'
 import { useLowerHandParticipant } from '../api/lowerHandParticipant'
@@ -11,6 +10,7 @@ import { isLocal } from '@/utils/livekit'
 import { RiHand } from '@remixicon/react'
 import { Button } from '@/primitives'
 import { AdminOrOwnerOnly } from '@/features/rooms/components/AdminOrOwnerOnly'
+import { ParticipantName } from './ParticipantName'
 
 const ActionButton = ({
   participant,
@@ -42,9 +42,7 @@ type HandRaisedListItemProps = {
 }
 
 export const RaisedHandRow = ({ participant }: HandRaisedListItemProps) => {
-  const { t } = useTranslation('rooms')
   const name = participant.name || participant.identity
-
   return (
     <HStack
       role="listitem"
@@ -56,42 +54,15 @@ export const RaisedHandRow = ({ participant }: HandRaisedListItemProps) => {
         width: 'full',
       })}
     >
-      <HStack>
+      <HStack flex="1" minW="0" overflow="hidden">
         <Avatar name={name} bgColor={getParticipantColor(participant)} />
-        <Text
-          variant={'sm'}
-          className={css({
-            userSelect: 'none',
-            cursor: 'default',
-            display: 'flex',
-          })}
-        >
-          <span
-            className={css({
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              maxWidth: '120px',
-              display: 'block',
-            })}
-          >
-            {name}
-          </span>
-          {isLocal(participant) && (
-            <span
-              className={css({
-                marginLeft: '.25rem',
-                whiteSpace: 'nowrap',
-              })}
-            >
-              ({t('participants.you')})
-            </span>
-          )}
-        </Text>
+        <ParticipantName displayedName={name} isLocal={isLocal(participant)} />
+      </HStack>
+      <HStack flexShrink={0}>
+        <AdminOrOwnerOnly>
+          <ActionButton participant={participant} name={name} />
+        </AdminOrOwnerOnly>
       </HStack>
-      <AdminOrOwnerOnly>
-        <ActionButton participant={participant} name={name} />
-      </AdminOrOwnerOnly>
     </HStack>
   )
 }
diff --git a/src/frontend/src/features/participants/components/WaitingParticipantRow.tsx b/src/frontend/src/features/participants/components/WaitingParticipantRow.tsx
index 66cdeaeb..6babb8a8 100644
--- a/src/frontend/src/features/participants/components/WaitingParticipantRow.tsx
+++ b/src/frontend/src/features/participants/components/WaitingParticipantRow.tsx
@@ -1,10 +1,11 @@
-import { Button, Text } from '@/primitives'
+import { Button } from '@/primitives'
 import { HStack } from '@/styled-system/jsx'
 import { css } from '@/styled-system/css'
 import { Avatar } from '@/components/Avatar'
 import { useTranslation } from 'react-i18next'
 import { WaitingParticipant } from '../api/listWaitingParticipants'
 import { RiCloseLine } from '@remixicon/react'
+import { ParticipantName } from './ParticipantName'
 
 export const WaitingParticipantRow = ({
   participant,
@@ -26,42 +27,11 @@ export const WaitingParticipantRow = ({
         width: 'full',
       })}
     >
-      <HStack
-        className={css({
-          flex: '1',
-          minWidth: '0',
-        })}
-      >
+      <HStack flex="1" minW="0">
         <Avatar name={participant.username} bgColor={participant.color} />
-        <Text
-          variant={'sm'}
-          className={css({
-            userSelect: 'none',
-            cursor: 'default',
-            display: 'flex',
-            flex: '1',
-            minWidth: '0',
-          })}
-        >
-          <span
-            className={css({
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              width: '100%',
-              display: 'block',
-            })}
-          >
-            {participant.username}
-          </span>
-        </Text>
+        <ParticipantName displayedName={participant.username} isLocal={false} />
       </HStack>
-      <HStack
-        gap="0.25rem"
-        className={css({
-          flexShrink: '0',
-        })}
-      >
+      <HStack gap="0.25rem" flexShrink={0}>
         <Button
           size="sm"
           variant="tertiary"
diff --git a/src/frontend/src/primitives/VisualOnlyTooltip.tsx b/src/frontend/src/primitives/VisualOnlyTooltip.tsx
index 4f97bc11..fe252a01 100644
--- a/src/frontend/src/primitives/VisualOnlyTooltip.tsx
+++ b/src/frontend/src/primitives/VisualOnlyTooltip.tsx
@@ -16,24 +16,19 @@ export type VisualOnlyTooltipProps = {
   tooltip: string
   ariaLabel?: string
   tooltipPosition?: 'top' | 'bottom'
+  disabled?: boolean
+  className?: string
 }
 
-/**
- * Wrapper component that displays a tooltip visually only (not announced by screen readers).
- *
- * This is necessary because TooltipTrigger from react-aria-components automatically adds
- * aria-describedby on the button, which links the tooltip for accessibility.
- * Even with aria-hidden="true" on the tooltip, screen readers still announce its content → duplication.
- * This CSS wrapper avoids TooltipTrigger → no automatic aria-describedby → no duplication.
- *
- * Uses a portal to avoid being clipped by parent containers with overflow: hidden.
- */
-export const VisualOnlyTooltip = ({
+type VisualOnlyTooltipInnerProps = Omit<VisualOnlyTooltipProps, 'disabled'>
+
+const VisualOnlyTooltipInner = ({
   children,
   tooltip,
   ariaLabel,
+  className,
   tooltipPosition = 'top',
-}: VisualOnlyTooltipProps) => {
+}: VisualOnlyTooltipInnerProps) => {
   const [isVisible, setIsVisible] = useState(false)
   const { getContainer } = useUNSAFE_PortalContext()
   const wrapperRef = useRef<HTMLDivElement>(null)
@@ -135,6 +130,7 @@ export const VisualOnlyTooltip = ({
         onMouseLeave={hideTooltip}
         onFocus={showTooltip}
         onBlur={hideTooltip}
+        className={className}
       >
         {wrappedChild}
       </div>
@@ -183,3 +179,25 @@ export const VisualOnlyTooltip = ({
     </>
   )
 }
+
+/**
+ * Wrapper component that displays a tooltip visually only (not announced by screen readers).
+ *
+ * This is necessary because TooltipTrigger from react-aria-components automatically adds
+ * aria-describedby on the button, which links the tooltip for accessibility.
+ * Even with aria-hidden="true" on the tooltip, screen readers still announce its content → duplication.
+ * This CSS wrapper avoids TooltipTrigger → no automatic aria-describedby → no duplication.
+ *
+ * Uses a portal to avoid being clipped by parent containers with overflow: hidden.
+ */
+export const VisualOnlyTooltip = ({
+  children,
+  disabled,
+  ...props
+}: VisualOnlyTooltipProps) => {
+  if (disabled) {
+    return children
+  }
+
+  return <VisualOnlyTooltipInner {...props}>{children}</VisualOnlyTooltipInner>
+}