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

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,17 +30,19 @@ export const UploadProgress: React.FC<UploadProgressProps> = ({
       <Icon id='upload' icon={UploadFileIcon} />
 
       <div className='upload-progress__message'>
-        {isProcessing ? (
-          <FormattedMessage
-            id='upload_progress.processing'
-            defaultMessage='Processing…'
-          />
-        ) : (
-          <FormattedMessage
-            id='upload_progress.label'
-            defaultMessage='Uploading…'
-          />
-        )}
+        <span>
+          {isProcessing ? (
+            <FormattedMessage
+              id='upload_progress.processing'
+              defaultMessage='Processing…'
+            />
+          ) : (
+            <FormattedMessage
+              id='upload_progress.label'
+              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>
         )}