Merge branch 'long-name-fixes' into 'develop'

Fix overflow problems in various places

See merge request soapbox-pub/soapbox!2487

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Posts: Support posts filtering on recent Mastodon versions
 - Reactions: Support custom emoji reactions
 - Compatbility: Support Mastodon v2 timeline filters.
+- Compatbility: Preliminary support for Ditto backend.
 - Posts: Support dislikes on Friendica.
 - UI: added a character counter to some textareas.
 
@@ -30,6 +31,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - 18n: fixed Chinese language being detected from the browser.
 - Conversations: fixed pagination (Mastodon).
 - Compatibility: fix version parsing for Friendica.
+- UI: fixed various overflow issues related to long usernames.
+- UI: fixed display of Markdown code blocks in the reply indicator.
 
 ## [3.2.0] - 2023-02-15
 

app/soapbox/actions/moderation.tsx

@@ -142,7 +142,7 @@ const deleteStatusModal = (intl: IntlShape, statusId: string, afterConfirm = ()
     dispatch(openModal('CONFIRM', {
       icon: require('@tabler/icons/trash.svg'),
       heading: intl.formatMessage(messages.deleteStatusHeading),
-      message: intl.formatMessage(messages.deleteStatusPrompt, { acct }),
+      message: intl.formatMessage(messages.deleteStatusPrompt, { acct: <strong className='break-words'>{acct}</strong> }),
       confirm: intl.formatMessage(messages.deleteStatusConfirm),
       onConfirm: () => {
         dispatch(deleteStatus(statusId)).then(() => {

app/soapbox/components/list.tsx

@@ -56,8 +56,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec
 
   return (
     <Comp
-      className={clsx({
+      className={clsx('flex items-center justify-between overflow-hidden bg-gradient-to-r from-gradient-start/20 to-gradient-end/20 px-4 py-2 first:rounded-t-lg last:rounded-b-lg dark:from-gradient-start/10 dark:to-gradient-end/10', {
-        'flex items-center justify-between px-4 py-2 first:rounded-t-lg last:rounded-b-lg bg-gradient-to-r from-gradient-start/20 to-gradient-end/20 dark:from-gradient-start/10 dark:to-gradient-end/10': true,
         'cursor-pointer hover:from-gradient-start/30 hover:to-gradient-end/30 dark:hover:from-gradient-start/5 dark:hover:to-gradient-end/5': typeof onClick !== 'undefined' || typeof onSelect !== 'undefined',
       })}
       {...linkProps}
@@ -71,7 +70,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec
       </div>
 
       {onClick ? (
-        <HStack space={1} alignItems='center' className='text-gray-700 dark:text-gray-600'>
+        <HStack space={1} alignItems='center' className='overflow-hidden text-gray-700 dark:text-gray-600'>
           {children}
 
           <Icon src={require('@tabler/icons/chevron-right.svg')} className='ml-1 rtl:rotate-180' />

app/soapbox/components/status-action-bar.tsx

@@ -258,8 +258,8 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
 
     dispatch(openModal('CONFIRM', {
       icon: require('@tabler/icons/ban.svg'),
-      heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.get('acct') }} />,
+      heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
-      message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
+      message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />,
       confirm: intl.formatMessage(messages.blockConfirm),
       onConfirm: () => dispatch(blockAccount(account.id)),
       secondary: intl.formatMessage(messages.blockAndReport),
@@ -313,7 +313,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
 
     dispatch(openModal('CONFIRM', {
       heading: intl.formatMessage(messages.deleteHeading),
-      message: intl.formatMessage(messages.deleteFromGroupMessage, { name: account.username }),
+      message: intl.formatMessage(messages.deleteFromGroupMessage, { name: <strong className='break-words'>{account.username}</strong> }),
       confirm: intl.formatMessage(messages.deleteConfirm),
       onConfirm: () => dispatch(groupDeleteStatus((status.group as Group).id, status.id)),
     }));
@@ -324,7 +324,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
 
     dispatch(openModal('CONFIRM', {
       heading: intl.formatMessage(messages.kickFromGroupHeading),
-      message: intl.formatMessage(messages.kickFromGroupMessage, { name: account.username }),
+      message: intl.formatMessage(messages.kickFromGroupMessage, { name: <strong className='break-words'>{account.username}</strong> }),
       confirm: intl.formatMessage(messages.kickFromGroupConfirm),
       onConfirm: () => dispatch(groupKick((status.group as Group).id, account.id)),
     }));
@@ -335,7 +335,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
 
     dispatch(openModal('CONFIRM', {
       heading: intl.formatMessage(messages.blockFromGroupHeading),
-      message: intl.formatMessage(messages.blockFromGroupMessage, { name: account.username }),
+      message: intl.formatMessage(messages.blockFromGroupMessage, { name: <strong className='break-words'>{account.username}</strong> }),
       confirm: intl.formatMessage(messages.blockFromGroupConfirm),
       onConfirm: () => dispatch(groupBlock((status.group as Group).id, account.id)),
     }));

app/soapbox/components/ui/modal/modal.tsx

@@ -102,7 +102,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
                 'flex-row-reverse': closePosition === 'left',
               })}
             >
-              <h3 className='grow text-lg font-bold leading-6 text-gray-900 dark:text-white'>
+              <h3 className='grow truncate text-lg font-bold leading-6 text-gray-900 dark:text-white'>
                 {title}
               </h3>
 

app/soapbox/features/account/components/header.tsx

@@ -130,7 +130,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       dispatch(openModal('CONFIRM', {
         icon: require('@tabler/icons/ban.svg'),
         heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
-        message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.acct}</strong> }} />,
+        message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />,
         confirm: intl.formatMessage(messages.blockConfirm),
         onConfirm: () => dispatch(blockAccount(account.id)),
         secondary: intl.formatMessage(messages.blockAndReport),
@@ -215,7 +215,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       const unfollowModal = getSettings(getState()).get('unfollowModal');
       if (unfollowModal) {
         dispatch(openModal('CONFIRM', {
-          message: <FormattedMessage id='confirmations.remove_from_followers.message' defaultMessage='Are you sure you want to remove {name} from your followers?' values={{ name: <strong>@{account.acct}</strong> }} />,
+          message: <FormattedMessage id='confirmations.remove_from_followers.message' defaultMessage='Are you sure you want to remove {name} from your followers?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />,
           confirm: intl.formatMessage(messages.removeFromFollowersConfirm),
           onConfirm: () => dispatch(removeFromFollowers(account.id)),
         }));

app/soapbox/features/compose/components/reply-indicator.tsx

@@ -2,7 +2,8 @@ import clsx from 'clsx';
 import React from 'react';
 
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
-import { Stack, Text } from 'soapbox/components/ui';
+import Markup from 'soapbox/components/markup';
+import { Stack } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account-container';
 import { isRtl } from 'soapbox/rtl';
 
@@ -45,8 +46,8 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ className, status, hideActi
         hideActions={hideActions}
       />
 
-      <Text
+      <Markup
-        className='status__content break-words'
+        className='break-words'
         size='sm'
         dangerouslySetInnerHTML={{ __html: status.contentHtml }}
         direction={isRtl(status.search_index) ? 'rtl' : 'ltr'}

app/soapbox/features/compose/components/search-results.tsx

@@ -238,11 +238,11 @@ const SearchResults = () => {
       {filterByAccount ? (
         <HStack className='mb-4 border-b border-solid border-gray-200 px-2 pb-4 dark:border-gray-800' space={2}>
           <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleUnsetAccount} />
-          <Text>
+          <Text truncate>
             <FormattedMessage
               id='search_results.filter_message'
               defaultMessage='You are searching for posts from @{acct}.'
-              values={{ acct: account }}
+              values={{ acct: <strong className='break-words'>{account}</strong> }}
             />
           </Text>
         </HStack>

app/soapbox/features/edit-profile/index.tsx

@@ -124,7 +124,7 @@ const accountToCredentials = (account: Account): AccountCredentials => {
     discoverable: account.discoverable,
     bot: account.bot,
     display_name: account.display_name,
-    note: account.source.get('note'),
+    note: account.source.get('note', ''),
     locked: account.locked,
     fields_attributes: [...account.source.get<Iterable<AccountCredentialsField>>('fields', ImmutableList()).toJS()],
     stranger_notifications: account.getIn(['pleroma', 'notification_settings', 'block_from_strangers']) === true,

app/soapbox/features/settings/index.tsx

@@ -74,7 +74,7 @@ const Settings = () => {
         <CardBody>
           <List>
             <ListItem label={intl.formatMessage(messages.editProfile)} onClick={navigateToEditProfile}>
-              <span>{displayName}</span>
+              <span className='max-w-full truncate'>{displayName}</span>
             </ListItem>
           </List>
         </CardBody>

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

@@ -60,7 +60,7 @@ const MuteModal = () => {
           <FormattedMessage
             id='confirmations.mute.message'
             defaultMessage='Are you sure you want to mute {name}?'
-            values={{ name: <strong>@{account.acct}</strong> }}
+            values={{ name: <strong className='break-words'>@{account.acct}</strong> }}
           />
         </Text>
 

app/soapbox/features/ui/components/profile-info-panel.tsx

@@ -120,7 +120,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
         <Stack space={2}>
           <Stack>
             <HStack space={1} alignItems='center'>
-              <Text size='sm' theme='muted' direction='ltr'>
+              <Text size='sm' theme='muted' direction='ltr' truncate>
                 @{username}
               </Text>
             </HStack>

app/soapbox/features/ui/components/user-panel.tsx

@@ -59,7 +59,7 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
         <Stack>
           <Link to={`/@${account.acct}`}>
             <HStack space={1} alignItems='center'>
-              <Text size='lg' weight='bold' dangerouslySetInnerHTML={displayNameHtml} />
+              <Text size='lg' weight='bold' dangerouslySetInnerHTML={displayNameHtml} truncate />
 
               {verified && <VerificationBadge />}
 
@@ -71,7 +71,7 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
             </HStack>
           </Link>
 
-          <Text size='sm' theme='muted'>
+          <Text size='sm' theme='muted' truncate>
             @{getAcct(account, fqn)}
           </Text>
         </Stack>

app/soapbox/utils/features.ts

@@ -16,6 +16,12 @@ const overrides = custom('features');
 /** Truthy array convenience function */
 const any = (arr: Array<any>): boolean => arr.some(Boolean);
 
+/**
+ * Ditto, a Nostr server with Mastodon API.
+ * @see {@link https://gitlab.com/soapbox-pub/ditto}
+ */
+export const DITTO = 'Ditto';
+
 /**
  * Friendica, decentralized social platform implementing multiple federation protocols.
  * @see {@link https://friendi.ca/}
@@ -137,6 +143,7 @@ const getInstanceFeatures = (instance: Instance) => {
       v.software === PLEROMA && gte(v.version, '2.4.50'),
       v.software === TAKAHE && gte(v.version, '0.6.1'),
       v.software === TRUTHSOCIAL,
+      v.software === DITTO,
     ]),
 
     /**