Fix for RTL in Supervisor dashboards (home-assistant#19290)

surfingbytes · Jan 5, 2024 · 783a824 · 783a824
1 parent 7a8f5c0
commit 783a824
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/hassio/src/dashboard/hassio-addons.ts b/hassio/src/dashboard/hassio-addons.ts
@@ -128,6 +128,7 @@ class HassioAddons extends LitElement {
         ha-card {
           cursor: pointer;
           overflow: hidden;
+          direction: ltr;
         }
         .search {
           position: sticky;

diff --git a/hassio/src/dashboard/hassio-dashboard.ts b/hassio/src/dashboard/hassio-dashboard.ts
@@ -133,6 +133,8 @@ class HassioDashboard extends LitElement {
           position: fixed;
           right: calc(16px + env(safe-area-inset-right));
           bottom: calc(16px + env(safe-area-inset-bottom));
+          inset-inline-end: calc(16px + env(safe-area-inset-right));
+          inset-inline-start: initial;
           z-index: 1;
         }
       `,

diff --git a/hassio/src/supervisor-base-element.ts b/hassio/src/supervisor-base-element.ts
@@ -29,6 +29,10 @@ import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
 import { urlSyncMixin } from "../../src/state/url-sync-mixin";
 import { HomeAssistant, Route } from "../../src/types";
 import { getTranslation } from "../../src/util/common-translation";
+import {
+  computeRTLDirection,
+  setDirectionStyles,
+} from "../../src/common/util/compute_rtl";
 
 declare global {
   interface HASSDomEvents {
@@ -95,6 +99,7 @@ export class SupervisorBaseElement extends urlSyncMixin(
 
     if (changedProperties.has("_language") || !this.hasUpdated) {
       this._initializeLocalize();
+      this._applyDirection(this.hass);
     }
   }
 
@@ -215,4 +220,9 @@ export class SupervisorBaseElement extends urlSyncMixin(
       );
     }
   }
+
+  private _applyDirection(hass: HomeAssistant) {
+    const direction = computeRTLDirection(hass);
+    setDirectionStyles(direction, this);
+  }
 }