diff --git a/hassio/src/dashboard/hassio-addons.ts b/hassio/src/dashboard/hassio-addons.ts index 7b3c9d166f..daeb867ef6 100644 --- 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 index d60819861c..a38c37b8a8 100644 --- 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 index 9402728160..86dc819988 100644 --- 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); + } }