From 7501849044267136eb2a7254bbaa801f5a2d3be2 Mon Sep 17 00:00:00 2001
From: Yosi Levy <37745463+yosilevy@users.noreply.github.com>
Date: Wed, 27 Jul 2022 12:39:44 +0300
Subject: [PATCH] Fix conversation RTL + text-alignment (#13264)

---
 src/components/ha-textfield.ts                      |  2 +-
 .../voice-command-dialog/ha-voice-command-dialog.ts | 13 +++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/ha-textfield.ts b/src/components/ha-textfield.ts
index 32c9bbde6f..15f92ad470 100644
--- a/src/components/ha-textfield.ts
+++ b/src/components/ha-textfield.ts
@@ -83,7 +83,7 @@ export class HaTextField extends TextFieldBase {
       }
 
       input {
-        text-align: var(--text-field-text-align);
+        text-align: var(--text-field-text-align, start);
       }
 
       /* Chrome, Safari, Edge, Opera */
diff --git a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
index d05e441781..64f9d0900c 100644
--- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
+++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
@@ -329,6 +329,9 @@ export class HaVoiceCommandDialog extends LitElement {
         ha-icon-button {
           color: var(--secondary-text-color);
           margin-right: -24px;
+          margin-inline-end: -24px;
+          margin-inline-start: initial;
+          direction: var(--direction);
         }
 
         ha-icon-button[active] {
@@ -373,19 +376,25 @@ export class HaVoiceCommandDialog extends LitElement {
 
         .message.user {
           margin-left: 24px;
-          float: right;
+          margin-inline-start: 24px;
+          margin-inline-end: initial;
+          float: var(--float-end);
           text-align: right;
           border-bottom-right-radius: 0px;
           background-color: var(--light-primary-color);
           color: var(--text-light-primary-color, var(--primary-text-color));
+          direction: var(--direction);
         }
 
         .message.hass {
           margin-right: 24px;
-          float: left;
+          margin-inline-end: 24px;
+          margin-inline-start: initial;
+          float: var(--float-start);
           border-bottom-left-radius: 0px;
           background-color: var(--primary-color);
           color: var(--text-primary-color);
+          direction: var(--direction);
         }
 
         .message a {