treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Fix overflow behavior of account rows (#25131)

pull/62/head
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')); 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>

15
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 { .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;
white-space: nowrap;
> span {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
}
a { a {
color: inherit; color: inherit;