diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx index 249b0d5c77..d4ebd2801a 100644 --- a/app/javascript/flavours/glitch/components/account.jsx +++ b/app/javascript/flavours/glitch/components/account.jsx @@ -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> diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 1330b412e7..7b265c9c35 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -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;