From da10da79b3e07d27dda80d23d0d14684ad1d52f9 Mon Sep 17 00:00:00 2001
From: Yosi Levy <yosilevy@gmail.com>
Date: Sun, 5 Jul 2020 06:23:35 +0300
Subject: [PATCH] RTL fixes - cloud section, ha-formfield, some missing +
 (mwc-fab)

---
 src/components/ha-dialog.ts                   |  6 ++
 src/components/ha-formfield.ts                |  4 +-
 .../dialog-config-entry-system-options.ts     |  2 +
 .../config/cloud/account/cloud-account.js     | 14 +++-
 .../config/cloud/account/cloud-alexa-pref.ts  |  4 +
 .../config/cloud/account/cloud-google-pref.ts |  4 +
 .../config/cloud/account/cloud-remote-pref.ts |  4 +
 src/panels/config/cloud/alexa/cloud-alexa.ts  |  2 +
 .../forgot-password/cloud-forgot-password.js  |  1 -
 .../cloud-google-assistant.ts                 | 56 +++++++-------
 src/panels/config/cloud/login/cloud-login.js  |  1 -
 .../config/cloud/register/cloud-register.js   |  4 -
 .../mqtt/dialog-mqtt-device-debug-info.ts     | 50 ++++++------
 .../dialog-lovelace-dashboard-detail.ts       | 50 ++++++------
 .../ha-config-lovelace-dashboards.ts          |  6 ++
 src/panels/config/users/dialog-add-user.ts    |  2 +
 src/panels/config/users/dialog-user-detail.ts |  2 +
 src/panels/config/zone/dialog-zone-detail.ts  |  2 +
 src/panels/config/zone/ha-config-zone.ts      |  6 ++
 .../config-elements/hui-button-card-editor.ts | 51 +++++++------
 .../hui-entities-card-editor.ts               |  2 +
 .../config-elements/hui-gauge-card-editor.ts  |  2 +
 .../config-elements/hui-glance-card-editor.ts | 76 +++++++++++--------
 .../config-elements/hui-map-card-editor.ts    |  2 +
 .../hui-picture-entity-card-editor.ts         | 51 +++++++------
 .../hui-weather-forecast-card-editor.ts       |  2 +
 .../lovelace/editor/hui-dialog-save-config.ts |  2 +
 .../editor/view-editor/hui-view-editor.ts     |  4 +-
 28 files changed, 252 insertions(+), 160 deletions(-)

diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts
index 6a6d35a031..d341cf2b8c 100644
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -5,6 +5,7 @@ import "./ha-icon-button";
 import { css, CSSResult, customElement, html } from "lit-element";
 import type { Constructor, HomeAssistant } from "../types";
 import { mdiClose } from "@mdi/js";
+import { computeRTL } from "../common/util/compute_rtl";
 
 const MwcDialog = customElements.get("mwc-dialog") as Constructor<Dialog>;
 
@@ -13,6 +14,7 @@ export const createCloseHeading = (hass: HomeAssistant, title: string) => html`
   <mwc-icon-button
     aria-label=${hass.localize("ui.dialogs.generic.close")}
     dialogAction="close"
+    ?rtl=${computeRTL(hass)}
     class="header_button"
   >
     <ha-svg-icon path=${mdiClose}></ha-svg-icon>
@@ -48,6 +50,10 @@ export class HaDialog extends MwcDialog {
           text-decoration: none;
           color: inherit;
         }
+        mwc-icon-button[rtl].header_button {
+          right: auto;
+          left: 16px;
+        }
       `,
     ];
   }
