From 915fd0933a585b007f993e6d22741cac528bbd7b Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Thu, 26 Mar 2026 12:16:55 +0100
Subject: [PATCH] [Glitch] Fix regressions caused by rendering default
 translation wrapper element

Port 39ad873589ae30230c8de1679104ade5e99bfd35 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/badge.tsx      |  2 +-
 .../glitch/components/more_from_author.tsx    | 20 +++++++---------
 .../components/not_signed_in_indicator.tsx    |  1 +
 .../components/regeneration_indicator.tsx     |  1 +
 .../components/scrollable_list/components.tsx |  6 ++++-
 .../components/scrollable_list/index.jsx      |  2 +-
 .../glitch/components/status_prepend.jsx      |  4 +++-
 .../glitch/components/status_thread_label.tsx |  2 +-
 .../components/empty_message.tsx              |  6 ++++-
 .../account_timeline/v2/tags_suggestions.tsx  |  2 ++
 .../glitch/features/collections/index.tsx     |  1 +
 .../compose/components/upload_progress.tsx    | 24 ++++++++++---------
 .../glitch/features/explore/links.jsx         |  2 +-
 .../glitch/features/explore/suggestions.jsx   |  2 +-
 .../flavours/glitch/features/explore/tags.jsx |  2 +-
 .../glitch/features/followers/index.tsx       |  1 +
 .../glitch/features/following/index.tsx       |  1 +
 .../components/inline_follow_suggestions.tsx  |  2 +-
 .../glitch/features/lists/members.tsx         |  1 +
 .../notification_group_with_status.tsx        |  2 +-
 .../glitch/features/report/comment.tsx        |  1 +
 .../glitch/styles/mastodon/components.scss    |  7 +-----
 22 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/badge.tsx b/app/javascript/flavours/glitch/components/badge.tsx
index 07ecdfa46c..54c28bf7b7 100644
--- a/app/javascript/flavours/glitch/components/badge.tsx
+++ b/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>
 );
diff --git a/app/javascript/flavours/glitch/components/more_from_author.tsx b/app/javascript/flavours/glitch/components/more_from_author.tsx
index 957d97c141..6903a536d1 100644
--- a/app/javascript/flavours/glitch/components/more_from_author.tsx
+++ b/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>
 );
diff --git a/app/javascript/flavours/glitch/components/not_signed_in_indicator.tsx b/app/javascript/flavours/glitch/components/not_signed_in_indicator.tsx
index 015f74dcae..c2e95093b7 100644
--- a/app/javascript/flavours/glitch/components/not_signed_in_indicator.tsx
+++ b/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>
diff --git a/app/javascript/flavours/glitch/components/regeneration_indicator.tsx b/app/javascript/flavours/glitch/components/regeneration_indicator.tsx
index e26b93eb4f..a79556104e 100644
--- a/app/javascript/flavours/glitch/components/regeneration_indicator.tsx
+++ b/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>
diff --git a/app/javascript/flavours/glitch/components/scrollable_list/components.tsx b/app/javascript/flavours/glitch/components/scrollable_list/components.tsx
index 79afaf837a..9e90ce807e 100644
--- a/app/javascript/flavours/glitch/components/scrollable_list/components.tsx
+++ b/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 (
diff --git a/app/javascript/flavours/glitch/components/scrollable_list/index.jsx b/app/javascript/flavours/glitch/components/scrollable_list/index.jsx
index fae61d02da..7203bad886 100644
--- a/app/javascript/flavours/glitch/components/scrollable_list/index.jsx
+++ b/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}
diff --git a/app/javascript/flavours/glitch/components/status_prepend.jsx b/app/javascript/flavours/glitch/components/status_prepend.jsx
index 9766b0746f..b488aee664 100644
--- a/app/javascript/flavours/glitch/components/status_prepend.jsx
+++ b/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>
     );
diff --git a/app/javascript/flavours/glitch/components/status_thread_label.tsx b/app/javascript/flavours/glitch/components/status_thread_label.tsx
index dc2b4b866b..9e25cfbede 100644
--- a/app/javascript/flavours/glitch/components/status_thread_label.tsx
+++ b/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>
   );
 };
diff --git a/app/javascript/flavours/glitch/features/account_featured/components/empty_message.tsx b/app/javascript/flavours/glitch/features/account_featured/components/empty_message.tsx
index ec0a551bd0..1a38022ea6 100644
--- a/app/javascript/flavours/glitch/features/account_featured/components/empty_message.tsx
+++ b/app/javascript/flavours/glitch/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>
+  );
 };
diff --git a/app/javascript/flavours/glitch/features/account_timeline/v2/tags_suggestions.tsx b/app/javascript/flavours/glitch/features/account_timeline/v2/tags_suggestions.tsx
index 138ccc4cf2..1c0c81128e 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/v2/tags_suggestions.tsx
+++ b/app/javascript/flavours/glitch/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>
   );
