From 85de214ca726437f7e9afe46fa10e8a4cfbeecd6 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Mon, 2 Mar 2026 16:05:31 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20truncate=20pinned=20pa?=
 =?UTF-8?q?rticipant=20name=20with=20ellipsis=20on=20overflow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Long participant names are now truncated with an ellipsis.
---
 CHANGELOG.md                                  |  1 +
 .../livekit/components/ParticipantName.tsx    | 29 ++++++++++---------
 .../livekit/components/ParticipantTile.tsx    | 14 +++++----
 src/frontend/src/styles/livekit.css           | 21 ++++++++++++++
 4 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3474d5dd..07c79b8c 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantName.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantName.tsx
index 85739656..a5818975 100644
--- a/src/frontend/src/features/rooms/livekit/components/ParticipantName.tsx
+++ b/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
-        variant="sm"
-        style={{
-          paddingBottom: '0.1rem',
-          marginLeft: '0.4rem',
-        }}
-      >
+      <Text variant="sm" style={participantNameScreenShareStyles}>
         {t('screenShare', { name: displayedName })}
       </Text>
     )
   }
 
   return (
-    <Text
-      variant="sm"
-      style={{
-        paddingBottom: '0.1rem',
-      }}
-      aria-hidden="true"
-    >
+    <Text variant="sm" style={participantNameStyles} aria-hidden="true">
       {displayedName}
     </Text>
   )
diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
index d2effed4..7a4f29bb 100644
--- a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
+++ b/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
-                        isScreenShare={isScreenShare}
-                        participant={trackReference.participant}
-                      />
+                      <div className="lk-participant-name-wrapper">
+                        <ParticipantName
+                          isScreenShare={isScreenShare}
+                          participant={trackReference.participant}
+                        />
+                      </div>
                     </div>
                   </HStack>
                   <ConnectionQualityIndicator className="lk-participant-metadata-item" />
diff --git a/src/frontend/src/styles/livekit.css b/src/frontend/src/styles/livekit.css
index 07164ac0..b436cbe7 100644
--- a/src/frontend/src/styles/livekit.css
+++ b/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;
+}