chinwag/chinwagsocial
chinwag/chinwagsocial
2
0
Fork 0
Code Issues Pull requests Releases 14 Wiki Activity

fix: Fix cramped layout of follower recommendations on small viewports (#34967)

Browse source
This commit is contained in:
diondiondion 2025-06-11 17:15:12 +02:00 • committed by GitHub
commit 2c828748a3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 266 additions and 170 deletions
Download patch file Download diff file Expand all files Collapse all files

117
app/javascript/mastodon/components/account.tsx
View file

@ -71,6 +71,7 @@ interface AccountProps {
minimal?: boolean;
defaultAction?: 'block' | 'mute';
withBio?: boolean;
withMenu?: boolean;
}
export const Account: React.FC<AccountProps> = ({
@ -80,6 +81,7 @@ export const Account: React.FC<AccountProps> = ({
minimal,
defaultAction,
withBio,
withMenu = true,
}) => {
const intl = useIntl();
const { signedIn } = useIdentity();
@ -225,9 +227,10 @@ export const Account: React.FC<AccountProps> = ({
);
}
let button: React.ReactNode, dropdown: React.ReactNode;
let button: React.ReactNode;
let dropdown: React.ReactNode;
if (menu.length > 0) {
if (menu.length > 0 && withMenu) {
dropdown = (
<Dropdown
items={menu}
@ -279,42 +282,68 @@ export const Account: React.FC<AccountProps> = ({
}
return (
<div className={classNames('account', { 'account--minimal': minimal })}>
<div className='account__wrapper'>
<Link
className='account__display-name'
title={account?.acct}
to={`/@${account?.acct}`}
data-hover-card-account={id}
>
<div className='account__avatar-wrapper'>
{account ? (
<Avatar account={account} size={size} />
<div
className={classNames('account', {
'account--minimal': minimal,
})}
>
<div
className={classNames('account__wrapper', {
'account__wrapper--with-bio': account && withBio,
})}
>
<div className='account__info-wrapper'>
<Link
className='account__display-name'
title={account?.acct}
to={`/@${account?.acct}`}
data-hover-card-account={id}
>
<div className='account__avatar-wrapper'>
{account ? (
<Avatar account={account} size={size} />
) : (
<Skeleton width={size} height={size} />
)}
</div>
<div className='account__contents'>
<DisplayName account={account} />
{!minimal && (
<div className='account__details'>
{account ? (
<>
<ShortNumber
value={account.followers_count}
renderer={FollowersCounter}
/>{' '}
{verification} {muteTimeRemaining}
</>
) : (
<Skeleton width='7ch' />
)}
</div>
)}
</div>
</Link>
{account &&
withBio &&
(account.note.length > 0 ? (
<div
className='account__note translate'
dangerouslySetInnerHTML={{ __html: account.note_emojified }}
/>
) : (
<Skeleton width={size} height={size} />
)}
</div>
<div className='account__contents'>
<DisplayName account={account} />
{!minimal && (
<div className='account__details'>
{account ? (
<>
<ShortNumber
value={account.followers_count}
renderer={FollowersCounter}
/>{' '}
{verification} {muteTimeRemaining}
</>
) : (
<Skeleton width='7ch' />
)}
<div className='account__note account__note--missing'>
<FormattedMessage
id='account.no_bio'
defaultMessage='No description provided.'
/>
</div>
)}
</div>
</Link>
))}
</div>
{!minimal && (
<div className='account__relationship'>
@ -323,22 +352,6 @@ export const Account: React.FC<AccountProps> = ({
</div>
)}
</div>
{account &&
withBio &&
(account.note.length > 0 ? (
<div
className='account__note translate'
dangerouslySetInnerHTML={{ __html: account.note_emojified }}
/>
) : (
<div className='account__note account__note--missing'>
<FormattedMessage
id='account.no_bio'
defaultMessage='No description provided.'
/>
</div>
))}
</div>
);
};

4
app/javascript/mastodon/components/avatar.tsx
View file

@ -18,6 +18,7 @@ interface Props {
withLink?: boolean;
counter?: number | string;
counterBorderColor?: string;
className?: string;
}
export const Avatar: React.FC<Props> = ({
@ -27,6 +28,7 @@ export const Avatar: React.FC<Props> = ({
inline = false,
withLink = false,
style: styleFromParent,
className,
counter,
counterBorderColor,
}) => {
@ -52,7 +54,7 @@ export const Avatar: React.FC<Props> = ({
const avatar = (
<div
className={classNames('account__avatar', {
className={classNames(className, 'account__avatar', {
'account__avatar--inline': inline,
'account__avatar--loading': loading,
})}