From 6c25e23ad27f76adee2bcd9b034d1823623a7d63 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Wed, 3 May 2023 15:14:02 +0200
Subject: [PATCH] RTL fixes for voice assistant page (#16398)

---
 src/panels/config/voice-assistants/assist-pref.ts          | 7 +++++++
 src/panels/config/voice-assistants/cloud-alexa-pref.ts     | 2 ++
 src/panels/config/voice-assistants/cloud-google-pref.ts    | 2 ++
 .../ha-config-voice-assistants-assistants.ts               | 5 +++--
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/panels/config/voice-assistants/assist-pref.ts b/src/panels/config/voice-assistants/assist-pref.ts
index 47149da4dd..65665b9ce7 100644
--- a/src/panels/config/voice-assistants/assist-pref.ts
+++ b/src/panels/config/voice-assistants/assist-pref.ts
@@ -207,9 +207,14 @@ export class AssistPref extends LitElement {
         display: flex;
         flex-direction: row;
       }
+      :host([dir="rtl"]) .header-actions {
+        right: auto;
+        left: 0;
+      }
       .header-actions .icon-link {
         margin-top: -16px;
         margin-inline-end: 8px;
+        margin-inline-start: 8px;
         margin-right: 8px;
         direction: var(--direction);
         color: var(--secondary-text-color);
@@ -239,6 +244,8 @@ export class AssistPref extends LitElement {
       img {
         height: 28px;
         margin-right: 16px;
+        margin-inline-end: 16px;
+        margin-inline-start: initial;
       }
     `;
   }
diff --git a/src/panels/config/voice-assistants/cloud-alexa-pref.ts b/src/panels/config/voice-assistants/cloud-alexa-pref.ts
index 4f4eeef1cf..2e3f507a64 100644
--- a/src/panels/config/voice-assistants/cloud-alexa-pref.ts
+++ b/src/panels/config/voice-assistants/cloud-alexa-pref.ts
@@ -284,6 +284,8 @@ export class CloudAlexaPref extends LitElement {
       img {
         height: 28px;
         margin-right: 16px;
+        margin-inline-end: 16px;
+        margin-inline-start: initial;
       }
     `;
   }
diff --git a/src/panels/config/voice-assistants/cloud-google-pref.ts b/src/panels/config/voice-assistants/cloud-google-pref.ts
index ebdcdef163..dfe3b263de 100644
--- a/src/panels/config/voice-assistants/cloud-google-pref.ts
+++ b/src/panels/config/voice-assistants/cloud-google-pref.ts
@@ -364,6 +364,8 @@ export class CloudGooglePref extends LitElement {
       img {
         height: 28px;
         margin-right: 16px;
+        margin-inline-end: 16px;
+        margin-inline-start: initial;
       }
     `;
   }
diff --git a/src/panels/config/voice-assistants/ha-config-voice-assistants-assistants.ts b/src/panels/config/voice-assistants/ha-config-voice-assistants-assistants.ts
index f1cfc8b24e..e88e0d9128 100644
--- a/src/panels/config/voice-assistants/ha-config-voice-assistants-assistants.ts
+++ b/src/panels/config/voice-assistants/ha-config-voice-assistants-assistants.ts
@@ -50,6 +50,7 @@ export class HaConfigVoiceAssistantsAssistants extends LitElement {
           ${isComponentLoaded(this.hass, "assist_pipeline")
             ? html`
                 <assist-pref
+                  .dir=${computeRTLDirection(this.hass)}
                   .hass=${this.hass}
                   .cloudStatus=${this.cloudStatus}
                   .exposedEntities=${this.exposedEntities}
@@ -62,13 +63,13 @@ export class HaConfigVoiceAssistantsAssistants extends LitElement {
                   .hass=${this.hass}
                   .exposedEntities=${this.exposedEntities}
                   .cloudStatus=${this.cloudStatus}
-                  dir=${computeRTLDirection(this.hass)}
+                  .dir=${computeRTLDirection(this.hass)}
                 ></cloud-alexa-pref>
                 <cloud-google-pref
                   .hass=${this.hass}
                   .exposedEntities=${this.exposedEntities}
                   .cloudStatus=${this.cloudStatus}
-                  dir=${computeRTLDirection(this.hass)}
+                  .dir=${computeRTLDirection(this.hass)}
                 ></cloud-google-pref>
               `
             : html`<cloud-discover .hass=${this.hass}></cloud-discover>`}