fix: Truncates overlapping name in contact table (#2208)

This commit is contained in:
Nithin David Thomas 2021-05-04 15:21:34 +05:30 committed by GitHub
parent 7c7f91e70f
commit 8bcac2aab0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -69,25 +69,28 @@ export default {
align: 'left', align: 'left',
width: 300, width: 300,
renderBodyCell: ({ row }) => ( renderBodyCell: ({ row }) => (
<button <WootButton
class="row--user-block cursor-pointer" variant="clear"
size="expanded"
onClick={() => this.onClickContact(row.id)} onClick={() => this.onClickContact(row.id)}
> >
<div class="row--user-block">
<Thumbnail <Thumbnail
src={row.thumbnail} src={row.thumbnail}
size="36px" size="36px"
username={row.name} username={row.name}
status={row.availability_status} status={row.availability_status}
/> />
<div> <div class="user-block">
<h6 class="sub-block-title user-name text-truncate"> <h6 class="sub-block-title user-name text-truncate">
{row.name} {row.name}
</h6> </h6>
<button class="button clear small"> <span class="button clear small">
{this.$t('CONTACTS_PAGE.LIST.VIEW_DETAILS')} {this.$t('CONTACTS_PAGE.LIST.VIEW_DETAILS')}
</button> </span>
</div> </div>
</button> </div>
</WootButton>
), ),
}, },
{ {
@ -225,6 +228,10 @@ export default {
display: flex; display: flex;
text-align: left; text-align: left;
.user-block {
min-width: 0;
}
.user-thumbnail-box { .user-thumbnail-box {
margin-right: var(--space-small); margin-right: var(--space-small);
} }