diff --git a/app/javascript/flavours/glitch/features/collections/index.tsx b/app/javascript/flavours/glitch/features/collections/index.tsx
index a0dbaad44d..28f9fa8d32 100644
--- a/app/javascript/flavours/glitch/features/collections/index.tsx
+++ b/app/javascript/flavours/glitch/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'
       />
     ) : (
       <>
diff --git a/app/javascript/flavours/glitch/features/compose/components/upload_progress.tsx b/app/javascript/flavours/glitch/features/compose/components/upload_progress.tsx
index d654e00901..d129a706c7 100644
--- a/app/javascript/flavours/glitch/features/compose/components/upload_progress.tsx
+++ b/app/javascript/flavours/glitch/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} />
diff --git a/app/javascript/flavours/glitch/features/explore/links.jsx b/app/javascript/flavours/glitch/features/explore/links.jsx
index a9249430fd..603a8028e0 100644
--- a/app/javascript/flavours/glitch/features/explore/links.jsx
+++ b/app/javascript/flavours/glitch/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>
       );
diff --git a/app/javascript/flavours/glitch/features/explore/suggestions.jsx b/app/javascript/flavours/glitch/features/explore/suggestions.jsx
index a5d029fc26..67c2fb4f83 100644
--- a/app/javascript/flavours/glitch/features/explore/suggestions.jsx
+++ b/app/javascript/flavours/glitch/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>
       );
diff --git a/app/javascript/flavours/glitch/features/explore/tags.jsx b/app/javascript/flavours/glitch/features/explore/tags.jsx
index 14c221fa40..4a82ac8433 100644
--- a/app/javascript/flavours/glitch/features/explore/tags.jsx
+++ b/app/javascript/flavours/glitch/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>
       );
diff --git a/app/javascript/flavours/glitch/features/followers/index.tsx b/app/javascript/flavours/glitch/features/followers/index.tsx
index 5719872582..0dc62b8cc9 100644
--- a/app/javascript/flavours/glitch/features/followers/index.tsx
+++ b/app/javascript/flavours/glitch/features/followers/index.tsx
@@ -66,6 +66,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>
   );
diff --git a/app/javascript/flavours/glitch/features/following/index.tsx b/app/javascript/flavours/glitch/features/following/index.tsx
index 067fb4d732..7bc6be93ad 100644
--- a/app/javascript/flavours/glitch/features/following/index.tsx
+++ b/app/javascript/flavours/glitch/features/following/index.tsx
@@ -68,6 +68,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>
   );
diff --git a/app/javascript/flavours/glitch/features/home_timeline/components/inline_follow_suggestions.tsx b/app/javascript/flavours/glitch/features/home_timeline/components/inline_follow_suggestions.tsx
index 14e5b5d71c..64a13ee5df 100644
--- a/app/javascript/flavours/glitch/features/home_timeline/components/inline_follow_suggestions.tsx
+++ b/app/javascript/flavours/glitch/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>
   );
 };
diff --git a/app/javascript/flavours/glitch/features/lists/members.tsx b/app/javascript/flavours/glitch/features/lists/members.tsx
index 04620fbb06..79f28ac927 100644
--- a/app/javascript/flavours/glitch/features/lists/members.tsx
+++ b/app/javascript/flavours/glitch/features/lists/members.tsx
@@ -285,6 +285,7 @@ const ListMembers: React.FC<{
             <FormattedMessage
               id='lists.no_results_found'
               defaultMessage='No results found.'
+              tagName='span'
             />
           )
         }
diff --git a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_group_with_status.tsx b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_group_with_status.tsx
index 25737dd9e0..4d0f2b447a 100644
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_group_with_status.tsx
+++ b/app/javascript/flavours/glitch/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'>
diff --git a/app/javascript/flavours/glitch/features/report/comment.tsx b/app/javascript/flavours/glitch/features/report/comment.tsx
index 31a7a7051a..5a05c03295 100644
--- a/app/javascript/flavours/glitch/features/report/comment.tsx
+++ b/app/javascript/flavours/glitch/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>
           ))}
diff --git a/app/javascript/flavours/glitch/styles/mastodon/components.scss b/app/javascript/flavours/glitch/styles/mastodon/components.scss
index 57ad9b2b44..51c2f899f1 100644
--- a/app/javascript/flavours/glitch/styles/mastodon/components.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon/components.scss
@@ -11021,6 +11021,7 @@ noscript {
           &__source {
             display: inline-flex;
             align-items: center;
+            max-width: 100%;
             color: var(--color-text-tertiary);
             gap: 4px;
             overflow: hidden;
@@ -11241,12 +11242,6 @@ noscript {
     color: var(--color-text-secondary);
   }
 
-  & > span {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
   a {
     display: inline-flex;
     align-items: center;