💄(frontend) truncate pinned participant name with ellipsis on overflow

Long participant names are now truncated with an ellipsis.

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to
 ### Fixed
 
 - 🐛(migrations) use settings in migrations #1058
+- 💄(frontend) truncate pinned participant name with ellipsis on overflow #1056
 
 ## [1.9.0] - 2026-03-02
 

src/frontend/src/features/rooms/livekit/components/ParticipantName.tsx

@@ -1,8 +1,21 @@
+import type { CSSProperties } from 'react'
 import { Text } from '@/primitives'
 import { useTranslation } from 'react-i18next'
 import { useParticipantInfo } from '@livekit/components-react'
 import { Participant } from 'livekit-client'
 
+const participantNameStyles: CSSProperties = {
+  paddingBottom: '0.1rem',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+}
+
+const participantNameScreenShareStyles: CSSProperties = {
+  ...participantNameStyles,
+  marginLeft: '0.4rem',
+}
+
 export const ParticipantName = ({
   participant,
   isScreenShare = false,
@@ -17,26 +30,14 @@ export const ParticipantName = ({
 
   if (isScreenShare) {
     return (
-      <Text
+      <Text variant="sm" style={participantNameScreenShareStyles}>
-        variant="sm"
-        style={{
-          paddingBottom: '0.1rem',
-          marginLeft: '0.4rem',
-        }}
-      >
         {t('screenShare', { name: displayedName })}
       </Text>
     )
   }
 
   return (
-    <Text
+    <Text variant="sm" style={participantNameStyles} aria-hidden="true">
-      variant="sm"
-      style={{
-        paddingBottom: '0.1rem',
-      }}
-      aria-hidden="true"
-    >
       {displayedName}
     </Text>
   )

src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx

@@ -183,7 +183,7 @@ export const ParticipantTile: (
                       }}
                     >
                       {isHandRaised && !isScreenShare && (
-                        <>
+                        <span>
                           <span>{positionInQueue}</span>
                           <RiHand
                             color="black"
@@ -197,7 +197,7 @@ export const ParticipantTile: (
                               animationIterationCount: '2',
                             }}
                           />
-                        </>
+                        </span>
                       )}
                       {isScreenShare && (
                         <ScreenShareIcon
@@ -210,10 +210,12 @@ export const ParticipantTile: (
                       {isEncrypted && !isScreenShare && (
                         <LockLockedIcon style={{ marginRight: '0.25rem' }} />
                       )}
-                      <ParticipantName
+                      <div className="lk-participant-name-wrapper">
-                        isScreenShare={isScreenShare}
+                        <ParticipantName
-                        participant={trackReference.participant}
+                          isScreenShare={isScreenShare}
-                      />
+                          participant={trackReference.participant}
+                        />
+                      </div>
                     </div>
                   </HStack>
                   <ConnectionQualityIndicator className="lk-participant-metadata-item" />

src/frontend/src/styles/livekit.css

@@ -151,3 +151,24 @@
 [data-lk-theme] .lk-participant-tile {
   box-shadow: var(--lk-box-shadow);
 }
+
+/* Participant name ellipsis: truncate when overflowing */
+.lk-participant-metadata {
+  width: 100%;
+}
+.lk-participant-metadata > *:first-child {
+  min-width: 0;
+}
+.lk-participant-metadata > *:first-child {
+  flex: 1;
+}
+.lk-participant-metadata > *:first-child .lk-participant-metadata-item,
+.lk-participant-metadata
+  .lk-participant-metadata-item
+  .lk-participant-name-wrapper {
+  min-width: 0;
+}
+.lk-participant-metadata > *:first-child .lk-participant-metadata-item {
+  display: flex;
+  align-items: center;
+}