diff --git a/app/soapbox/features/ui/components/modals/birthdays-modal.tsx b/app/soapbox/features/ui/components/modals/birthdays-modal.tsx index 2eb9504ec..fa5fd36de 100644 --- a/app/soapbox/features/ui/components/modals/birthdays-modal.tsx +++ b/app/soapbox/features/ui/components/modals/birthdays-modal.tsx @@ -28,6 +28,7 @@ const BirthdaysModal = ({ onClose }: IBirthdaysModal) => { {accountIds.map(id => diff --git a/app/soapbox/features/ui/components/modals/event-participants-modal.tsx b/app/soapbox/features/ui/components/modals/event-participants-modal.tsx index c975ea22c..1bb6844e6 100644 --- a/app/soapbox/features/ui/components/modals/event-participants-modal.tsx +++ b/app/soapbox/features/ui/components/modals/event-participants-modal.tsx @@ -2,7 +2,8 @@ import React, { useEffect } from 'react'; import { FormattedMessage } from 'react-intl'; import { fetchEventParticipations } from 'soapbox/actions/events'; -import { Modal, Spinner, Stack } from 'soapbox/components/ui'; +import ScrollableList from 'soapbox/components/scrollable-list'; +import { Modal, Spinner } from 'soapbox/components/ui'; import AccountContainer from 'soapbox/containers/account-container'; import { useAppDispatch, useAppSelector } from 'soapbox/hooks'; @@ -33,16 +34,19 @@ const EventParticipantsModal: React.FC = ({ onClose, st if (!accountIds) { body = ; } else { + const emptyMessage = ; + body = ( - - {accountIds.size > 0 ? ( - accountIds.map((id) => - , - ) - ) : ( - + + {accountIds.map(id => + , )} - + ); } diff --git a/app/soapbox/features/ui/components/modals/favourites-modal.tsx b/app/soapbox/features/ui/components/modals/favourites-modal.tsx index 9e2b72a61..e8ec1db39 100644 --- a/app/soapbox/features/ui/components/modals/favourites-modal.tsx +++ b/app/soapbox/features/ui/components/modals/favourites-modal.tsx @@ -2,7 +2,8 @@ import React, { useEffect } from 'react'; import { FormattedMessage } from 'react-intl'; import { fetchFavourites } from 'soapbox/actions/interactions'; -import { Modal, Spinner, Stack } from 'soapbox/components/ui'; +import ScrollableList from 'soapbox/components/scrollable-list'; +import { Modal, Spinner } from 'soapbox/components/ui'; import AccountContainer from 'soapbox/containers/account-container'; import { useAppDispatch, useAppSelector } from 'soapbox/hooks'; @@ -33,16 +34,19 @@ const FavouritesModal: React.FC = ({ onClose, statusId }) => { if (!accountIds) { body = ; } else { + const emptyMessage = ; + body = ( - - {accountIds.size > 0 ? ( - accountIds.map((id) => - , - ) - ) : ( - + + {accountIds.map(id => + , )} - + ); } diff --git a/app/soapbox/features/ui/components/modals/mentions-modal.tsx b/app/soapbox/features/ui/components/modals/mentions-modal.tsx index 1df00fb08..d131687c2 100644 --- a/app/soapbox/features/ui/components/modals/mentions-modal.tsx +++ b/app/soapbox/features/ui/components/modals/mentions-modal.tsx @@ -41,6 +41,7 @@ const MentionsModal: React.FC = ({ onClose, statusId }) => { body = ( {accountIds.map(id => diff --git a/app/soapbox/features/ui/components/modals/reactions-modal.tsx b/app/soapbox/features/ui/components/modals/reactions-modal.tsx index 60c8bd158..7afe96f86 100644 --- a/app/soapbox/features/ui/components/modals/reactions-modal.tsx +++ b/app/soapbox/features/ui/components/modals/reactions-modal.tsx @@ -1,3 +1,4 @@ +import classNames from 'clsx'; import { List as ImmutableList } from 'immutable'; import React, { useEffect, useState } from 'react'; import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; @@ -84,7 +85,9 @@ const ReactionsModal: React.FC = ({ onClose, statusId, reaction 0, + })} itemClassName='pb-3' > {accounts.map((account) => diff --git a/app/soapbox/features/ui/components/modals/reblogs-modal.tsx b/app/soapbox/features/ui/components/modals/reblogs-modal.tsx index 526e7507f..6f5e7d70c 100644 --- a/app/soapbox/features/ui/components/modals/reblogs-modal.tsx +++ b/app/soapbox/features/ui/components/modals/reblogs-modal.tsx @@ -41,6 +41,7 @@ const ReblogsModal: React.FC = ({ onClose, statusId }) => { {accountIds.map((id) =>