jeffemmett
/
daily-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

truncate long names with an ellipsis

This commit is contained in:
Jon 2021-06-17 13:41:19 +01:00
parent b69c89e4d5
commit 5ce825a5f8
1 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
dailyjs/shared/components/Aside/PeopleAside.js
View File

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