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)}
> >
<Thumbnail <div class="row--user-block">
src={row.thumbnail} <Thumbnail
size="36px" src={row.thumbnail}
username={row.name} size="36px"
status={row.availability_status} username={row.name}
/> status={row.availability_status}
<div> />
<h6 class="sub-block-title user-name text-truncate"> <div class="user-block">
{row.name} <h6 class="sub-block-title user-name text-truncate">
</h6> {row.name}
<button class="button clear small"> </h6>
{this.$t('CONTACTS_PAGE.LIST.VIEW_DETAILS')} <span class="button clear small">
</button> {this.$t('CONTACTS_PAGE.LIST.VIEW_DETAILS')}
</span>
</div>
</div> </div>
</button> </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);
} }