Fix regressions caused by rendering default translation wrapper element (#38412)

app/javascript/mastodon/components/badge.tsx

@@ -31,7 +31,7 @@ export const Badge: FC<BadgeProps> = ({
     data-account-role-id={roleId}
   >
     {icon}
-    {label}
+    <span>{label}</span>
     {domain && <span className='account-role__domain'>{domain}</span>}
   </div>
 );

app/javascript/mastodon/components/more_from_author.tsx

@@ -6,16 +6,12 @@ import { AuthorLink } from 'mastodon/features/explore/components/author_link';
 export const MoreFromAuthor: React.FC<{ accountId: string }> = ({
   accountId,
 }) => (
+  <div className='more-from-author'>
+    <IconLogo />
     <FormattedMessage
       id='link_preview.more_from_author'
       defaultMessage='More from {name}'
       values={{ name: <AuthorLink accountId={accountId} /> }}
-  >
-    {(chunks) => (
-      <div className='more-from-author'>
-        <IconLogo />
-        {chunks}
+    />
   </div>
-    )}
-  </FormattedMessage>
 );

app/javascript/mastodon/components/not_signed_in_indicator.tsx

@@ -6,6 +6,7 @@ export const NotSignedInIndicator: React.FC = () => (
       <FormattedMessage
         id='not_signed_in_indicator.not_signed_in'
         defaultMessage='You need to login to access this resource.'
+        tagName='span'
       />
     </div>
   </div>

app/javascript/mastodon/components/regeneration_indicator.tsx

@@ -20,6 +20,7 @@ export const RegenerationIndicator: React.FC = () => (
       <FormattedMessage
         id='regeneration_indicator.please_stand_by'
         defaultMessage='Please stand by.'
+        tagName='span'
       />
     </div>
   </div>

app/javascript/mastodon/components/scrollable_list/components.tsx

@@ -37,7 +37,11 @@ export const ItemList = forwardRef<
   }
 >(({ isLoading, emptyMessage, className, children, ...otherProps }, ref) => {
   if (!isLoading && Children.count(children) === 0 && emptyMessage) {
-    return <div className='empty-column-indicator'>{emptyMessage}</div>;
+    return (
+      <div className='empty-column-indicator'>
+        <span>{emptyMessage}</span>
+      </div>
+    );
   }
 
   return (

app/javascript/mastodon/components/scrollable_list/index.jsx

@@ -385,7 +385,7 @@ class ScrollableList extends PureComponent {
           {alwaysPrepend && prepend}
 
           <div className='empty-column-indicator'>
-            {emptyMessage}
+            <span>{emptyMessage}</span>
           </div>
 
           {footer}

app/javascript/mastodon/components/status.jsx

@@ -435,7 +435,7 @@ class Status extends ImmutablePureComponent {
       prepend = (
         <div className='status__prepend'>
           <div className='status__prepend__icon'><Icon id='retweet' icon={RepeatIcon} /></div>
-          <FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name }} />
+          <FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name }} tagName='span' />
         </div>
       );
 
@@ -447,7 +447,7 @@ class Status extends ImmutablePureComponent {
       prepend = (
         <div className='status__prepend'>
           <div className='status__prepend__icon'><Icon id='at' icon={AlternateEmailIcon} /></div>
-          <FormattedMessage id='status.direct_indicator' defaultMessage='Private mention' />
+          <FormattedMessage id='status.direct_indicator' defaultMessage='Private mention' tagName='span' />
         </div>
       );
     } else if (showThread && status.get('in_reply_to_id')) {

app/javascript/mastodon/components/status_thread_label.tsx

@@ -51,7 +51,7 @@ export const StatusThreadLabel: React.FC<{
       <div className='status__prepend__icon'>
         <Icon id='reply' icon={ReplyIcon} />
       </div>
-      {label}
+      <span>{label}</span>
     </div>
   );
 };

app/javascript/mastodon/features/account_featured/components/empty_message.tsx

@@ -65,5 +65,9 @@ export const EmptyMessage: React.FC<EmptyMessageProps> = ({
     );
   }
 
-  return <div className='empty-column-indicator'>{message}</div>;
+  return (
+    <div className='empty-column-indicator'>
+      <span>{message}</span>
+    </div>
+  );
 };

app/javascript/mastodon/features/account_timeline/v2/tags_suggestions.tsx

@@ -78,6 +78,7 @@ export const TagSuggestions: FC = () => {
           values={{
             link: (chunks) => <Link to='/profile/featured_tags'>{chunks}</Link>,
           }}
+          tagName='span'
         />
       </Callout>
     );
@@ -122,6 +123,7 @@ export const TagSuggestions: FC = () => {
             />
           ),
         }}
+        tagName='span'
       />
     </Callout>
   );

