gearheads
/
mastodon
Archived
2
0
Fork 0
Code Releases 4 Activity

Fix overflow behavior of account rows (#25131)

gh/dev
Claire 2023-06-01 14:47:55 +02:00 committed by GitHub
parent 8884d1ece0
commit 5fae2de454
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/javascript/mastodon/components/account.jsx
View File

@ -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>

17
app/javascript/styles/mastodon/components.scss
View File

@ -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;