Merge branch 'modals-truncate' into 'develop'

Truncate account names in modals

Closes #1306

See merge request soapbox-pub/soapbox!2129

CHANGELOG.md

@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Events: don't crash when searching for a location.
 - Search: fixes an abort error when using the navbar search component.
 - Posts: fix monospace font in Markdown code blocks.
+- Modals: fix action buttons overflow
 
 ## [3.0.0] - 2022-12-25
 

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}>
+      <ScrollableList
-        {accountIds.size > 0 ? (
+        scrollKey='event_participations'
-          accountIds.map((id) =>
+        emptyMessage={emptyMessage}
-            <AccountContainer key={id} id={id} />,
+        className='max-w-full'
-          )
+        itemClassName='pb-3'
-        ) : (
+      >
-          <FormattedMessage id='empty_column.event_participants' defaultMessage='No one joined this event yet. When someone does, they will show up here.' />
+        {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}>
+      <ScrollableList
-        {accountIds.size > 0 ? (
+        scrollKey='favourites'
-          accountIds.map((id) =>
+        emptyMessage={emptyMessage}
-            <AccountContainer key={id} id={id} />,
+        className='max-w-full'
-          )
+        itemClassName='pb-3'
-        ) : (
+      >
-          <FormattedMessage id='empty_column.favourites' defaultMessage='No one has liked this post yet. When someone does, they will show up here.' />
+        {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) =>