Fix mentions in RTL

app/soapbox/components/account.tsx

@@ -216,7 +216,7 @@ const Account = ({
 
             <Stack space={withAccountNote || note ? 1 : 0}>
               <HStack alignItems='center' space={1} style={style}>
-                <Text theme='muted' size='sm' truncate>@{username}</Text>
+                <Text theme='muted' size='sm' direction='ltr' truncate>@{username}</Text>
 
                 {account.favicon && (
                   <InstanceFavicon account={account} />

app/soapbox/features/ui/components/profile-info-panel.tsx

@@ -121,7 +121,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
         <Stack space={2}>
           <Stack>
             <HStack space={1} alignItems='center'>
-              <Text size='sm' theme='muted'>
+              <Text size='sm' theme='muted' direction='ltr'>
                 @{username}
               </Text>
             </HStack>
@@ -157,7 +157,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
           </HStack>
 
           <HStack alignItems='center' space={0.5}>
-            <Text size='sm' theme='muted'>
+            <Text size='sm' theme='muted' direction='ltr'>
               @{displayFqn ? account.fqn : account.acct}
             </Text>
 

app/soapbox/hooks/useLocale.ts

@@ -28,7 +28,7 @@ const useLocale = (fallback = 'en'): UseLocaleResult => {
   const direction: CSSProperties['direction'] =
     RTL_LOCALES.includes(locale)
       ? 'rtl'
-      : undefined;
+      : 'ltr';
 
   return {
     locale,

app/styles/components/reply-mentions.scss

@@ -2,7 +2,8 @@
   @apply text-gray-700 dark:text-gray-600 mb-1 text-sm;
 
   &__account {
-    @apply text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue no-underline hover:underline;
+    @apply text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue no-underline hover:underline inline-block;
+    direction: ltr;
   }
 }