Truncate account names in modals

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

app/soapbox/features/ui/components/modals/birthdays-modal.tsx

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

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<IEventParticipantsModal> = ({ onClose, st
   if (!accountIds) {
     body = <Spinner />;
   } else {
+    const emptyMessage = <FormattedMessage id='empty_column.event_participants' defaultMessage='No one joined this event yet. When someone does, they will show up here.' />;
+
     body = (
-      <Stack space={3}>
-        {accountIds.size > 0 ? (
-          accountIds.map((id) =>
-            <AccountContainer key={id} id={id} />,
-          )
-        ) : (
-          <FormattedMessage id='empty_column.event_participants' defaultMessage='No one joined this event yet. When someone does, they will show up here.' />
+      <ScrollableList
+        scrollKey='event_participations'
+        emptyMessage={emptyMessage}
+        className='max-w-full'
+        itemClassName='pb-3'
+      >
+        {accountIds.map(id =>
+          <AccountContainer key={id} id={id} />,
         )}
-      </Stack>
+      </ScrollableList>
     );
   }
 

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<IFavouritesModal> = ({ onClose, statusId }) => {
   if (!accountIds) {
     body = <Spinner />;
   } else {
+    const emptyMessage = <FormattedMessage id='empty_column.favourites' defaultMessage='No one has liked this post yet. When someone does, they will show up here.' />;
+
     body = (
-      <Stack space={3}>
-        {accountIds.size > 0 ? (
-          accountIds.map((id) =>
-            <AccountContainer key={id} id={id} />,
-          )
-        ) : (
-          <FormattedMessage id='empty_column.favourites' defaultMessage='No one has liked this post yet. When someone does, they will show up here.' />
+      <ScrollableList
+        scrollKey='favourites'
+        emptyMessage={emptyMessage}
+        className='max-w-full'
+        itemClassName='pb-3'
+      >
+        {accountIds.map(id =>
+          <AccountContainer key={id} id={id} />,
         )}
-      </Stack>
+      </ScrollableList>
     );
   }
 

app/soapbox/features/ui/components/modals/mentions-modal.tsx

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

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<IReactionsModal> = ({ onClose, statusId, reaction
       <ScrollableList
         scrollKey='reactions'
         emptyMessage={emptyMessage}
-        className='mt-4'
+        className={classNames('max-w-full', {
+          'mt-4': reactions.size > 0,
+        })}
         itemClassName='pb-3'
       >
         {accounts.map((account) =>

app/soapbox/features/ui/components/modals/reblogs-modal.tsx

@@ -41,6 +41,7 @@ const ReblogsModal: React.FC<IReblogsModal> = ({ onClose, statusId }) => {
       <ScrollableList
         scrollKey='reblogs'
         emptyMessage={emptyMessage}
+        className='max-w-full'
         itemClassName='pb-3'
       >
         {accountIds.map((id) =>