From 5ce825a5f873fc9409d7309d8abe207ad980fb70 Mon Sep 17 00:00:00 2001
From: Jon <jon@daily.co>
Date: Thu, 17 Jun 2021 13:41:19 +0100
Subject: [PATCH] truncate long names with an ellipsis

---
 dailyjs/shared/components/Aside/PeopleAside.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/dailyjs/shared/components/Aside/PeopleAside.js b/dailyjs/shared/components/Aside/PeopleAside.js
index ea61c93..6a72c5d 100644
--- a/dailyjs/shared/components/Aside/PeopleAside.js
+++ b/dailyjs/shared/components/Aside/PeopleAside.js
@@ -12,7 +12,7 @@ import { Button } from '../Button';
 
 const PersonRow = ({ participant, isOwner = false }) => (
   <div className="person-row">
-    <div>
+    <div className="name">
       {participant.name} {participant.isLocal && '(You)'}
     </div>
     <div className="actions">
@@ -57,9 +57,16 @@ const PersonRow = ({ participant, isOwner = false }) => (
         justify-content: space-between;
         align-items: center;
       }
+
+      .person-row .name {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
       .person-row .actions {
         display: flex;
         gap: var(--spacing-xxxs);
+        margin-left: var(--spacing-xs);
       }
 
       .mute-state {