From f648140d0c727ca50846597b018e418728b3b6a7 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Mon, 11 Apr 2022 12:39:47 +0000
Subject: [PATCH] Use a consistent alignment for all text items in a list
 (#8276)

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/messages/DisambiguatedProfile.tsx | 4 ++--
 src/components/views/right_panel/UserInfo.tsx          | 2 +-
 src/components/views/rooms/EntityTile.tsx              | 6 +++---
 src/components/views/rooms/RoomTile.tsx                | 6 ++++--
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/views/messages/DisambiguatedProfile.tsx b/src/components/views/messages/DisambiguatedProfile.tsx
index f376bbbd7a..36850e916e 100644
--- a/src/components/views/messages/DisambiguatedProfile.tsx
+++ b/src/components/views/messages/DisambiguatedProfile.tsx
@@ -58,8 +58,8 @@ export default class DisambiguatedProfile extends React.Component<IProps> {
         });
 
         return (
-            <div className="mx_DisambiguatedProfile" dir="auto" onClick={onClick}>
-                <span className={displayNameClasses}>
+            <div className="mx_DisambiguatedProfile" onClick={onClick}>
+                <span className={displayNameClasses} dir="auto">
                     { rawDisplayName }
                 </span>
                 { mxidElement }
diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
index 0218196831..d36ba0f728 100644
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@@ -1444,7 +1444,7 @@ const UserInfoHeader: React.FC<{
                 <div>
                     <h2>
                         { e2eIcon }
-                        <span title={displayName} aria-label={displayName}>
+                        <span title={displayName} aria-label={displayName} dir="auto">
                             { displayName }
                         </span>
                     </h2>
diff --git a/src/components/views/rooms/EntityTile.tsx b/src/components/views/rooms/EntityTile.tsx
index c06d473299..dd8756f845 100644
--- a/src/components/views/rooms/EntityTile.tsx
+++ b/src/components/views/rooms/EntityTile.tsx
@@ -133,7 +133,7 @@ export default class EntityTile extends React.PureComponent<IProps, IState> {
             }
             nameEl = (
                 <div className="mx_EntityTile_details">
-                    <div className="mx_EntityTile_name" dir="auto">
+                    <div className="mx_EntityTile_name">
                         { name }
                     </div>
                     { presenceLabel }
@@ -142,7 +142,7 @@ export default class EntityTile extends React.PureComponent<IProps, IState> {
         } else if (this.props.subtextLabel) {
             nameEl = (
                 <div className="mx_EntityTile_details">
-                    <div className="mx_EntityTile_name" dir="auto">
+                    <div className="mx_EntityTile_name">
                         { name }
                     </div>
                     <span className="mx_EntityTile_subtext">{ this.props.subtextLabel }</span>
@@ -150,7 +150,7 @@ export default class EntityTile extends React.PureComponent<IProps, IState> {
             );
         } else {
             nameEl = (
-                <div className="mx_EntityTile_name" dir="auto">{ name }</div>
+                <div className="mx_EntityTile_name">{ name }</div>
             );
         }
 
diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx
index 46aea8fa0d..29476a55cf 100644
--- a/src/components/views/rooms/RoomTile.tsx
+++ b/src/components/views/rooms/RoomTile.tsx
@@ -683,8 +683,10 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
 
         const titleContainer = this.props.isMinimized ? null : (
             <div className="mx_RoomTile_titleContainer">
-                <div title={name} className={titleClasses} tabIndex={-1} dir="auto">
-                    { name }
+                <div title={name} className={titleClasses} tabIndex={-1}>
+                    <span dir="auto">
+                        { name }
+                    </span>
                 </div>
                 { subtitle }
             </div>