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,
 }) => (
-  <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>
+  <div className='more-from-author'>
+    <IconLogo />
+    <FormattedMessage
+      id='link_preview.more_from_author'
+      defaultMessage='More from {name}'
+      values={{ name: <AuthorLink accountId={accountId} /> }}
+    />
+  </div>
 );

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