diff --git a/src/components/ha-formfield.ts b/src/components/ha-formfield.ts
index 45462d0689..211ee8d0b0 100644
--- a/src/components/ha-formfield.ts
+++ b/src/components/ha-formfield.ts
@@ -17,9 +17,9 @@ export class HaFormfield extends MwcFormfield {
         ::slotted(ha-switch) {
           margin-right: 10px;
         }
-        [dir="rtl"] ::slotted(ha-switch),
-        ::slotted(ha-switch)[dir="rtl"] {
+        :host([dir="rtl"]:not([alignEnd])) ::slotted(ha-switch) {
           margin-left: 10px;
+          margin-right: auto;
         }
       `,
     ];
diff --git a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
index cb2f95a287..04055aeefa 100644
--- a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
+++ b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
@@ -22,6 +22,7 @@ import type { PolymerChangedEvent } from "../../polymer-types";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { ConfigEntrySystemOptionsDialogParams } from "./show-dialog-config-entry-system-options";
+import { computeRTLDirection } from "../../common/util/compute_rtl";
 
 @customElement("dialog-config-entry-system-options")
 class DialogConfigEntrySystemOptions extends LitElement {
@@ -99,6 +100,7 @@ class DialogConfigEntrySystemOptions extends LitElement {
                           ) || this._params.entry.domain
                         )}
                       </p>`}
+                    .dir="${computeRTLDirection(this.hass)}"
                   >
                     <ha-switch
                       .checked=${!this._disableNewEntities}
diff --git a/src/panels/config/cloud/account/cloud-account.js b/src/panels/config/cloud/account/cloud-account.js
index b622c8a9ff..fda5256c36 100644
--- a/src/panels/config/cloud/account/cloud-account.js
+++ b/src/panels/config/cloud/account/cloud-account.js
@@ -10,6 +10,7 @@ import { fetchCloudSubscriptionInfo } from "../../../../data/cloud";
 import "../../../../layouts/hass-subpage";
 import { EventsMixin } from "../../../../mixins/events-mixin";
 import LocalizeMixin from "../../../../mixins/localize-mixin";
+import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../styles/polymer-ha-style";
 import "../../ha-config-section";
 import "./cloud-alexa-pref";
@@ -33,7 +34,6 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
         }
         .content {
           padding-bottom: 24px;
-          direction: ltr;
         }
         .account-row {
           display: flex;
@@ -132,21 +132,25 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
             <cloud-remote-pref
               hass="[[hass]]"
               cloud-status="[[cloudStatus]]"
+              dir="[[_rtlDirection]]"
             ></cloud-remote-pref>
 
             <cloud-alexa-pref
               hass="[[hass]]"
               cloud-status="[[cloudStatus]]"
+              dir="[[_rtlDirection]]"
             ></cloud-alexa-pref>
 
             <cloud-google-pref
               hass="[[hass]]"
               cloud-status="[[cloudStatus]]"
+              dir="[[_rtlDirection]]"
             ></cloud-google-pref>
 
             <cloud-webhooks
               hass="[[hass]]"
               cloud-status="[[cloudStatus]]"
+              dir="[[_rtlDirection]]"
             ></cloud-webhooks>
           </ha-config-section>
         </div>
@@ -163,6 +167,10 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
         type: Object,
         value: null,
       },
+      _rtlDirection: {
+        type: Boolean,
+        computed: "_computeRTLDirection(hass)",
+      },
     };
   }
 
@@ -215,6 +223,10 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
 
     return description;
   }
+
+  _computeRTLDirection(hass) {
+    return computeRTLDirection(hass);
+  }
 }
 
 customElements.define("cloud-account", CloudAccount);
diff --git a/src/panels/config/cloud/account/cloud-alexa-pref.ts b/src/panels/config/cloud/account/cloud-alexa-pref.ts
index bedd66fe3e..8fae8a1895 100644
--- a/src/panels/config/cloud/account/cloud-alexa-pref.ts
+++ b/src/panels/config/cloud/account/cloud-alexa-pref.ts
@@ -167,6 +167,10 @@ export class CloudAlexaPref extends LitElement {
         right: 24px;
         top: 32px;
       }
+      :host([dir="rtl"]) .switch {
+        right: auto;
+        left: 24px;
+      }
       .card-actions {
         display: flex;
       }
diff --git a/src/panels/config/cloud/account/cloud-google-pref.ts b/src/panels/config/cloud/account/cloud-google-pref.ts
index f701a27e8c..ed9db0a768 100644
--- a/src/panels/config/cloud/account/cloud-google-pref.ts
+++ b/src/panels/config/cloud/account/cloud-google-pref.ts
@@ -205,6 +205,10 @@ export class CloudGooglePref extends LitElement {
         right: 24px;
         top: 32px;
       }
