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,