gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-09-05 17:31:12 +00:00
Code Issues Actions 34 Packages Projects Releases Wiki Activity

Fix layout shift caused by "Who to follow" widget (#35861)

Browse Source
This commit is contained in:
diondiondion 2025-08-22 11:44:10 +02:00 committed by GitHub
parent 4f494781c1
commit 511e10df34
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/javascript/mastodon/features/home_timeline/components/inline_follow_suggestions.tsx
View File

@ -19,6 +19,7 @@ import { DisplayName } from 'mastodon/components/display_name';
import { FollowButton } from 'mastodon/components/follow_button';
import { Icon } from 'mastodon/components/icon';
import { IconButton } from 'mastodon/components/icon_button';
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
import { VerifiedBadge } from 'mastodon/components/verified_badge';
import { domain } from 'mastodon/initial_state';
import { useAppDispatch, useAppSelector } from 'mastodon/store';
@ -56,9 +57,7 @@ const messages = defineMessages({
},
});
const Source: React.FC<{
id: ApiSuggestionSourceJSON;
}> = ({ id }) => {
const Source: React.FC<{ id: ApiSuggestionSourceJSON }> = ({ id }) => {
const intl = useIntl();
let label, hint;
@ -168,9 +167,9 @@ const Card: React.FC<{
const DISMISSIBLE_ID = 'home/follow-suggestions';
export const InlineFollowSuggestions: React.FC<{
hidden?: boolean;
}> = ({ hidden }) => {
export const InlineFollowSuggestions: React.FC<{ hidden?: boolean }> = ({
hidden,
}) => {
const intl = useIntl();
const dispatch = useAppDispatch();
const suggestions = useAppSelector((state) => state.suggestions.items);
@ -288,13 +287,17 @@ export const InlineFollowSuggestions: React.FC<{
ref={bodyRef}
onScroll={handleScroll}
>
{suggestions.map((suggestion) => (
{isLoading ? (
<LoadingIndicator />
) : (
suggestions.map((suggestion) => (
<Card
key={suggestion.account_id}
id={suggestion.account_id}
sources={suggestion.sources}
/>
))}
))
)}
</div>
{canScrollLeft && (

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

@ -10448,8 +10448,10 @@ noscript {
}
&__scrollable {
box-sizing: border-box;
display: flex;
flex-wrap: nowrap;
min-height: 228px;
gap: 16px;
padding: 16px;
scroll-snap-type: x mandatory;