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

[Glitch] Fix overflow behavior of account rows 

Port 5fae2de454 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
th-new
Claire 2023-06-01 14:47:55 +02:00
parent 98a7b95058
commit f1691eca55
2 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/javascript/flavours/glitch/components/account.jsx
View File

@ -144,7 +144,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 (
@ -155,9 +155,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>
</Permalink>

17
app/javascript/flavours/glitch/styles/components/accounts.scss
View File

@ -763,11 +763,28 @@
}
}
.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;
white-space: nowrap;
> span {
overflow: hidden;
text-overflow: ellipsis;
}
a {
color: inherit;