diff --git a/src/components/scrollable-list.tsx b/src/components/scrollable-list.tsx index ffce6e844..8a352034a 100644 --- a/src/components/scrollable-list.tsx +++ b/src/components/scrollable-list.tsx @@ -71,6 +71,8 @@ interface IScrollableList extends VirtuosoProps { onRefresh?: () => Promise; /** Extra class names on the Virtuoso element. */ className?: string; + /** Extra class names on the list element. */ + listClassName?: string; /** Class names on each item container. */ itemClassName?: string; /** `id` attribute on the Virtuoso element. */ @@ -96,6 +98,7 @@ const ScrollableList = React.forwardRef(({ onScrollToTop, onLoadMore, className, + listClassName, itemClassName, id, hasMore, @@ -233,9 +236,10 @@ const ScrollableList = React.forwardRef(({ itemContent={renderItem} initialTopMostItemIndex={initialIndex} rangeChanged={handleRangeChange} + className={className} style={style} context={{ - listClassName: className, + listClassName, itemClassName, }} components={{ diff --git a/src/components/status-list.tsx b/src/components/status-list.tsx index ed1f391b1..621a659f0 100644 --- a/src/components/status-list.tsx +++ b/src/components/status-list.tsx @@ -232,7 +232,7 @@ const StatusList: React.FC = ({ placeholderComponent={() => } placeholderCount={20} ref={node} - className={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', { + listClassName={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', { 'divide-none': divideType !== 'border', }, className)} itemClassName={clsx({ diff --git a/src/features/admin/moderation-log.tsx b/src/features/admin/moderation-log.tsx index 6486185eb..004d87997 100644 --- a/src/features/admin/moderation-log.tsx +++ b/src/features/admin/moderation-log.tsx @@ -56,7 +56,7 @@ const ModerationLog = () => { emptyMessage={intl.formatMessage(messages.emptyMessage)} hasMore={hasMore} onLoadMore={handleLoadMore} - className='divide-y divide-solid divide-gray-200 dark:divide-gray-800' + listClassName='divide-y divide-solid divide-gray-200 dark:divide-gray-800' > {items.map(item => item && ( diff --git a/src/features/admin/tabs/awaiting-approval.tsx b/src/features/admin/tabs/awaiting-approval.tsx index b59a9a56c..1b2d0c6a6 100644 --- a/src/features/admin/tabs/awaiting-approval.tsx +++ b/src/features/admin/tabs/awaiting-approval.tsx @@ -33,7 +33,7 @@ const AwaitingApproval: React.FC = () => { showLoading={showLoading} scrollKey='awaiting-approval' emptyMessage={intl.formatMessage(messages.emptyMessage)} - className='divide-y divide-solid divide-gray-200 dark:divide-gray-800' + listClassName='divide-y divide-solid divide-gray-200 dark:divide-gray-800' > {accountIds.map(id => (
diff --git a/src/features/admin/tabs/reports.tsx b/src/features/admin/tabs/reports.tsx index d066f34e1..99ed6be91 100644 --- a/src/features/admin/tabs/reports.tsx +++ b/src/features/admin/tabs/reports.tsx @@ -35,7 +35,7 @@ const Reports: React.FC = () => { showLoading={showLoading} scrollKey='admin-reports' emptyMessage={intl.formatMessage(messages.emptyMessage)} - className='divide-y divide-solid divide-gray-200 dark:divide-gray-800' + listClassName='divide-y divide-solid divide-gray-200 dark:divide-gray-800' > {reports.map(report => report && )} diff --git a/src/features/domain-blocks/index.tsx b/src/features/domain-blocks/index.tsx index 17d6f4757..cf8978ad9 100644 --- a/src/features/domain-blocks/index.tsx +++ b/src/features/domain-blocks/index.tsx @@ -45,7 +45,7 @@ const DomainBlocks: React.FC = () => { onLoadMore={() => handleLoadMore(dispatch)} hasMore={hasMore} emptyMessage={emptyMessage} - className='divide-y divide-gray-200 dark:divide-gray-800' + listClassName='divide-y divide-gray-200 dark:divide-gray-800' > {domains.map((domain) => , diff --git a/src/features/group/group-tags.tsx b/src/features/group/group-tags.tsx index 5bbf5364c..e3b65b5f4 100644 --- a/src/features/group/group-tags.tsx +++ b/src/features/group/group-tags.tsx @@ -35,7 +35,7 @@ const GroupTopics: React.FC = (props) => { showLoading={!group || isLoading && tags.length === 0} placeholderComponent={PlaceholderAccount} placeholderCount={3} - className='divide-y divide-solid divide-gray-300 dark:divide-gray-800' + listClassName='divide-y divide-solid divide-gray-300 dark:divide-gray-800' itemClassName='py-3 last:pb-0' emptyMessage={ diff --git a/src/features/notifications/index.tsx b/src/features/notifications/index.tsx index 174041990..870ce8ad1 100644 --- a/src/features/notifications/index.tsx +++ b/src/features/notifications/index.tsx @@ -164,7 +164,7 @@ const Notifications = () => { onLoadMore={handleLoadOlder} onScrollToTop={handleScrollToTop} onScroll={handleScroll} - className={clsx({ + listClassName={clsx({ 'divide-y divide-gray-200 black:divide-gray-800 dark:divide-primary-800 divide-solid': notifications.size > 0, 'space-y-2': notifications.size === 0, })} diff --git a/src/features/status/components/thread.tsx b/src/features/status/components/thread.tsx index ada189026..b6a7c4514 100644 --- a/src/features/status/components/thread.tsx +++ b/src/features/status/components/thread.tsx @@ -445,7 +445,7 @@ const Thread = (props: IThread) => { initialTopMostItemIndex={initialTopMostItemIndex} useWindowScroll={useWindowScroll} itemClassName={itemClassName} - className={ + listClassName={ clsx({ 'h-full': !useWindowScroll, }) diff --git a/src/features/ui/components/modals/birthdays-modal.tsx b/src/features/ui/components/modals/birthdays-modal.tsx index 01afe0db0..d6d17781a 100644 --- a/src/features/ui/components/modals/birthdays-modal.tsx +++ b/src/features/ui/components/modals/birthdays-modal.tsx @@ -28,7 +28,7 @@ const BirthdaysModal = ({ onClose }: IBirthdaysModal) => { {accountIds.map(id => diff --git a/src/features/ui/components/modals/dislikes-modal.tsx b/src/features/ui/components/modals/dislikes-modal.tsx index fadfef168..7689d7047 100644 --- a/src/features/ui/components/modals/dislikes-modal.tsx +++ b/src/features/ui/components/modals/dislikes-modal.tsx @@ -40,7 +40,7 @@ const DislikesModal: React.FC = ({ onClose, statusId }) => { {accountIds.map(id => diff --git a/src/features/ui/components/modals/event-participants-modal.tsx b/src/features/ui/components/modals/event-participants-modal.tsx index bb8614d47..85324546d 100644 --- a/src/features/ui/components/modals/event-participants-modal.tsx +++ b/src/features/ui/components/modals/event-participants-modal.tsx @@ -40,7 +40,7 @@ const EventParticipantsModal: React.FC = ({ onClose, st {accountIds.map(id => diff --git a/src/features/ui/components/modals/favourites-modal.tsx b/src/features/ui/components/modals/favourites-modal.tsx index 9fd1fbf57..d2b9b9ea7 100644 --- a/src/features/ui/components/modals/favourites-modal.tsx +++ b/src/features/ui/components/modals/favourites-modal.tsx @@ -47,7 +47,7 @@ const FavouritesModal: React.FC = ({ onClose, statusId }) => { = ({ onClose, statusId }) => { body = ( {accountIds.map(id => diff --git a/src/features/ui/components/modals/reactions-modal.tsx b/src/features/ui/components/modals/reactions-modal.tsx index 8b9c923cf..431430edf 100644 --- a/src/features/ui/components/modals/reactions-modal.tsx +++ b/src/features/ui/components/modals/reactions-modal.tsx @@ -98,9 +98,10 @@ const ReactionsModal: React.FC = ({ onClose, statusId, reaction 0, })} + listClassName='max-w-full' itemClassName='pb-3' > {accounts.map((account) => diff --git a/src/features/ui/components/modals/reblogs-modal.tsx b/src/features/ui/components/modals/reblogs-modal.tsx index c86c731ad..5107fa881 100644 --- a/src/features/ui/components/modals/reblogs-modal.tsx +++ b/src/features/ui/components/modals/reblogs-modal.tsx @@ -48,7 +48,7 @@ const ReblogsModal: React.FC = ({ onClose, statusId }) => {