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 ( - + {t('screenShare', { name: displayedName })} ) } return ( -