[Glitch] Fix regressions caused by rendering default translation wrapper element

Port 39ad873589 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/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/flavours/glitch/components/more_from_author.tsx

@@ -6,16 +6,12 @@ import { AuthorLink } from 'flavours/glitch/features/explore/components/author_l
 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/flavours/glitch/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/flavours/glitch/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/flavours/glitch/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/flavours/glitch/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/flavours/glitch/components/status_prepend.jsx

@@ -161,7 +161,9 @@ export default class StatusPrepend extends PureComponent {
             icon={iconComponent}
           />
         </div>
-        <Message />
+        <span>
+          <Message />
+        </span>
         {children}
       </aside>
     );

app/javascript/flavours/glitch/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>
   );
 };