Fix ScrollableList class names regression

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

src/components/scrollable-list.tsx

@@ -71,6 +71,8 @@ interface IScrollableList extends VirtuosoProps<any, any> {
   onRefresh?: () => Promise<any>;
   /** 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<VirtuosoHandle, IScrollableList>(({
   onScrollToTop,
   onLoadMore,
   className,
+  listClassName,
   itemClassName,
   id,
   hasMore,
@@ -233,9 +236,10 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
       itemContent={renderItem}
       initialTopMostItemIndex={initialIndex}
       rangeChanged={handleRangeChange}
+      className={className}
       style={style}
       context={{
-        listClassName: className,
+        listClassName,
         itemClassName,
       }}
       components={{

src/components/status-list.tsx

@@ -232,7 +232,7 @@ const StatusList: React.FC<IStatusList> = ({
       placeholderComponent={() => <PlaceholderStatus variant={divideType === 'border' ? 'slim' : 'rounded'} />}
       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({

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 && (
           <LogItem key={item.id} log={item} />

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 => (
         <div key={id} className='px-5 py-4'>

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 && <Report id={report} key={report} />)}
     </ScrollableList>

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) =>
           <Domain key={domain} domain={domain} />,

src/features/group/group-tags.tsx

@@ -35,7 +35,7 @@ const GroupTopics: React.FC<IGroupTopics> = (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={
         <Stack space={4} className='pt-6' justifyContent='center' alignItems='center'>

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,
       })}

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,
             })

src/features/ui/components/modals/birthdays-modal.tsx

@@ -28,7 +28,7 @@ const BirthdaysModal = ({ onClose }: IBirthdaysModal) => {
       <ScrollableList
         scrollKey='birthdays'
         emptyMessage={emptyMessage}
-        className='max-w-full'
+        listClassName='max-w-full'
         itemClassName='pb-3'
       >
         {accountIds.map(id =>

src/features/ui/components/modals/dislikes-modal.tsx

@@ -40,7 +40,7 @@ const DislikesModal: React.FC<IDislikesModal> = ({ onClose, statusId }) => {
       <ScrollableList
         scrollKey='dislikes'
         emptyMessage={emptyMessage}
-        className='max-w-full'
+        listClassName='max-w-full'
         itemClassName='pb-3'
       >
         {accountIds.map(id =>

src/features/ui/components/modals/event-participants-modal.tsx

@@ -40,7 +40,7 @@ const EventParticipantsModal: React.FC<IEventParticipantsModal> = ({ onClose, st
       <ScrollableList
         scrollKey='event_participations'
         emptyMessage={emptyMessage}
-        className='max-w-full'
+        listClassName='max-w-full'
         itemClassName='pb-3'
       >
         {accountIds.map(id =>

src/features/ui/components/modals/favourites-modal.tsx

@@ -47,7 +47,7 @@ const FavouritesModal: React.FC<IFavouritesModal> = ({ onClose, statusId }) => {
       <ScrollableList
         scrollKey='favourites'
         emptyMessage={emptyMessage}
-        className='max-w-full'
+        listClassName='max-w-full'
         itemClassName='pb-3'
         style={{ height: '80vh' }}
         useWindowScroll={false}

src/features/ui/components/modals/mentions-modal.tsx

@@ -41,7 +41,7 @@ const MentionsModal: React.FC<IMentionsModal> = ({ onClose, statusId }) => {
     body = (
       <ScrollableList
         scrollKey='mentions'
-        className='max-w-full'
+        listClassName='max-w-full'
         itemClassName='pb-3'
       >
         {accountIds.map(id =>

src/features/ui/components/modals/reactions-modal.tsx

@@ -98,9 +98,10 @@ const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, reaction
       <ScrollableList
         scrollKey='reactions'
         emptyMessage={emptyMessage}
-        className={clsx('max-w-full', {
+        className={clsx({
           'mt-4': reactions.size > 0,
         })}
+        listClassName='max-w-full'
         itemClassName='pb-3'
       >
         {accounts.map((account) =>

src/features/ui/components/modals/reblogs-modal.tsx

@@ -48,7 +48,7 @@ const ReblogsModal: React.FC<IReblogsModal> = ({ onClose, statusId }) => {
       <ScrollableList
         scrollKey='reblogs'
         emptyMessage={emptyMessage}
-        className='max-w-full'
+        listClassName='max-w-full'
         itemClassName='pb-3'
         style={{ height: '80vh' }}
         useWindowScroll={false}