app/javascript/mastodon/features/collections/index.tsx

@@ -47,6 +47,7 @@ export const Collections: React.FC<{
       <FormattedMessage
         id='collections.error_loading_collections'
         defaultMessage='There was an error when trying to load your collections.'
+        tagName='span'
       />
     ) : (
       <>

app/javascript/mastodon/features/compose/components/upload_progress.tsx

@@ -30,6 +30,7 @@ export const UploadProgress: React.FC<UploadProgressProps> = ({
       <Icon id='upload' icon={UploadFileIcon} />
 
       <div className='upload-progress__message'>
+        <span>
           {isProcessing ? (
             <FormattedMessage
               id='upload_progress.processing'
@@ -41,6 +42,7 @@ export const UploadProgress: React.FC<UploadProgressProps> = ({
               defaultMessage='Uploading…'
             />
           )}
+        </span>
 
         <div className='upload-progress__backdrop'>
           <animated.div className='upload-progress__tracker' style={styles} />

app/javascript/mastodon/features/explore/links.jsx

@@ -47,7 +47,7 @@ class Links extends PureComponent {
       return (
         <div className='explore__links scrollable scrollable--flex'>
           <div className='empty-column-indicator'>
-            <FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' />
+            <FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' tagName='span' />
           </div>
         </div>
       );

app/javascript/mastodon/features/explore/suggestions.jsx

@@ -45,7 +45,7 @@ class Suggestions extends PureComponent {
       return (
         <div className='explore__suggestions scrollable scrollable--flex'>
           <div className='empty-column-indicator'>
-            <FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' />
+            <FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' tagName='span' />
           </div>
         </div>
       );

app/javascript/mastodon/features/explore/tags.jsx

@@ -46,7 +46,7 @@ class Tags extends PureComponent {
       return (
         <div className='explore__links scrollable scrollable--flex'>
           <div className='empty-column-indicator'>
-            <FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' />
+            <FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' tagName='span' />
           </div>
         </div>
       );

app/javascript/mastodon/features/followers/index.tsx

@@ -63,6 +63,7 @@ const Followers: FC = () => {
       <FormattedMessage
         id='followers.hide_other_followers'
         defaultMessage='This user has chosen to not make their other followers visible'
+        tagName='span'
       />
     </div>
   );

app/javascript/mastodon/features/following/index.tsx

@@ -65,6 +65,7 @@ const Followers: FC = () => {
       <FormattedMessage
         id='following.hide_other_following'
         defaultMessage='This user has chosen to not make the rest of who they follow visible'
+        tagName='span'
       />
     </div>
   );

app/javascript/mastodon/features/home_timeline/components/inline_follow_suggestions.tsx

@@ -115,7 +115,7 @@ const Source: React.FC<{ id: ApiSuggestionSourceJSON }> = ({ id }) => {
       title={hint}
     >
       <Icon id='' icon={InfoIcon} />
-      {label}
+      <span>{label}</span>
     </div>
   );
 };

app/javascript/mastodon/features/lists/members.tsx

@@ -285,6 +285,7 @@ const ListMembers: React.FC<{
             <FormattedMessage
               id='lists.no_results_found'
               defaultMessage='No results found.'
+              tagName='span'
             />
           )
         }

app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx

@@ -126,7 +126,7 @@ export const NotificationGroupWithStatus: React.FC<{
             </div>
 
             <div className='notification-group__main__header__label'>
-              {label}
+              <span>{label}</span>
               {timestamp && (
                 <>
                   <span className='notification-group__main__header__label-separator'>

app/javascript/mastodon/features/report/comment.tsx

@@ -194,6 +194,7 @@ const Comment: React.FC<Props> = ({
                 id='report.forward'
                 defaultMessage='Forward to {target}'
                 values={{ target: domain }}
+                tagName='span'
               />
             </label>
           ))}

app/javascript/mastodon/features/status/components/detailed_status.tsx

@@ -406,6 +406,7 @@ export const DetailedStatus: React.FC<{
             <FormattedMessage
               id='status.direct_indicator'
               defaultMessage='Private mention'
+              tagName='span'
             />
           </div>
         )}

app/javascript/styles/mastodon/components.scss

@@ -10679,6 +10679,7 @@ noscript {
           &__source {
             display: inline-flex;
             align-items: center;
+            max-width: 100%;
             color: var(--color-text-tertiary);
             gap: 4px;
             overflow: hidden;
@@ -10899,12 +10900,6 @@ noscript {
     color: var(--color-text-secondary);
   }
 
-  & > span {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
   a {
     display: inline-flex;
     align-items: center;