RTL: Fix some minor issues (#1153)

src/components/left/main/Chat.scss

@@ -83,6 +83,9 @@
       flex-grow: 1;
       color: var(--color-text-secondary);
       unicode-bidi: plaintext;
+      &[dir=ltr] {
+        text-align: left;
+      }
 
       .sender-name {
         color: var(--color-text);

src/components/left/main/Chat.tsx

@@ -192,7 +192,7 @@ const Chat: FC<OwnProps & StateProps & DispatchProps> = ({
 
     if (draft && draft.text.length) {
       return (
-        <p className="last-message" dir="auto">
+        <p className="last-message" dir={lang.isRtl ? 'auto' : 'ltr'}>
           <span className="draft">{lang('Draft')}</span>
           {renderText(draft.text)}
         </p>
@@ -209,7 +209,7 @@ const Chat: FC<OwnProps & StateProps & DispatchProps> = ({
         : lastMessageSender;
 
       return (
-        <p className="last-message" dir="auto">
+        <p className="last-message" dir={lang.isRtl ? 'auto' : 'ltr'}>
           {renderText(renderActionMessageText(
             lang,
             lastMessage,
@@ -226,7 +226,7 @@ const Chat: FC<OwnProps & StateProps & DispatchProps> = ({
     const senderName = getMessageSenderName(lang, chatId, lastMessageSender);
 
     return (
-      <p className="last-message" dir="auto">
+      <p className="last-message" dir={lang.isRtl ? 'auto' : 'ltr'}>
         {senderName && (
           <>
             <span className="sender-name">{renderText(senderName)}</span>

src/components/ui/Radio.scss

@@ -60,7 +60,8 @@
     .label {
       display: block;
       word-break: break-word;
-      text-align: initial;
+      unicode-bidi: plaintext;
+      text-align: left;
     }
 
     .subLabel {
@@ -68,6 +69,7 @@
       font-size: 0.875rem;
       line-height: 1rem;
       color: var(--color-text-secondary);
+      unicode-bidi: plaintext;
     }
   }
 

src/components/ui/Radio.tsx

@@ -53,8 +53,8 @@ const Radio: FC<OwnProps> = ({
         disabled={disabled || hidden}
       />
       <div className="Radio-main">
-        <span className="label" dir="auto">{label}</span>
-        {subLabel && <span className="subLabel" dir="auto">{subLabel}</span>}
+        <span className="label" dir={lang.isRtl ? 'auto' : undefined}>{label}</span>
+        {subLabel && <span className="subLabel" dir={lang.isRtl ? 'auto' : undefined}>{subLabel}</span>}
       </div>
       {isLoading && <Spinner />}
     </label>