fix: Truncates overlapping name in contact table (#2208)
This commit is contained in:
parent
7c7f91e70f
commit
8bcac2aab0
1 changed files with 23 additions and 16 deletions
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue