Use a consistent alignment for all text items in a list (#8276)

Co-authored-by: Michael Telatynski <[email protected]>

Author: luixxiul

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 }

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>

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,15 +142,15 @@ 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>
                 </div>
             );
         } else {
             nameEl = (
-                <div className="mx_EntityTile_name" dir="auto">{ name }</div>
+                <div className="mx_EntityTile_name">{ name }</div>
             );
         }
 

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>