Fix overflow behavior of account rows (#25131)
This commit is contained in:
parent
8884d1ece0
commit
5fae2de454
|
@ -143,7 +143,7 @@ class Account extends ImmutablePureComponent {
|
|||
const firstVerifiedField = account.get('fields').find(item => !!item.get('verified_at'));
|
||||
|
||||
if (firstVerifiedField) {
|
||||
verification = <>· <VerifiedBadge link={firstVerifiedField.get('value')} /></>;
|
||||
verification = <VerifiedBadge link={firstVerifiedField.get('value')} />;
|
||||
}
|
||||
|
||||
return (
|
||||
|
@ -154,9 +154,13 @@ class Account extends ImmutablePureComponent {
|
|||
<Avatar account={account} size={size} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className='account__contents'>
|
||||
<DisplayName account={account} />
|
||||
{!minimal && <><ShortNumber value={account.get('followers_count')} renderer={counterRenderer('followers')} /> {verification} {muteTimeRemaining}</>}
|
||||
{!minimal && (
|
||||
<div className='account__details'>
|
||||
<ShortNumber value={account.get('followers_count')} renderer={counterRenderer('followers')} /> {verification} {muteTimeRemaining}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
|
|
|
@ -7814,13 +7814,28 @@ noscript {
|
|||
}
|
||||
}
|
||||
|
||||
.account__contents {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.account__details {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 1em;
|
||||
}
|
||||
|
||||
.verified-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: $valid-value-color;
|
||||
gap: 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
> span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
|
|
Loading…
Reference in New Issue