+      :host([dir="rtl"]) .switch {
+        right: auto;
+        left: 24px;
+      }
       ha-call-api-button {
         color: var(--primary-color);
         font-weight: 500;
diff --git a/src/panels/config/cloud/account/cloud-remote-pref.ts b/src/panels/config/cloud/account/cloud-remote-pref.ts
index 7455d1d9bc..c2c72c1ed7 100644
--- a/src/panels/config/cloud/account/cloud-remote-pref.ts
+++ b/src/panels/config/cloud/account/cloud-remote-pref.ts
@@ -150,6 +150,10 @@ export class CloudRemotePref extends LitElement {
         right: 24px;
         top: 32px;
       }
+      :host([dir="rtl"]) .switch {
+        right: auto;
+        left: 24px;
+      }
       .card-actions {
         display: flex;
       }
diff --git a/src/panels/config/cloud/alexa/cloud-alexa.ts b/src/panels/config/cloud/alexa/cloud-alexa.ts
index e0218135b6..69332699a7 100644
--- a/src/panels/config/cloud/alexa/cloud-alexa.ts
+++ b/src/panels/config/cloud/alexa/cloud-alexa.ts
@@ -34,6 +34,7 @@ import "../../../../layouts/hass-loading-screen";
 import "../../../../layouts/hass-subpage";
 import type { HomeAssistant } from "../../../../types";
 import "../../../../components/ha-formfield";
+import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 
 const DEFAULT_CONFIG_EXPOSE = true;
 const IGNORE_INTERFACES = ["Alexa.EndpointHealth"];
@@ -132,6 +133,7 @@ class CloudAlexa extends LitElement {
               .label=${this.hass!.localize(
                 "ui.panel.config.cloud.alexa.expose"
               )}
+              .dir="${computeRTLDirection(this.hass!)}"
             >
               <ha-switch
                 .entityId=${entity.entity_id}
diff --git a/src/panels/config/cloud/forgot-password/cloud-forgot-password.js b/src/panels/config/cloud/forgot-password/cloud-forgot-password.js
index db67dce724..65b0ee4708 100644
--- a/src/panels/config/cloud/forgot-password/cloud-forgot-password.js
+++ b/src/panels/config/cloud/forgot-password/cloud-forgot-password.js
@@ -19,7 +19,6 @@ class CloudForgotPassword extends LocalizeMixin(EventsMixin(PolymerElement)) {
       <style include="iron-flex ha-style">
         .content {
           padding-bottom: 24px;
-          direction: ltr;
         }
 
         ha-card {
diff --git a/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts b/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
index a6738488cc..e96500a6a7 100644
--- a/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
+++ b/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
@@ -39,6 +39,7 @@ import "../../../../layouts/hass-subpage";
 import type { HomeAssistant } from "../../../../types";
 import { showToast } from "../../../../util/toast";
 import "../../../../components/ha-formfield";
+import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 
 const DEFAULT_CONFIG_EXPOSE = true;
 
@@ -128,32 +129,38 @@ class CloudGoogleAssistant extends LitElement {
                 .map((trait) => trait.substr(trait.lastIndexOf(".") + 1))
                 .join(", ")}
             </state-info>
-            <ha-formfield
-              .label=${this.hass!.localize(
-                "ui.panel.config.cloud.google.expose"
-              )}
-            >
-              <ha-switch
-                .entityId=${entity.entity_id}
-                .disabled=${!emptyFilter}
-                .checked=${isExposed}
-                @change=${this._exposeChanged}
+            <div>
+              <ha-formfield
+                .label=${this.hass!.localize(
+                  "ui.panel.config.cloud.google.expose"
+                )}
+                .dir="${computeRTLDirection(this.hass!)}"
               >
-              </ha-switch>
-            </ha-formfield>
+                <ha-switch
+                  .entityId=${entity.entity_id}
+                  .disabled=${!emptyFilter}
+                  .checked=${isExposed}
+                  @change=${this._exposeChanged}
+                >
+                </ha-switch>
+              </ha-formfield>
+            </div>
             ${entity.might_2fa
               ? html`
-                  <ha-formfield
-                    .label=${this.hass!.localize(
-                      "ui.panel.config.cloud.google.disable_2FA"
-                    )}
-                  >
-                    <ha-switch
-                      .entityId=${entity.entity_id}
-                      .checked=${Boolean(config.disable_2fa)}
-                      @change=${this._disable2FAChanged}
-                    ></ha-switch>
-                  </ha-formfield>
+                  <div>
+                    <ha-formfield
+                      .label=${this.hass!.localize(
+                        "ui.panel.config.cloud.google.disable_2FA"
+                      )}
+                      .dir="${computeRTLDirection(this.hass!)}"
+                    >
+                      <ha-switch
+                        .entityId=${entity.entity_id}
+                        .checked=${Boolean(config.disable_2fa)}
+                        @change=${this._disable2FAChanged}
+                      ></ha-switch>
+                    </ha-formfield>
+                  </div>
                 `
               : ""}
           </div>
@@ -377,9 +384,6 @@ class CloudGoogleAssistant extends LitElement {
       state-info {
         cursor: pointer;
       }
-      ha-formfield {
-        display: block;
-      }
       ha-switch {
         padding: 8px 0;
       }
diff --git a/src/panels/config/cloud/login/cloud-login.js b/src/panels/config/cloud/login/cloud-login.js
index c251be6ffe..c5ac31c43d 100644
--- a/src/panels/config/cloud/login/cloud-login.js
+++ b/src/panels/config/cloud/login/cloud-login.js
@@ -30,7 +30,6 @@ class CloudLogin extends LocalizeMixin(
       <style include="iron-flex ha-style">
         .content {
           padding-bottom: 24px;
-          direction: ltr;
         }
         [slot="introduction"] {
           margin: -1em 0;
diff --git a/src/panels/config/cloud/register/cloud-register.js b/src/panels/config/cloud/register/cloud-register.js
index 7a3fab226a..8b5b04c5b1 100644
--- a/src/panels/config/cloud/register/cloud-register.js
+++ b/src/panels/config/cloud/register/cloud-register.js
@@ -18,10 +18,6 @@ class CloudRegister extends LocalizeMixin(EventsMixin(PolymerElement)) {
   static get template() {
     return html`
     <style include="iron-flex ha-style">
-      .content {
-        direction: ltr;
-      }
-
       [slot=introduction] {
         margin: -1em 0;
       }
diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts
index 920b1ef790..f1c5f3aff6 100644
--- a/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts
@@ -23,6 +23,7 @@ import { HomeAssistant } from "../../../../../../types";
 import "./mqtt-discovery-payload";
 import "./mqtt-messages";
 import { MQTTDeviceDebugInfoDialogParams } from "./show-dialog-mqtt-device-debug-info";
+import { computeRTLDirection } from "../../../../../../common/util/compute_rtl";
 
 @customElement("dialog-mqtt-device-debug-info")
 class DialogMQTTDeviceDebugInfo extends LitElement {
@@ -65,28 +66,34 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
             "ui.dialogs.mqtt_device_debug_info.payload_display"
           )}
         </h4>
-        <ha-formfield
-          .label=${this.hass!.localize(
-            "ui.dialogs.mqtt_device_debug_info.deserialize"
-          )}
-        >
-          <ha-switch
-            .checked=${this._showDeserialized}
-            @change=${this._showDeserializedChanged}
+        <div>
+          <ha-formfield
+            .label=${this.hass!.localize(
+              "ui.dialogs.mqtt_device_debug_info.deserialize"
+            )}
+            .dir="${computeRTLDirection(this.hass)}"
           >
-          </ha-switch>
-        </ha-formfield>
-        <ha-formfield
-          .label=${this.hass!.localize(
-            "ui.dialogs.mqtt_device_debug_info.show_as_yaml"
-          )}
-        >
-          <ha-switch
-            .checked=${this._showAsYaml}
-            @change=${this._showAsYamlChanged}
+            <ha-switch
+              .checked=${this._showDeserialized}
+              @change=${this._showDeserializedChanged}
+            >
+            </ha-switch>
+          </ha-formfield>
+        </div>
+        <div>
+          <ha-formfield
+            .label=${this.hass!.localize(
+              "ui.dialogs.mqtt_device_debug_info.show_as_yaml"
+            )}
+            .dir="${computeRTLDirection(this.hass)}"
           >
-          </ha-switch>
-        </ha-formfield>
+            <ha-switch
+              .checked=${this._showAsYaml}
+              @change=${this._showAsYamlChanged}
+            >
+            </ha-switch>
+          </ha-formfield>
+        </div>
         <h4>
           ${this.hass!.localize("ui.dialogs.mqtt_device_debug_info.entities")}
         </h4>
@@ -232,9 +239,6 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
         .triggerlistitem {
           margin-bottom: 12px;
         }
-        ha-formfield {
-          display: block;
-        }
       `,
     ];
   }
diff --git a/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts b/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts
index a99cf2c359..9159c085e6 100644
--- a/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts
+++ b/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts
@@ -24,6 +24,7 @@ import { PolymerChangedEvent } from "../../../../polymer-types";
 import { haStyleDialog } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceDashboardDetailsDialogParams } from "./show-dialog-lovelace-dashboard-detail";
+import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 
 @customElement("dialog-lovelace-dashboard-detail")
 export class DialogLovelaceDashboardDetail extends LitElement {
@@ -143,28 +144,34 @@ export class DialogLovelaceDashboardDetail extends LitElement {
                         ></paper-input>
                       `
                     : ""}
-                  <ha-formfield
-                    .label=${this.hass.localize(
-                      "ui.panel.config.lovelace.dashboards.detail.show_sidebar"
-                    )}
-                  >
-                    <ha-switch
-                      .checked=${this._showInSidebar}
-                      @change=${this._showSidebarChanged}
+                  <div>
+                    <ha-formfield
+                      .label=${this.hass.localize(
+                        "ui.panel.config.lovelace.dashboards.detail.show_sidebar"
+                      )}
+                      .dir="${computeRTLDirection(this.hass)}"
                     >
-                    </ha-switch>
-                  </ha-formfield>
-                  <ha-formfield
-                    .label=${this.hass.localize(
-                      "ui.panel.config.lovelace.dashboards.detail.require_admin"
-                    )}
-                  >
-                    <ha-switch
-                      .checked=${this._requireAdmin}
-                      @change=${this._requireAdminChanged}
+                      <ha-switch
+                        .checked=${this._showInSidebar}
+                        @change=${this._showSidebarChanged}
+                      >
+                      </ha-switch>
+                    </ha-formfield>
+                  </div>
+                  <div>
+                    <ha-formfield
+                      .label=${this.hass.localize(
+                        "ui.panel.config.lovelace.dashboards.detail.require_admin"
+                      )}
+                      .dir="${computeRTLDirection(this.hass)}"
                     >
-                    </ha-switch>
-                  </ha-formfield>
+                      <ha-switch
+                        .checked=${this._requireAdmin}
+                        @change=${this._requireAdminChanged}
+                      >
+                      </ha-switch>
+                    </ha-formfield>
+                  </div>
                 </div>
               `}
         </div>
@@ -318,9 +325,6 @@ export class DialogLovelaceDashboardDetail extends LitElement {
         ha-switch {
           padding: 16px 0;
         }
-        ha-formfield {
-          display: block;
-        }
       `,
     ];
   }
diff --git a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
index 936df789d2..e39c147483 100644
--- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
+++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
@@ -36,6 +36,7 @@ import { lovelaceTabs } from "../ha-config-lovelace";
 import { showDashboardDetailDialog } from "./show-dialog-lovelace-dashboard-detail";
 import "../../../../components/ha-svg-icon";
 import { mdiPlus } from "@mdi/js";
+import { computeRTL } from "../../../../common/util/compute_rtl";
 
 @customElement("ha-config-lovelace-dashboards")
 export class HaConfigLovelaceDashboards extends LitElement {
@@ -227,6 +228,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
       <mwc-fab
         ?is-wide=${this.isWide}
         ?narrow=${this.narrow}
+        ?rtl=${computeRTL(this.hass)}
         title="${this.hass.localize(
           "ui.panel.config.lovelace.dashboards.picker.add_dashboard"
         )}"
@@ -324,6 +326,10 @@ export class HaConfigLovelaceDashboards extends LitElement {
       mwc-fab[narrow] {
         bottom: 84px;
       }
+      mwc-fab[rtl] {
+        left: 16px;
+        right: auto;
+      }
     `;
   }
 }
diff --git a/src/panels/config/users/dialog-add-user.ts b/src/panels/config/users/dialog-add-user.ts
index ae90a7b05a..250767e40f 100644
--- a/src/panels/config/users/dialog-add-user.ts
+++ b/src/panels/config/users/dialog-add-user.ts
@@ -26,6 +26,7 @@ import { PolymerChangedEvent } from "../../../polymer-types";
 import { haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import { AddUserDialogParams } from "./show-dialog-add-user";
+import { computeRTLDirection } from "../../../common/util/compute_rtl";
 
 @customElement("dialog-add-user")
 export class DialogAddUser extends LitElement {
@@ -115,6 +116,7 @@ export class DialogAddUser extends LitElement {
           ></paper-input>
           <ha-formfield
             .label=${this.hass.localize("ui.panel.config.users.editor.admin")}
+            .dir="${computeRTLDirection(this.hass)}"
           >
             <ha-switch .checked=${this._isAdmin} @change=${this._adminChanged}>
             </ha-switch>
diff --git a/src/panels/config/users/dialog-user-detail.ts b/src/panels/config/users/dialog-user-detail.ts
index 430db81236..7d770d1550 100644
--- a/src/panels/config/users/dialog-user-detail.ts
+++ b/src/panels/config/users/dialog-user-detail.ts
@@ -21,6 +21,7 @@ import { PolymerChangedEvent } from "../../../polymer-types";
 import { haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import { UserDetailDialogParams } from "./show-dialog-user-detail";
+import { computeRTLDirection } from "../../../common/util/compute_rtl";
 
 @customElement("dialog-user-detail")
 class DialogUserDetail extends LitElement {
@@ -102,6 +103,7 @@ class DialogUserDetail extends LitElement {
             ></paper-input>
             <ha-formfield
               .label=${this.hass.localize("ui.panel.config.users.editor.admin")}
+              .dir="${computeRTLDirection(this.hass)}"
             >
               <ha-switch
                 .disabled=${user.system_generated}
diff --git a/src/panels/config/zone/dialog-zone-detail.ts b/src/panels/config/zone/dialog-zone-detail.ts
index ea656125a6..8bfc9a15fe 100644
--- a/src/panels/config/zone/dialog-zone-detail.ts
+++ b/src/panels/config/zone/dialog-zone-detail.ts
@@ -22,6 +22,7 @@ import {
 import { haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import { ZoneDetailDialogParams } from "./show-dialog-zone-detail";
+import { computeRTLDirection } from "../../../common/util/compute_rtl";
 
 class DialogZoneDetail extends LitElement {
   @property() public hass!: HomeAssistant;
@@ -186,6 +187,7 @@ class DialogZoneDetail extends LitElement {
               .label=${this.hass!.localize(
                 "ui.panel.config.zone.detail.passive"
               )}
+              .dir="${computeRTLDirection(this.hass)}"
             >
               <ha-switch
                 .checked=${this._passive}
diff --git a/src/panels/config/zone/ha-config-zone.ts b/src/panels/config/zone/ha-config-zone.ts
index 1d794fa3e4..a98f041bfe 100644
--- a/src/panels/config/zone/ha-config-zone.ts
+++ b/src/panels/config/zone/ha-config-zone.ts
@@ -50,6 +50,7 @@ import type { HomeAssistant, Route } from "../../../types";
 import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
 import { showZoneDetailDialog } from "./show-dialog-zone-detail";
+import { computeRTL } from "../../../common/util/compute_rtl";
 
 @customElement("ha-config-zone")
 export class HaConfigZone extends SubscribeMixin(LitElement) {
@@ -258,6 +259,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
       <mwc-fab
         ?is-wide=${this.isWide}
         ?narrow=${this.narrow}
+        ?rtl=${computeRTL(this.hass)}
         title="${hass.localize("ui.panel.config.zone.add_zone")}"
         @click=${this._createZone}
       >
@@ -554,6 +556,10 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
       mwc-fab[narrow] {
         bottom: 84px;
       }
+      mwc-fab[rtl] {
+        left: 24px;
+        right: auto;
+      }
     `;
   }
 }
diff --git a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
index 0b76abb66a..f812b2cb73 100644
--- a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
@@ -25,6 +25,7 @@ import {
 import "../../../../components/ha-switch";
 import "../../../../components/ha-formfield";
 import { configElementStyle } from "./config-elements-style";
+import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 
 const cardConfigStruct = struct({
   type: "string",
@@ -143,28 +144,34 @@ export class HuiButtonCardEditor extends LitElement
           ></ha-icon-input>
         </div>
         <div class="side-by-side">
-          <ha-formfield
-            .label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.show_name"
-            )}
-          >
-            <ha-switch
-              .checked="${this._config!.show_name !== false}"
-              .configValue="${"show_name"}"
-              @change="${this._valueChanged}"
-            ></ha-switch>
-          </ha-formfield>
-          <ha-formfield
-            .label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.show_icon"
-            )}
-          >
-            <ha-switch
-              .checked="${this._config!.show_icon !== false}"
-              .configValue="${"show_icon"}"
-              @change="${this._valueChanged}"
-            ></ha-switch>
-          </ha-formfield>
+          <div>
+            <ha-formfield
+              .label=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.show_name"
+              )}
+              .dir="${computeRTLDirection(this.hass)}"
+            >
+              <ha-switch
+                .checked="${this._config!.show_name !== false}"
+                .configValue="${"show_name"}"
+                @change="${this._valueChanged}"
+              ></ha-switch>
+            </ha-formfield>
+          </div>
+          <div>
+            <ha-formfield
+              .label=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.show_icon"
+              )}
+              .dir="${computeRTLDirection(this.hass)}"
+            >
+              <ha-switch
+                .checked="${this._config!.show_icon !== false}"
+                .configValue="${"show_icon"}"
+                @change="${this._valueChanged}"
+              ></ha-switch>
+            </ha-formfield>
+          </div>
         </div>
         <div class="side-by-side">
           <paper-input
diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
index 798a0f5708..1c73d134a7 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
@@ -31,6 +31,7 @@ import {
   EntitiesEditorEvent,
 } from "../types";
 import { configElementStyle } from "./config-elements-style";
+import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 
 const cardConfigStruct = struct({
   type: "string",
@@ -93,6 +94,7 @@ export class HuiEntitiesCardEditor extends LitElement
           .label=${this.hass.localize(
             "ui.panel.lovelace.editor.card.entities.show_header_toggle"
           )}
+          .dir="${computeRTLDirection(this.hass)}"
         >
           <ha-switch
             .checked="${this._config!.show_header_toggle !== false}"
diff --git a/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
index 4703162c0e..078884a0b5 100644
--- a/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
@@ -19,6 +19,7 @@ import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
+import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 
 const cardConfigStruct = struct({
   type: "string",
@@ -146,6 +147,7 @@ export class HuiGaugeCardEditor extends LitElement
           .label=${this.hass.localize(
             "ui.panel.lovelace.editor.card.gauge.severity.define"
           )}
+          .dir="${computeRTLDirection(this.hass)}"
         >
           <ha-switch
             .checked="${this._config!.severity !== undefined}"
diff --git a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
index 714e8b7d6f..93e5bc3137 100644
--- a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
@@ -27,6 +27,7 @@ import {
   EntitiesEditorEvent,
 } from "../types";
 import { configElementStyle } from "./config-elements-style";
+import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 
 const cardConfigStruct = struct({
   type: "string",
@@ -116,41 +117,50 @@ export class HuiGlanceCardEditor extends LitElement
           ></paper-input>
         </div>
         <div class="side-by-side">
-          <ha-formfield
-            .label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.show_name"
-            )}
-          >
-            <ha-switch
-              .checked=${this._config!.show_name !== false}
-              .configValue="${"show_name"}"
-              @change="${this._valueChanged}"
-            ></ha-switch>
-          </ha-formfield>
-          <ha-formfield
-            .label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.show_icon"
-            )}
-          >
-            <ha-switch
-              .checked=${this._config!.show_icon !== false}
-              .configValue="${"show_icon"}"
-              @change="${this._valueChanged}"
+          <div>
+            <ha-formfield
+              .label=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.show_name"
+              )}
+              .dir="${computeRTLDirection(this.hass)}"
             >
-            </ha-switch>
-          </ha-formfield>
-          <ha-formfield
-            .label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.show_state"
-            )}
-          >
-            <ha-switch
-              .checked=${this._config!.show_state !== false}
-              .configValue="${"show_state"}"
-              @change="${this._valueChanged}"
+              <ha-switch
+                .checked=${this._config!.show_name !== false}
+                .configValue="${"show_name"}"
+                @change="${this._valueChanged}"
+              ></ha-switch>
+            </ha-formfield>
+          </div>
+          <div>
+            <ha-formfield
+              .label=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.show_icon"
+              )}
+              .dir="${computeRTLDirection(this.hass)}"
             >
-            </ha-switch>
-          </ha-formfield>
+              <ha-switch
+                .checked=${this._config!.show_icon !== false}
+                .configValue="${"show_icon"}"
+                @change="${this._valueChanged}"
+              >
+              </ha-switch>
+            </ha-formfield>
+          </div>
+          <div>
+            <ha-formfield
+              .label=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.show_state"
+              )}
+              .dir="${computeRTLDirection(this.hass)}"
+            >
+              <ha-switch
+                .checked=${this._config!.show_state !== false}
+                .configValue="${"show_state"}"
+                @change="${this._valueChanged}"
+              >
+              </ha-switch>
+            </ha-formfield>
+          </div>
         </div>
       </div>
       <hui-entity-editor
diff --git a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
index 77e6c60630..8931d799f1 100644
--- a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
@@ -26,6 +26,7 @@ import {
 import "../../../../components/ha-switch";
 import "../../../../components/ha-formfield";
 import { configElementStyle } from "./config-elements-style";
+import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 
 const cardConfigStruct = struct({
   type: "string",
@@ -124,6 +125,7 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
             .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.map.dark_mode"
             )}
+            .dir="${computeRTLDirection(this.hass)}"
           >
             <ha-switch
               .checked="${this._dark_mode}"
diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
index efd1e2b831..c186751326 100644
--- a/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
@@ -26,6 +26,7 @@ import {
   EntitiesEditorEvent,
 } from "../types";
 import { configElementStyle } from "./config-elements-style";
+import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 
 const cardConfigStruct = struct({
   type: "string",
@@ -188,28 +189,34 @@ export class HuiPictureEntityCardEditor extends LitElement
           ></paper-input>
         </div>
         <div class="side-by-side">
-          <ha-formfield
-            .label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.show_name"
-            )}
-          >
-            <ha-switch
-              .checked="${this._config!.show_name !== false}"
-              .configValue="${"show_name"}"
-              @change="${this._valueChanged}"
-            ></ha-switch
-          ></ha-formfield>
-          <ha-formfield
-            .label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.show_state"
-            )}
-          >
-            <ha-switch
-              .checked="${this._config!.show_state !== false}"
-              .configValue="${"show_state"}"
-              @change="${this._valueChanged}"
-            ></ha-switch
-          ></ha-formfield>
+          <div>
+            <ha-formfield
+              .label=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.show_name"
+              )}
+              .dir="${computeRTLDirection(this.hass)}"
+            >
+              <ha-switch
+                .checked="${this._config!.show_name !== false}"
+                .configValue="${"show_name"}"
+                @change="${this._valueChanged}"
+              ></ha-switch
+            ></ha-formfield>
+          </div>
+          <div>
+            <ha-formfield
+              .label=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.show_state"
+              )}
+              .dir="${computeRTLDirection(this.hass)}"
+            >
+              <ha-switch
+                .checked="${this._config!.show_state !== false}"
+                .configValue="${"show_state"}"
+                @change="${this._valueChanged}"
+              ></ha-switch
+            ></ha-formfield>
+          </div>
         </div>
         <div class="side-by-side">
           <hui-action-editor
diff --git a/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts
index f5d447c00b..b048068fcf 100644
--- a/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts
@@ -16,6 +16,7 @@ import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
+import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 
 const cardConfigStruct = struct({
   type: "string",
@@ -114,6 +115,7 @@ export class HuiWeatherForecastCardEditor extends LitElement
             .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.weather-forecast.show_forecast"
             )}
+            .dir="${computeRTLDirection(this.hass)}"
           >
             <ha-switch
               .checked=${this._config!.show_forecast !== false}
diff --git a/src/panels/lovelace/editor/hui-dialog-save-config.ts b/src/panels/lovelace/editor/hui-dialog-save-config.ts
index e6f6c0eb21..0fde23d44b 100644
--- a/src/panels/lovelace/editor/hui-dialog-save-config.ts
+++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts
@@ -21,6 +21,7 @@ import type { PolymerChangedEvent } from "../../../polymer-types";
 import { haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import type { SaveDialogParams } from "./show-save-config-dialog";
+import { computeRTLDirection } from "../../../common/util/compute_rtl";
 
 const EMPTY_CONFIG = { views: [] };
 
@@ -77,6 +78,7 @@ export class HuiSaveConfig extends LitElement {
                   .label=${this.hass!.localize(
                     "ui.panel.lovelace.editor.save_config.empty_config"
                   )}
+                  .dir="${computeRTLDirection(this.hass)}"
                 >
                   <ha-switch
                     .checked=${this._emptyConfig}
diff --git a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts b/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
index f9bdb23a41..290837d6c9 100644
--- a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
@@ -18,6 +18,7 @@ import { HomeAssistant } from "../../../../types";
 import "../../components/hui-theme-select-editor";
 import { configElementStyle } from "../config-elements/config-elements-style";
 import { EditorTarget } from "../types";
+import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 
 declare global {
   interface HASSDomEvents {
@@ -126,6 +127,7 @@ export class HuiViewEditor extends LitElement {
           .label=${this.hass.localize(
             "ui.panel.lovelace.editor.view.panel_mode.title"
           )}
+          .dir="${computeRTLDirection(this.hass!)}"
         >
           <ha-switch
             .checked=${this._panel !== false}
@@ -180,8 +182,6 @@ export class HuiViewEditor extends LitElement {
     return css`
       .panel {
         color: var(--secondary-text-color);
-      }
-      ha-formfield {
         display: block;
       }
     `;