Fix RTL text rendering for display names (#4747)

* header display name rtl support

* highlighted post rtl

* move `NON_BREAKING_SPACE` to an external constant

* rtl support in search dropdown

* profile card rtl

* old profile card rtl

* hover card

* wizard list card

* new chat

* account card

* chat header

* clean up notifications

* just force LTR on meta display name

5 files changed, 19 insertions, 5 deletions

diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx
index 79f1108cb..8bc9376e0 100644
--- a/src/components/ProfileCard.tsx
+++ b/src/components/ProfileCard.tsx
@@ -166,7 +166,9 @@ export function NameAndHandle({
 
   return (
     <View style={[a.flex_1]}>
-      <Text style={[a.text_md, a.font_bold, a.leading_snug]} numberOfLines={1}>
+      <Text
+        style={[a.text_md, a.font_bold, a.leading_snug, a.self_start]}
+        numberOfLines={1}>
         {name}
       </Text>
       <Text
diff --git a/src/components/ProfileHoverCard/index.web.tsx b/src/components/ProfileHoverCard/index.web.tsx
index 84b1d6d24..928000988 100644
--- a/src/components/ProfileHoverCard/index.web.tsx
+++ b/src/components/ProfileHoverCard/index.web.tsx
@@ -462,7 +462,8 @@ function Inner({
 
       <Link to={profileURL} label={_(msg`View profile`)} onPress={hide}>
         <View style={[a.pb_sm, a.flex_1]}>
-          <Text style={[a.pt_md, a.pb_xs, a.text_lg, a.font_bold]}>
+          <Text
+            style={[a.pt_md, a.pb_xs, a.text_lg, a.font_bold, a.self_start]}>
             {sanitizeDisplayName(
               profile.displayName || sanitizeHandle(profile.handle),
               moderation.ui('displayName'),
diff --git a/src/components/StarterPack/Wizard/WizardListCard.tsx b/src/components/StarterPack/Wizard/WizardListCard.tsx
index aa1b2cf9b..55cf0f02b 100644
--- a/src/components/StarterPack/Wizard/WizardListCard.tsx
+++ b/src/components/StarterPack/Wizard/WizardListCard.tsx
@@ -78,7 +78,13 @@ function WizardListCard({
       />
       <View style={[a.flex_1, a.gap_2xs]}>
         <Text
-          style={[a.flex_1, a.font_bold, a.text_md, a.leading_tight]}
+          style={[
+            a.flex_1,
+            a.font_bold,
+            a.text_md,
+            a.leading_tight,
+            a.self_start,
+          ]}
           numberOfLines={1}>
           {displayName}
         </Text>
diff --git a/src/components/dms/MessagesListHeader.tsx b/src/components/dms/MessagesListHeader.tsx
index 8bf673d30..7b9f1a3a0 100644
--- a/src/components/dms/MessagesListHeader.tsx
+++ b/src/components/dms/MessagesListHeader.tsx
@@ -168,7 +168,12 @@ function HeaderReady({
           </View>
           <View style={a.flex_1}>
             <Text
-              style={[a.text_md, a.font_bold, web(a.leading_normal)]}
+              style={[
+                a.text_md,
+                a.font_bold,
+                a.self_start,
+                web(a.leading_normal),
+              ]}
               numberOfLines={1}>
               {displayName}
             </Text>
diff --git a/src/components/dms/dialogs/SearchablePeopleList.tsx b/src/components/dms/dialogs/SearchablePeopleList.tsx
index d92ea6835..a13dfe509 100644
--- a/src/components/dms/dialogs/SearchablePeopleList.tsx
+++ b/src/components/dms/dialogs/SearchablePeopleList.tsx
@@ -395,7 +395,7 @@ function ProfileCard({
           />
           <View style={[a.flex_1, a.gap_2xs]}>
             <Text
-              style={[t.atoms.text, a.font_bold, a.leading_tight]}
+              style={[t.atoms.text, a.font_bold, a.leading_tight, a.self_start]}
               numberOfLines={1}>
               {displayName}
             </Text>