diff --git a/services/app/src/components/team/SpectatorTeamMember.jsx b/services/app/src/components/team/SpectatorTeamMember.jsx
index 89a10daa..06c54988 100644
--- a/services/app/src/components/team/SpectatorTeamMember.jsx
+++ b/services/app/src/components/team/SpectatorTeamMember.jsx
@@ -10,7 +10,7 @@ const SpectatorTeamMember = ({ index, name, spectatorId, currentPlayerId }) => (
     </div>
 
     <div className="team-list-item-name">
-      {name}
+      {name && name.substring(0, 20) + (name.length > 20 ? '...' : '')}
       {' '}
       { currentPlayerId === spectatorId && <span className='font-size-xs'>(you)</span> }
     </div>
diff --git a/services/app/src/components/team/VoterRow.jsx b/services/app/src/components/team/VoterRow.jsx
index cbe7f322..4c8a375c 100644
--- a/services/app/src/components/team/VoterRow.jsx
+++ b/services/app/src/components/team/VoterRow.jsx
@@ -7,7 +7,7 @@ const VoterRow = ({ name, currentPlayerId, playerId, addon }) => (
     <UserAvatar size='m' playerId={playerId} dataTestId={`team-list-${playerId}`} />
 
     <div className="team-list-item-name">
-      {name}
+      {name && name.substring(0, 20) + (name.length > 20 ? '...' : '')}
       {' '}
       { currentPlayerId === playerId && <span>(you)</span> }
     </div>