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'));
|
const firstVerifiedField = account.get('fields').find(item => !!item.get('verified_at'));
|
||||||
|
|
||||||
if (firstVerifiedField) {
|
if (firstVerifiedField) {
|
||||||
verification = <>· <VerifiedBadge link={firstVerifiedField.get('value')} /></>;
|
verification = <VerifiedBadge link={firstVerifiedField.get('value')} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -154,9 +154,13 @@ class Account extends ImmutablePureComponent {
|
||||||
<Avatar account={account} size={size} />
|
<Avatar account={account} size={size} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div className='account__contents'>
|
||||||
<DisplayName account={account} />
|
<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>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
|
|
|
@ -7814,13 +7814,28 @@ noscript {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.account__contents {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account__details {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
column-gap: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
.verified-badge {
|
.verified-badge {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: $valid-value-color;
|
color: $valid-value-color;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
white-space: nowrap;
|
||||||
|
|
||||||
|
> span {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
Loading…
Reference in New Issue