From 97652bd2f6bfc6e18c25a58338b2161a0c843a74 Mon Sep 17 00:00:00 2001
From: Yosi Levy <37745463+yosilevy@users.noreply.github.com>
Date: Fri, 26 Jan 2024 18:15:27 +0200
Subject: [PATCH] Various RTL fixes (#19495)

* Various RTL fixes

* Additional RTL

* Additional fixes

* Revert ha-dialog

* Improve margin-title

* Additional fixes

* Additional fixes

* Fix prettier

* More fixes

* Additional fixes

* Fix prettier

* Fix prettier again

* Additional updates

* Additional fixes

* Final fixes (left only)
---
 hassio/src/addon-store/hassio-addon-store.ts        |  2 ++
 hassio/src/addon-view/info/hassio-addon-info.ts     |  4 +++-
 hassio/src/backups/hassio-backups.ts                |  4 ++++
 hassio/src/components/hassio-card-content.ts        |  4 ++++
 hassio/src/components/supervisor-backup-content.ts  |  4 ++++
 hassio/src/components/supervisor-formfield-label.ts |  4 ++++
 .../dialogs/backup/dialog-hassio-create-backup.ts   |  3 +++
 hassio/src/dialogs/network/dialog-hassio-network.ts |  2 ++
 .../repositories/dialog-hassio-repositories.ts      |  2 ++
 hassio/src/ingress-view/hassio-ingress-view.ts      |  2 +-
 src/auth/ha-auth-flow.ts                            |  2 ++
 src/common/util/compute_rtl.ts                      |  4 ++++
 src/components/ha-alert.ts                          |  1 -
 src/components/ha-area-filter.ts                    |  8 ++++----
 src/components/ha-check-list-item.ts                |  4 ++++
 src/components/ha-expansion-panel.ts                | 11 ++++++-----
 src/components/ha-header-bar.ts                     |  4 ++++
 src/components/ha-label.ts                          |  2 ++
 src/components/ha-multi-textfield.ts                |  2 ++
 src/components/ha-service-control.ts                |  7 +++++++
 src/components/ha-top-app-bar-fixed.ts              |  4 ++++
 src/components/ha-two-pane-top-app-bar-fixed.ts     |  4 ++++
 src/components/media-player/dialog-media-manage.ts  |  4 ----
 src/components/trace/hat-script-graph.ts            |  2 ++
 .../config-flow/previews/entity-preview-row.ts      |  2 ++
 src/dialogs/config-flow/step-flow-create-entry.ts   |  2 ++
 .../more-info/controls/more-info-datetime.ts        |  2 ++
 .../more-info/controls/more-info-input_datetime.ts  |  2 ++
 .../more-info/controls/more-info-media_player.ts    |  2 ++
 src/dialogs/more-info/controls/more-info-weather.ts |  7 +++++++
 src/layouts/hass-subpage.ts                         |  2 +-
 src/layouts/hass-tabs-subpage.ts                    |  4 +++-
 src/panels/calendar/dialog-calendar-event-detail.ts |  2 +-
 src/panels/calendar/dialog-calendar-event-editor.ts |  4 +++-
 .../ha-config-application-credentials.ts            |  2 ++
 .../action/types/ha-automation-action-service.ts    |  2 ++
 .../types/ha-automation-trigger-conversation.ts     |  2 ++
 src/panels/config/cloud/account/cloud-tts-pref.ts   |  4 ++++
 .../device-detail/ha-device-entities-card.ts        |  2 ++
 .../config/devices/ha-config-devices-dashboard.ts   |  2 ++
 src/panels/config/entities/ha-config-entities.ts    |  5 +++++
 src/panels/config/helpers/forms/ha-counter-form.ts  |  2 ++
 .../config/helpers/forms/ha-input_select-form.ts    |  4 ++++
 .../config/integrations/dialog-add-integration.ts   |  2 ++
 .../integrations/ha-config-integration-page.ts      |  4 ++++
 .../config/integrations/ha-integration-card.ts      |  2 ++
 .../integration-panels/mqtt/mqtt-config-panel.ts    |  2 ++
 .../integration-panels/mqtt/mqtt-subscribe-card.ts  |  2 ++
 .../integration-panels/zha/zha-add-devices-page.ts  |  2 ++
 .../zwave_js/dialog-zwave_js-add-node.ts            |  4 ++++
 src/panels/config/logs/ha-config-logs.ts            |  2 ++
 src/panels/config/network/supervisor-network.ts     |  2 ++
 src/panels/config/users/dialog-user-detail.ts       | 11 ++++++++++-
 .../voice-assistants/entity-voice-settings.ts       |  6 ++++++
 .../ha-config-voice-assistants-expose.ts            |  2 ++
 .../developer-tools/ha-panel-developer-tools.ts     |  4 +++-
 .../service/developer-tools-service.ts              |  2 ++
 .../statistics/dialog-statistics-adjust-sum.ts      |  4 ++--
 src/panels/energy/ha-panel-energy.ts                |  6 +++++-
 .../cards/energy/hui-energy-gas-graph-card.ts       |  2 ++
 .../cards/energy/hui-energy-solar-graph-card.ts     |  2 ++
 .../cards/energy/hui-energy-usage-graph-card.ts     |  2 ++
 .../cards/energy/hui-energy-water-graph-card.ts     |  2 ++
 src/panels/lovelace/cards/hui-alarm-panel-card.ts   |  2 ++
 src/panels/lovelace/cards/hui-area-card.ts          |  2 ++
 src/panels/lovelace/cards/hui-empty-state-card.ts   |  2 ++
 .../lovelace/cards/hui-picture-glance-card.ts       |  2 ++
 src/panels/lovelace/components/hui-buttons-base.ts  |  6 ++++++
 .../components/hui-energy-period-selector.ts        |  8 ++++++++
 .../lovelace/components/hui-generic-entity-row.ts   |  6 ++++++
 .../editor/card-editor/hui-dialog-edit-card.ts      |  3 +++
 .../lovelace/editor/hui-sub-element-editor.ts       |  8 ++++----
 .../lovelace/entity-rows/hui-weather-entity-row.ts  |  4 ++++
 src/panels/lovelace/hui-root.ts                     |  4 +++-
 src/panels/lovelace/special-rows/hui-button-row.ts  |  4 ++++
 src/panels/lovelace/special-rows/hui-cast-row.ts    |  2 ++
 src/panels/lovelace/special-rows/hui-section-row.ts |  4 ++++
 src/panels/lovelace/special-rows/hui-text-row.ts    |  4 +++-
 src/panels/lovelace/special-rows/hui-weblink-row.ts |  2 ++
 src/panels/mailbox/ha-panel-mailbox.ts              |  2 ++
 src/panels/todo/dialog-todo-item-editor.ts          |  2 ++
 src/resources/ha-style.ts                           |  2 ++
 src/resources/styles.ts                             |  2 ++
 .../climate/ha-state-control-climate-temperature.ts | 13 ++++++++-----
 src/state-summary/state-card-climate.ts             |  4 +++-
 src/state-summary/state-card-humidifier.ts          |  4 +++-
 src/state-summary/state-card-input_text.ts          |  2 ++
 src/state-summary/state-card-media_player.ts        |  4 +++-
 src/state-summary/state-card-timer.ts               |  4 +++-
 src/state-summary/state-card-update.ts              |  1 -
 src/state-summary/state-card-water_heater.ts        |  4 +++-
 91 files changed, 274 insertions(+), 42 deletions(-)

diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts
index b3ef1e2c6e..76f0639e49 100644
--- a/hassio/src/addon-store/hassio-addon-store.ts
+++ b/hassio/src/addon-store/hassio-addon-store.ts
@@ -243,6 +243,8 @@ export class HassioAddonStore extends LitElement {
       }
       .advanced a {
         margin-left: 0.5em;
+        margin-inline-start: 0.5em;
+        margin-inline-end: initial;
         color: var(--primary-color);
       }
     `;
diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts
index 11d257f722..8b183fc51d 100644
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info.ts
@@ -1188,11 +1188,13 @@ class HassioAddonInfo extends LitElement {
         }
         .addon-header {
           padding-left: 8px;
+          padding-inline-start: 8px;
+          padding-inline-end: initial;
           font-size: 24px;
           color: var(--ha-card-header-color, --primary-text-color);
         }
         .addon-version {
-          float: right;
+          float: var(--float-end);
           font-size: 15px;
           vertical-align: middle;
         }
diff --git a/hassio/src/backups/hassio-backups.ts b/hassio/src/backups/hassio-backups.ts
index 7d0819fc83..64c735d977 100644
--- a/hassio/src/backups/hassio-backups.ts
+++ b/hassio/src/backups/hassio-backups.ts
@@ -395,6 +395,8 @@ export class HassioBackups extends LitElement {
         .selected-txt {
           font-weight: bold;
           padding-left: 16px;
+          padding-inline-start: 16px;
+          padding-inline-end: initial;
           color: var(--primary-text-color);
         }
         .table-header .selected-txt {
@@ -405,6 +407,8 @@ export class HassioBackups extends LitElement {
         }
         .header-toolbar .header-btns {
           margin-right: -12px;
+          margin-inline-end: -12px;
+          margin-inline-start: initial;
         }
         .header-btns > mwc-button,
         .header-btns > ha-icon-button {
diff --git a/hassio/src/components/hassio-card-content.ts b/hassio/src/components/hassio-card-content.ts
index d1f804ed60..3222525dd5 100644
--- a/hassio/src/components/hassio-card-content.ts
+++ b/hassio/src/components/hassio-card-content.ts
@@ -60,6 +60,10 @@ class HassioCardContent extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
+      :host {
+        direction: ltr;
+      }
+
       ha-svg-icon {
         margin-right: 24px;
         margin-left: 8px;
diff --git a/hassio/src/components/supervisor-backup-content.ts b/hassio/src/components/supervisor-backup-content.ts
index 0c76daba83..ddbde0f4f3 100644
--- a/hassio/src/components/supervisor-backup-content.ts
+++ b/hassio/src/components/supervisor-backup-content.ts
@@ -316,6 +316,8 @@ export class SupervisorBackupContent extends LitElement {
         display: flex;
         flex-direction: column;
         margin-left: 30px;
+        margin-inline-start: 30px;
+        margin-inline-end: initial;
       }
       ha-formfield.password {
         display: block;
@@ -324,6 +326,8 @@ export class SupervisorBackupContent extends LitElement {
       .backup-types {
         display: flex;
         margin-left: -13px;
+        margin-inline-start: -13px;
+        margin-inline-end: initial;
       }
       .sub-header {
         margin-top: 8px;
diff --git a/hassio/src/components/supervisor-formfield-label.ts b/hassio/src/components/supervisor-formfield-label.ts
index c6986c714b..8f740185f6 100644
--- a/hassio/src/components/supervisor-formfield-label.ts
+++ b/hassio/src/components/supervisor-formfield-label.ts
@@ -37,6 +37,8 @@ class SupervisorFormfieldLabel extends LitElement {
       }
       .label {
         margin-right: 4px;
+        margin-inline-end: 4px;
+        margin-inline-start: initial;
       }
       .version {
         color: var(--secondary-text-color);
@@ -45,6 +47,8 @@ class SupervisorFormfieldLabel extends LitElement {
         max-height: 22px;
         max-width: 22px;
         margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
       }
     `;
   }
diff --git a/hassio/src/dialogs/backup/dialog-hassio-create-backup.ts b/hassio/src/dialogs/backup/dialog-hassio-create-backup.ts
index c85b360df5..b009043079 100644
--- a/hassio/src/dialogs/backup/dialog-hassio-create-backup.ts
+++ b/hassio/src/dialogs/backup/dialog-hassio-create-backup.ts
@@ -138,6 +138,9 @@ class HassioCreateBackupDialog extends LitElement {
       haStyle,
       haStyleDialog,
       css`
+        :host {
+          direction: var(--direction);
+        }
         ha-circular-progress {
           display: block;
           text-align: center;
diff --git a/hassio/src/dialogs/network/dialog-hassio-network.ts b/hassio/src/dialogs/network/dialog-hassio-network.ts
index b36b734a08..66b381e0c0 100644
--- a/hassio/src/dialogs/network/dialog-hassio-network.ts
+++ b/hassio/src/dialogs/network/dialog-hassio-network.ts
@@ -597,6 +597,8 @@ export class DialogHassioNetwork
 
         mwc-button.scan {
           margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
         }
 
         .container {
diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
index 1399e552df..74ce8d5a6a 100644
--- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
+++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
@@ -195,6 +195,8 @@ class HassioRepositoriesDialog extends LitElement {
         }
         mwc-button {
           margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
         }
         ha-circular-progress {
           display: block;
diff --git a/hassio/src/ingress-view/hassio-ingress-view.ts b/hassio/src/ingress-view/hassio-ingress-view.ts
index 45fd998b4b..1dd895bdfe 100644
--- a/hassio/src/ingress-view/hassio-ingress-view.ts
+++ b/hassio/src/ingress-view/hassio-ingress-view.ts
@@ -360,7 +360,7 @@ class HassioIngressView extends LitElement {
       }
 
       .main-title {
-        margin: 0 0 0 24px;
+        margin: var(--margin-title);
         line-height: 20px;
         flex-grow: 1;
       }
diff --git a/src/auth/ha-auth-flow.ts b/src/auth/ha-auth-flow.ts
index 66a93c021c..db5b233073 100644
--- a/src/auth/ha-auth-flow.ts
+++ b/src/auth/ha-auth-flow.ts
@@ -93,6 +93,8 @@ export class HaAuthFlow extends LitElement {
       <style>
         ha-auth-flow .store-token {
           margin-left: -16px;
+          margin-inline-start: -16px;
+          margin-inline-end: initial;
         }
         a.forgot-password {
           color: var(--primary-color);
diff --git a/src/common/util/compute_rtl.ts b/src/common/util/compute_rtl.ts
index 39719bee43..0c53e374e9 100644
--- a/src/common/util/compute_rtl.ts
+++ b/src/common/util/compute_rtl.ts
@@ -34,4 +34,8 @@ export function setDirectionStyles(direction: string, element: LitElement) {
     "--float-end",
     direction === "ltr" ? "right" : "left"
   );
+  element.style.setProperty(
+    "--margin-title",
+    direction === "ltr" ? "var(--margin-title-ltr)" : "var(--margin-title-rtl)"
+  );
 }
diff --git a/src/components/ha-alert.ts b/src/components/ha-alert.ts
index 772d2db0d6..90c0decd98 100644
--- a/src/components/ha-alert.ts
+++ b/src/components/ha-alert.ts
@@ -117,7 +117,6 @@ class HaAlert extends LitElement {
       margin-right: 0;
       margin-inline-start: 8px;
       margin-inline-end: 0;
-      direction: var(--direction);
     }
     .title {
       margin-top: 2px;
diff --git a/src/components/ha-area-filter.ts b/src/components/ha-area-filter.ts
index a5ca967190..9640f60e5e 100644
--- a/src/components/ha-area-filter.ts
+++ b/src/components/ha-area-filter.ts
@@ -1,4 +1,4 @@
-import { mdiChevronRight, mdiSofa } from "@mdi/js";
+import { mdiSofa } from "@mdi/js";
 import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
@@ -6,6 +6,7 @@ import { showAreaFilterDialog } from "../dialogs/area-filter/show-area-filter-di
 import { HomeAssistant } from "../types";
 import "./ha-svg-icon";
 import "./ha-textfield";
+import "./ha-icon-next";
 
 export type AreaFilterValue = {
   hidden?: string[];
@@ -53,11 +54,10 @@ export class HaAreaPicker extends LitElement {
         <ha-svg-icon slot="graphic" .path=${mdiSofa}></ha-svg-icon>
         <span>${this.label}</span>
         <span slot="secondary">${description}</span>
-        <ha-svg-icon
+        <ha-icon-next
           slot="meta"
           .label=${this.hass.localize("ui.common.edit")}
-          .path=${mdiChevronRight}
-        ></ha-svg-icon>
+        ></ha-icon-next>
       </ha-list-item>
     `;
   }
diff --git a/src/components/ha-check-list-item.ts b/src/components/ha-check-list-item.ts
index 19f04feda9..0152f19fcc 100644
--- a/src/components/ha-check-list-item.ts
+++ b/src/components/ha-check-list-item.ts
@@ -37,6 +37,10 @@ export class HaCheckListItem extends CheckListItemBase {
       .mdc-deprecated-list-item__graphic {
         margin-top: var(--check-list-item-graphic-margin-top);
       }
+      :host([graphic="icon"]) .mdc-deprecated-list-item__graphic {
+        margin-inline-start: 0;
+        margin-inline-end: var(--mdc-list-item-graphic-margin, 32px);
+      }
     `,
   ];
 }
diff --git a/src/components/ha-expansion-panel.ts b/src/components/ha-expansion-panel.ts
index abd0a81ac4..a148c37f1b 100644
--- a/src/components/ha-expansion-panel.ts
+++ b/src/components/ha-expansion-panel.ts
@@ -168,12 +168,18 @@ export class HaExpansionPanel extends LitElement {
       }
 
       .summary-icon {
+        transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+        direction: var(--direction);
         margin-left: 8px;
+        margin-inline-start: 8px;
+        margin-inline-end: initial;
       }
 
       :host([leftchevron]) .summary-icon {
         margin-left: 0;
         margin-right: 8px;
+        margin-inline-start: 0;
+        margin-inline-end: 8px;
       }
 
       #summary {
@@ -188,11 +194,6 @@ export class HaExpansionPanel extends LitElement {
         outline: none;
       }
 
-      .summary-icon {
-        transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
-        direction: var(--direction);
-      }
-
       .summary-icon.expanded {
         transform: rotate(180deg);
       }
diff --git a/src/components/ha-header-bar.ts b/src/components/ha-header-bar.ts
index 3bb3ed1bd6..aef90d6352 100644
--- a/src/components/ha-header-bar.ts
+++ b/src/components/ha-header-bar.ts
@@ -45,6 +45,10 @@ export class HaHeaderBar extends LitElement {
         .mdc-top-app-bar__section.mdc-top-app-bar__section--align-end {
           flex: none;
         }
+        .mdc-top-app-bar__title {
+          padding-inline-start: 20px;
+          padding-inline-end: initial;
+        }
       `,
     ];
   }
diff --git a/src/components/ha-label.ts b/src/components/ha-label.ts
index dd0ed75d44..10293c88a9 100644
--- a/src/components/ha-label.ts
+++ b/src/components/ha-label.ts
@@ -42,6 +42,8 @@ class HaLabel extends LitElement {
         ::slotted([slot="icon"]) {
           margin-right: 8px;
           margin-left: -8px;
+          margin-inline-start: -8px;
+          margin-inline-end: 8px;
           display: flex;
           color: var(--ha-label-icon-color);
         }
diff --git a/src/components/ha-multi-textfield.ts b/src/components/ha-multi-textfield.ts
index e4305b377d..1988b46cc9 100644
--- a/src/components/ha-multi-textfield.ts
+++ b/src/components/ha-multi-textfield.ts
@@ -132,6 +132,8 @@ class HaMultiTextField extends LitElement {
         }
         ha-button {
           margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
         }
       `,
     ];
diff --git a/src/components/ha-service-control.ts b/src/components/ha-service-control.ts
index 7ec32d9b73..041b4aa272 100644
--- a/src/components/ha-service-control.ts
+++ b/src/components/ha-service-control.ts
@@ -818,6 +818,8 @@ export class HaServiceControl extends ReorderModeMixin(LitElement) {
       }
       ha-checkbox {
         margin-left: -16px;
+        margin-inline-start: -16px;
+        margin-inline-end: initial;
       }
       .help-icon {
         color: var(--secondary-text-color);
@@ -827,6 +829,11 @@ export class HaServiceControl extends ReorderModeMixin(LitElement) {
         display: flex;
         align-items: center;
         padding-right: 2px;
+        padding-inline-end: 2px;
+        padding-inline-start: initial;
+      }
+      .description p {
+        direction: ltr;
       }
     `;
   }
diff --git a/src/components/ha-top-app-bar-fixed.ts b/src/components/ha-top-app-bar-fixed.ts
index 49501ac01b..e6fac8a019 100644
--- a/src/components/ha-top-app-bar-fixed.ts
+++ b/src/components/ha-top-app-bar-fixed.ts
@@ -23,6 +23,10 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
           var(--mdc-theme-primary)
         );
       }
+      .mdc-top-app-bar__title {
+        padding-inline-start: 20px;
+        padding-inline-end: initial;
+      }
     `,
   ];
 }
diff --git a/src/components/ha-two-pane-top-app-bar-fixed.ts b/src/components/ha-two-pane-top-app-bar-fixed.ts
index 5cd5dbb2a2..5daae9d618 100644
--- a/src/components/ha-two-pane-top-app-bar-fixed.ts
+++ b/src/components/ha-two-pane-top-app-bar-fixed.ts
@@ -320,6 +320,10 @@ export class TopAppBarBaseBase extends BaseElement {
         height: 100%;
         overflow: auto;
       }
+      .mdc-top-app-bar__title {
+        padding-inline-start: 20px;
+        padding-inline-end: initial;
+      }
     `,
   ];
 }
diff --git a/src/components/media-player/dialog-media-manage.ts b/src/components/media-player/dialog-media-manage.ts
index b7b1158e4e..3822d27591 100644
--- a/src/components/media-player/dialog-media-manage.ts
+++ b/src/components/media-player/dialog-media-manage.ts
@@ -318,10 +318,6 @@ class DialogMediaManage extends LitElement {
           display: block;
         }
 
-        mwc-list {
-          direction: ltr;
-        }
-
         .danger {
           --mdc-theme-primary: var(--error-color);
         }
diff --git a/src/components/trace/hat-script-graph.ts b/src/components/trace/hat-script-graph.ts
index 6dcfa4b5ee..db2f800888 100644
--- a/src/components/trace/hat-script-graph.ts
+++ b/src/components/trace/hat-script-graph.ts
@@ -667,6 +667,8 @@ export class HatScriptGraph extends LitElement {
       }
       .parent {
         margin-left: 8px;
+        margin-inline-start: 8px;
+        margin-inline-end: initial;
         margin-top: 16px;
       }
       .error {
diff --git a/src/dialogs/config-flow/previews/entity-preview-row.ts b/src/dialogs/config-flow/previews/entity-preview-row.ts
index 3258921d12..724e60ebf2 100644
--- a/src/dialogs/config-flow/previews/entity-preview-row.ts
+++ b/src/dialogs/config-flow/previews/entity-preview-row.ts
@@ -51,6 +51,8 @@ class EntityPreviewRow extends LitElement {
       .name {
         margin-left: 16px;
         margin-right: 8px;
+        margin-inline-start: 16px;
+        margin-inline-end: 8px;
         flex: 1 1 30%;
       }
       .value {
diff --git a/src/dialogs/config-flow/step-flow-create-entry.ts b/src/dialogs/config-flow/step-flow-create-entry.ts
index f7e15836d7..43c5e93e3c 100644
--- a/src/dialogs/config-flow/step-flow-create-entry.ts
+++ b/src/dialogs/config-flow/step-flow-create-entry.ts
@@ -126,6 +126,8 @@ class StepFlowCreateEntry extends LitElement {
         }
         .buttons > *:last-child {
           margin-left: auto;
+          margin-inline-start: auto;
+          margin-inline-end: initial;
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
           .device {
diff --git a/src/dialogs/more-info/controls/more-info-datetime.ts b/src/dialogs/more-info/controls/more-info-datetime.ts
index 85d7f44bd3..88020df8a8 100644
--- a/src/dialogs/more-info/controls/more-info-datetime.ts
+++ b/src/dialogs/more-info/controls/more-info-datetime.ts
@@ -74,6 +74,8 @@ class MoreInfoDatetime extends LitElement {
       }
       ha-date-input + ha-time-input {
         margin-left: 4px;
+        margin-inline-start: 4px;
+        margin-inline-end: initial;
       }
     `;
   }
diff --git a/src/dialogs/more-info/controls/more-info-input_datetime.ts b/src/dialogs/more-info/controls/more-info-input_datetime.ts
index a44917e79a..8f1ae7273d 100644
--- a/src/dialogs/more-info/controls/more-info-input_datetime.ts
+++ b/src/dialogs/more-info/controls/more-info-input_datetime.ts
@@ -86,6 +86,8 @@ class MoreInfoInputDatetime extends LitElement {
       }
       ha-date-input + ha-time-input {
         margin-left: 4px;
+        margin-inline-start: 4px;
+        margin-inline-end: initial;
       }
     `;
   }
diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts
index c33dab198b..b7510a675c 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.ts
+++ b/src/dialogs/more-info/controls/more-info-media_player.ts
@@ -261,6 +261,8 @@ class MoreInfoMediaPlayer extends LitElement {
 
       .browse-media-icon {
         margin-left: 8px;
+        margin-inline-start: 8px;
+        margin-inline-end: initial;
       }
     `;
   }
diff --git a/src/dialogs/more-info/controls/more-info-weather.ts b/src/dialogs/more-info/controls/more-info-weather.ts
index cb2710819b..4b3cd4eba9 100644
--- a/src/dialogs/more-info/controls/more-info-weather.ts
+++ b/src/dialogs/more-info/controls/more-info-weather.ts
@@ -330,6 +330,8 @@ class MoreInfoWeather extends LitElement {
       ha-svg-icon {
         color: var(--paper-item-icon-color);
         margin-left: 8px;
+        margin-inline-start: 8px;
+        margin-inline-end: initial;
       }
 
       mwc-tab-bar {
@@ -346,10 +348,15 @@ class MoreInfoWeather extends LitElement {
         height: 32px;
         align-items: center;
       }
+      .flex > div:last-child {
+        direction: ltr;
+      }
 
       .main {
         flex: 1;
         margin-left: 24px;
+        margin-inline-start: 24px;
+        margin-inline-end: initial;
       }
 
       .temp,
diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts
index 9eb3549630..3a1ed24385 100644
--- a/src/layouts/hass-subpage.ts
+++ b/src/layouts/hass-subpage.ts
@@ -143,7 +143,7 @@ class HassSubpage extends LitElement {
         }
 
         .main-title {
-          margin: 0 0 0 24px;
+          margin: var(--margin-title);
           line-height: 20px;
           flex-grow: 1;
         }
diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts
index 05438d1216..ef38fb1b12 100644
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/src/layouts/hass-tabs-subpage.ts
@@ -302,7 +302,7 @@ class HassTabsSubpage extends LitElement {
           max-height: var(--header-height);
           line-height: 20px;
           color: var(--sidebar-text-color);
-          margin: var(--main-title-margin, 0 0 0 24px);
+          margin: var(--main-title-margin, var(--margin-title));
         }
 
         .content {
@@ -312,6 +312,8 @@ class HassTabsSubpage extends LitElement {
           );
           margin-left: env(safe-area-inset-left);
           margin-right: env(safe-area-inset-right);
+          margin-inline-start: env(safe-area-inset-left);
+          margin-inline-end: env(safe-area-inset-right);
           height: calc(100% - 1px - var(--header-height));
           height: calc(
             100% - 1px - var(--header-height) - env(safe-area-inset-bottom)
diff --git a/src/panels/calendar/dialog-calendar-event-detail.ts b/src/panels/calendar/dialog-calendar-event-detail.ts
index fc07fea31f..4080c02237 100644
--- a/src/panels/calendar/dialog-calendar-event-detail.ts
+++ b/src/panels/calendar/dialog-calendar-event-detail.ts
@@ -241,7 +241,7 @@ class DialogCalendarEventDetail extends LitElement {
         ha-svg-icon {
           width: 40px;
           margin-right: 8px;
-          margin-inline-end: 16px;
+          margin-inline-end: 8px;
           margin-inline-start: initial;
           direction: var(--direction);
           vertical-align: top;
diff --git a/src/panels/calendar/dialog-calendar-event-editor.ts b/src/panels/calendar/dialog-calendar-event-editor.ts
index 377f4ef65f..c72d3a6b0e 100644
--- a/src/panels/calendar/dialog-calendar-event-editor.ts
+++ b/src/panels/calendar/dialog-calendar-event-editor.ts
@@ -610,6 +610,8 @@ class DialogCalendarEventEditor extends LitElement {
         }
         ha-time-input {
           margin-left: 16px;
+          margin-inline-start: 16px;
+          margin-inline-end: initial;
         }
         ha-recurrence-rule-editor {
           display: block;
@@ -633,7 +635,7 @@ class DialogCalendarEventEditor extends LitElement {
         ha-svg-icon {
           width: 40px;
           margin-right: 8px;
-          margin-inline-end: 16px;
+          margin-inline-end: 8px;
           margin-inline-start: initial;
           direction: var(--direction);
           vertical-align: top;
diff --git a/src/panels/config/application_credentials/ha-config-application-credentials.ts b/src/panels/config/application_credentials/ha-config-application-credentials.ts
index 274d17883a..9a16b46274 100644
--- a/src/panels/config/application_credentials/ha-config-application-credentials.ts
+++ b/src/panels/config/application_credentials/ha-config-application-credentials.ts
@@ -275,6 +275,8 @@ export class HaConfigApplicationCredentials extends LitElement {
       }
       ha-button-menu {
         margin-left: 8px;
+        margin-inline-start: 8px;
+        margin-inline-end: initial;
       }
     `;
   }
diff --git a/src/panels/config/automation/action/types/ha-automation-action-service.ts b/src/panels/config/automation/action/types/ha-automation-action-service.ts
index ed8868b099..ec063e883f 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-service.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-service.ts
@@ -222,6 +222,8 @@ export class HaServiceAction extends LitElement implements ActionElement {
       }
       ha-checkbox {
         margin-left: -16px;
+        margin-inline-start: -16px;
+        margin-inline-end: initial;
       }
       .checkbox-spacer {
         width: 32px;
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts
index aebc2a899e..4cb5abd86b 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts
@@ -157,6 +157,8 @@ export class HaConversationTrigger
       }
       mwc-button {
         margin-left: 8px;
+        margin-inline-start: 8px;
+        margin-inline-end: initial;
       }
       ha-textfield {
         display: block;
diff --git a/src/panels/config/cloud/account/cloud-tts-pref.ts b/src/panels/config/cloud/account/cloud-tts-pref.ts
index 3107ff622a..052fad179b 100644
--- a/src/panels/config/cloud/account/cloud-tts-pref.ts
+++ b/src/panels/config/cloud/account/cloud-tts-pref.ts
@@ -191,9 +191,13 @@ export class CloudTTSPref extends LitElement {
       }
       .row > *:first-child {
         margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
       }
       .row > *:last-child {
         margin-left: 8px;
+        margin-inline-start: 8px;
+        margin-inline-end: initial;
       }
       .card-actions {
         display: flex;
diff --git a/src/panels/config/devices/device-detail/ha-device-entities-card.ts b/src/panels/config/devices/device-detail/ha-device-entities-card.ts
index d2cfc36ef2..d594df6952 100644
--- a/src/panels/config/devices/device-detail/ha-device-entities-card.ts
+++ b/src/panels/config/devices/device-detail/ha-device-entities-card.ts
@@ -246,6 +246,8 @@ export class HaDeviceEntitiesCard extends LitElement {
       }
       ha-icon {
         margin-left: 8px;
+        margin-inline-start: 8px;
+        margin-inline-end: initial;
       }
       .entity-id {
         color: var(--secondary-text-color);
diff --git a/src/panels/config/devices/ha-config-devices-dashboard.ts b/src/panels/config/devices/ha-config-devices-dashboard.ts
index 1f8dbabd97..997352eb64 100644
--- a/src/panels/config/devices/ha-config-devices-dashboard.ts
+++ b/src/panels/config/devices/ha-config-devices-dashboard.ts
@@ -605,6 +605,8 @@ export class HaConfigDeviceDashboard extends LitElement {
       css`
         ha-button-menu {
           margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
         }
         .clear {
           color: var(--primary-color);
diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts
index 51c658ffc4..187a8a14ef 100644
--- a/src/panels/config/entities/ha-config-entities.ts
+++ b/src/panels/config/entities/ha-config-entities.ts
@@ -988,6 +988,7 @@ export class HaConfigEntities extends LitElement {
           font-weight: bold;
           padding-left: 16px;
           padding-inline-start: 16px;
+          padding-inline-end: initial;
           direction: var(--direction);
         }
         .table-header .selected-txt {
@@ -999,6 +1000,7 @@ export class HaConfigEntities extends LitElement {
         .header-toolbar .header-btns {
           margin-right: -12px;
           margin-inline-end: -12px;
+          margin-inline-start: initial;
           direction: var(--direction);
         }
         .header-btns {
@@ -1010,11 +1012,14 @@ export class HaConfigEntities extends LitElement {
         }
         ha-button-menu {
           margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
         }
         .clear {
           color: var(--primary-color);
           padding-left: 8px;
           padding-inline-start: 8px;
+          padding-inline-end: initial;
           text-transform: uppercase;
           direction: var(--direction);
         }
diff --git a/src/panels/config/helpers/forms/ha-counter-form.ts b/src/panels/config/helpers/forms/ha-counter-form.ts
index 6e7520d5c3..2fb3b049cb 100644
--- a/src/panels/config/helpers/forms/ha-counter-form.ts
+++ b/src/panels/config/helpers/forms/ha-counter-form.ts
@@ -192,6 +192,8 @@ class HaCounterForm extends LitElement {
         }
         .row div {
           margin-left: 16px;
+          margin-inline-start: 16px;
+          margin-inline-end: initial;
         }
         ha-textfield {
           display: block;
diff --git a/src/panels/config/helpers/forms/ha-input_select-form.ts b/src/panels/config/helpers/forms/ha-input_select-form.ts
index ef84db325e..e5a16fb54a 100644
--- a/src/panels/config/helpers/forms/ha-input_select-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_select-form.ts
@@ -231,6 +231,8 @@ class HaInputSelectForm extends LitElement {
         }
         mwc-button {
           margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
         }
         ha-textfield {
           display: block;
@@ -247,6 +249,8 @@ class HaInputSelectForm extends LitElement {
           cursor: move; /* fallback if grab cursor is unsupported */
           cursor: grab;
           padding-right: 12px;
+          padding-inline-end: 12px;
+          padding-inline-start: initial;
         }
         .handle ha-svg-icon {
           pointer-events: none;
diff --git a/src/panels/config/integrations/dialog-add-integration.ts b/src/panels/config/integrations/dialog-add-integration.ts
index 65edfbfccf..7fb14f6e50 100644
--- a/src/panels/config/integrations/dialog-add-integration.ts
+++ b/src/panels/config/integrations/dialog-add-integration.ts
@@ -720,6 +720,8 @@ class AddIntegrationDialog extends LitElement {
         margin: 0;
         margin-bottom: 8px;
         margin-left: 48px;
+        margin-inline-start: 48px;
+        margin-inline-end: initial;
         padding: 24px 24px 0 24px;
         color: var(--mdc-dialog-heading-ink-color, rgba(0, 0, 0, 0.87));
         font-size: var(--mdc-typography-headline6-font-size, 1.25rem);
diff --git a/src/panels/config/integrations/ha-config-integration-page.ts b/src/panels/config/integrations/ha-config-integration-page.ts
index a58597c114..10e3fcd85f 100644
--- a/src/panels/config/integrations/ha-config-integration-page.ts
+++ b/src/panels/config/integrations/ha-config-integration-page.ts
@@ -1420,8 +1420,12 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
         .message div {
           flex: 1;
           margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
           padding-top: 2px;
           padding-right: 2px;
+          padding-inline-end: 2px;
+          padding-inline-start: initial;
           overflow-wrap: break-word;
           display: -webkit-box;
           -webkit-box-orient: vertical;
diff --git a/src/panels/config/integrations/ha-integration-card.ts b/src/panels/config/integrations/ha-integration-card.ts
index 143ea3bfe1..2625aa81a9 100644
--- a/src/panels/config/integrations/ha-integration-card.ts
+++ b/src/panels/config/integrations/ha-integration-card.ts
@@ -341,6 +341,8 @@ export class HaIntegrationCard extends LitElement {
           color: var(--text-primary-color);
           padding: 4px;
           margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
         }
         .icon.cloud {
           background: var(--info-color);
diff --git a/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts b/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts
index 9ba4afe7a0..df6cd9b9fd 100644
--- a/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts
+++ b/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts
@@ -227,6 +227,8 @@ export class MQTTConfigPanel extends LitElement {
         @media screen and (max-width: 600px) {
           ha-select {
             margin-left: 0px;
+            margin-inline-start: 0px;
+            margin-inline-end: initial;
             margin-top: 8px;
           }
           ha-textfield {
diff --git a/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts b/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts
index a4501073b1..e5bf058a04 100644
--- a/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts
+++ b/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts
@@ -226,6 +226,8 @@ class MqttSubscribeCard extends LitElement {
         ha-select {
           margin-left: 0px;
           margin-top: 8px;
+          margin-inline-start: 0px;
+          margin-inline-end: initial;
         }
         ha-textfield {
           flex: auto;
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
index 592189279f..cd88f87114 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
@@ -255,6 +255,8 @@ class ZHAAddDevicesPage extends LitElement {
         .search-button {
           margin-top: 16px;
           margin-left: 16px;
+          margin-inline-start: 16px;
+          margin-inline-end: initial;
         }
         .help-text {
           color: grey;
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts
index ef5eeca4ba..9910a65af4 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts
@@ -851,6 +851,8 @@ class DialogZWaveJSAddNode extends LitElement {
 
         .select-inclusion .outline:nth-child(2) {
           margin-left: 16px;
+          margin-inline-start: 16px;
+          margin-inline-end: initial;
         }
 
         .select-inclusion .outline {
@@ -869,6 +871,8 @@ class DialogZWaveJSAddNode extends LitElement {
 
           .select-inclusion .outline:nth-child(2) {
             margin-left: 0;
+            margin-inline-start: 0;
+            margin-inline-end: initial;
             margin-top: 16px;
           }
         }
diff --git a/src/panels/config/logs/ha-config-logs.ts b/src/panels/config/logs/ha-config-logs.ts
index 3b4befe4cd..afdae35105 100644
--- a/src/panels/config/logs/ha-config-logs.ts
+++ b/src/panels/config/logs/ha-config-logs.ts
@@ -239,6 +239,8 @@ export class HaConfigLogs extends LitElement {
         search-input.header {
           --mdc-ripple-color: transparant;
           margin-left: -16px;
+          margin-inline-start: -16px;
+          margin-inline-end: initial;
         }
         .content {
           direction: ltr;
diff --git a/src/panels/config/network/supervisor-network.ts b/src/panels/config/network/supervisor-network.ts
index 9f74c5d8e5..351faae71b 100644
--- a/src/panels/config/network/supervisor-network.ts
+++ b/src/panels/config/network/supervisor-network.ts
@@ -563,6 +563,8 @@ export class HassioNetwork extends LitElement {
 
         mwc-button.scan {
           margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
         }
         ha-expansion-panel {
           --expansion-panel-summary-padding: 0 16px;
diff --git a/src/panels/config/users/dialog-user-detail.ts b/src/panels/config/users/dialog-user-detail.ts
index a448b6b4f6..6c41ecb241 100644
--- a/src/panels/config/users/dialog-user-detail.ts
+++ b/src/panels/config/users/dialog-user-detail.ts
@@ -292,7 +292,12 @@ class DialogUserDetail extends LitElement {
           margin-top: 4px;
         }
         .badge-container > * {
-          margin: 4px 4px 4px 0;
+          margin-top: 4px;
+          margin-bottom: 4px;
+          margin-right: 4px;
+          margin-left: 0;
+          margin-inline-end: 4px;
+          margin-inline-start: 0;
         }
         .state {
           background-color: rgba(var(--rgb-primary-text-color), 0.15);
@@ -303,6 +308,8 @@ class DialogUserDetail extends LitElement {
         }
         .state:not(:first-child) {
           margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
         }
         .row {
           display: flex;
@@ -310,6 +317,8 @@ class DialogUserDetail extends LitElement {
         }
         ha-help-tooltip {
           margin-left: 4px;
+          margin-inline-start: 4px;
+          margin-inline-end: initial;
           position: relative;
         }
       `,
diff --git a/src/panels/config/voice-assistants/entity-voice-settings.ts b/src/panels/config/voice-assistants/entity-voice-settings.ts
index c966d39aed..b2e903e3c2 100644
--- a/src/panels/config/voice-assistants/entity-voice-settings.ts
+++ b/src/panels/config/voice-assistants/entity-voice-settings.ts
@@ -385,6 +385,8 @@ export class EntityVoiceSettings extends SubscribeMixin(LitElement) {
           height: 32px;
           width: 32px;
           margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
         }
         ha-aliases-editor {
           display: block;
@@ -395,6 +397,8 @@ export class EntityVoiceSettings extends SubscribeMixin(LitElement) {
         }
         ha-formfield {
           margin-left: -8px;
+          margin-inline-start: -8px;
+          margin-inline-end: initial;
         }
         ha-checkbox {
           --mdc-checkbox-state-layer-size: 40px;
@@ -407,6 +411,8 @@ export class EntityVoiceSettings extends SubscribeMixin(LitElement) {
           color: var(--error-color);
           --mdc-icon-size: 16px;
           margin-right: 4px;
+          margin-inline-end: 4px;
+          margin-inline-start: initial;
         }
         .header {
           margin-top: 8px;
diff --git a/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts b/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts
index dbec9e9520..68204c96ad 100644
--- a/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts
+++ b/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts
@@ -824,6 +824,8 @@ export class VoiceAssistantsExpose extends LitElement {
         }
         ha-button-menu {
           margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
         }
         .clear {
           color: var(--primary-color);
diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts
index 97d5b43d88..52e98b3770 100644
--- a/src/panels/developer-tools/ha-panel-developer-tools.ts
+++ b/src/panels/developer-tools/ha-panel-developer-tools.ts
@@ -147,7 +147,7 @@ class PanelDeveloperTools extends LitElement {
           }
         }
         .main-title {
-          margin: 0 0 0 24px;
+          margin: var(--margin-title);
           line-height: 20px;
           flex-grow: 1;
         }
@@ -163,6 +163,8 @@ class PanelDeveloperTools extends LitElement {
         paper-tabs {
           margin-left: max(env(safe-area-inset-left), 24px);
           margin-right: max(env(safe-area-inset-right), 24px);
+          margin-inline-start: max(env(safe-area-inset-left), 24px);
+          margin-inline-end: max(env(safe-area-inset-right), 24px);
           --paper-tabs-selection-bar-color: var(
             --app-header-selection-bar-color,
             var(--app-header-text-color, #fff)
diff --git a/src/panels/developer-tools/service/developer-tools-service.ts b/src/panels/developer-tools/service/developer-tools-service.ts
index c90f098051..d920065d5a 100644
--- a/src/panels/developer-tools/service/developer-tools-service.ts
+++ b/src/panels/developer-tools/service/developer-tools-service.ts
@@ -580,6 +580,8 @@ class HaPanelDevService extends LitElement {
         }
         .switch-mode-container .error {
           margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
         }
         .attributes {
           width: 100%;
diff --git a/src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts b/src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts
index b622e6261e..abc264adce 100644
--- a/src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts
+++ b/src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts
@@ -1,6 +1,5 @@
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-list/mwc-list-item";
-import { mdiChevronRight } from "@mdi/js";
 import formatISO9075 from "date-fns/formatISO9075";
 import {
   css,
@@ -21,6 +20,7 @@ import "../../../components/ha-form/ha-form";
 import "../../../components/ha-selector/ha-selector-datetime";
 import "../../../components/ha-selector/ha-selector-number";
 import "../../../components/ha-svg-icon";
+import "../../../components/ha-icon-next";
 import {
   adjustStatisticsSum,
   fetchStatistics,
@@ -165,7 +165,7 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
                 this.hass.config
               )}
             </span>
-            <ha-svg-icon slot="meta" .path=${mdiChevronRight}></ha-svg-icon>
+            <ha-icon-next slot="meta"></ha-icon-next>
           </mwc-list-item>
         `);
       }
diff --git a/src/panels/energy/ha-panel-energy.ts b/src/panels/energy/ha-panel-energy.ts
index 798a96768c..a9462d0edb 100644
--- a/src/panels/energy/ha-panel-energy.ts
+++ b/src/panels/energy/ha-panel-energy.ts
@@ -139,6 +139,7 @@ class PanelEnergy extends LitElement {
           width: 100%;
           padding-left: 32px;
           padding-inline-start: 32px;
+          padding-inline-end: initial;
           --disabled-text-color: rgba(var(--rgb-text-primary-color), 0.5);
           direction: var(--direction);
           --date-range-picker-max-height: calc(100vh - 80px);
@@ -146,6 +147,7 @@ class PanelEnergy extends LitElement {
         :host([narrow]) hui-energy-period-selector {
           padding-left: 0px;
           padding-inline-start: 0px;
+          padding-inline-end: initial;
         }
         :host {
           -ms-user-select: none;
@@ -189,7 +191,7 @@ class PanelEnergy extends LitElement {
           }
         }
         .main-title {
-          margin: 0 0 0 24px;
+          margin: var(--margin-title);
           line-height: 20px;
           flex-grow: 1;
         }
@@ -200,7 +202,9 @@ class PanelEnergy extends LitElement {
           min-height: 100vh;
           box-sizing: border-box;
           padding-left: env(safe-area-inset-left);
+          padding-inline-start: env(safe-area-inset-left);
           padding-right: env(safe-area-inset-right);
+          padding-inline-end: env(safe-area-inset-right);
           padding-bottom: env(safe-area-inset-bottom);
         }
         hui-view {
diff --git a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts
index 5bb965b052..e55383015b 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts
@@ -353,6 +353,8 @@ export class HuiEnergyGasGraphCard
         align-items: center;
         padding: 20%;
         margin-left: 32px;
+        margin-inline-start: 32px;
+        margin-inline-end: initial;
         box-sizing: border-box;
       }
     `;
diff --git a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
index 9da9393888..d5f3e767d0 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
@@ -475,6 +475,8 @@ export class HuiEnergySolarGraphCard
         align-items: center;
         padding: 20%;
         margin-left: 32px;
+        margin-inline-start: 32px;
+        margin-inline-end: initial;
         box-sizing: border-box;
       }
     `;
diff --git a/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts
index e0be896b36..5b28a4195b 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts
@@ -636,6 +636,8 @@ export class HuiEnergyUsageGraphCard
         align-items: center;
         padding: 20%;
         margin-left: 32px;
+        margin-inline-start: 32px;
+        margin-inline-end: initial;
         box-sizing: border-box;
       }
     `;
diff --git a/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts
index 2398b146a9..e05d6fb665 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts
@@ -351,6 +351,8 @@ export class HuiEnergyWaterGraphCard
         align-items: center;
         padding: 20%;
         margin-left: 32px;
+        margin-inline-start: 32px;
+        margin-inline-end: initial;
         box-sizing: border-box;
       }
     `;
diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.ts b/src/panels/lovelace/cards/hui-alarm-panel-card.ts
index 310203837d..59863720f1 100644
--- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts
+++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts
@@ -352,6 +352,8 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
 
       .state {
         margin-left: 16px;
+        margin-inline-start: 16px;
+        margin-inline-end: initial;
         position: relative;
         bottom: 16px;
         color: var(--alarm-state-color);
diff --git a/src/panels/lovelace/cards/hui-area-card.ts b/src/panels/lovelace/cards/hui-area-card.ts
index 3ceb943ebe..fd8f890722 100644
--- a/src/panels/lovelace/cards/hui-area-card.ts
+++ b/src/panels/lovelace/cards/hui-area-card.ts
@@ -601,6 +601,8 @@ export class HuiAreaCard
         background-color: var(--area-button-color, #727272b2);
         border-radius: 50%;
         margin-left: 8px;
+        margin-inline-start: 8px;
+        margin-inline-end: initial;
         --mdc-icon-button-size: 44px;
       }
       .on {
diff --git a/src/panels/lovelace/cards/hui-empty-state-card.ts b/src/panels/lovelace/cards/hui-empty-state-card.ts
index 7202ae4ff2..4a61463c0c 100644
--- a/src/panels/lovelace/cards/hui-empty-state-card.ts
+++ b/src/panels/lovelace/cards/hui-empty-state-card.ts
@@ -60,6 +60,8 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
 
       mwc-button {
         margin-left: -8px;
+        margin-inline-start: -8px;
+        margin-inline-end: initial;
       }
     `;
   }
diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts
index b1479a1db3..77fdcb3cce 100644
--- a/src/panels/lovelace/cards/hui-picture-glance-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts
@@ -346,6 +346,8 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
       .box .title {
         font-weight: 500;
         margin-left: 8px;
+        margin-inline-start: 8px;
+        margin-inline-end: initial;
       }
 
       ha-icon-button {
diff --git a/src/panels/lovelace/components/hui-buttons-base.ts b/src/panels/lovelace/components/hui-buttons-base.ts
index 7030d2c6cc..8417be6bfb 100644
--- a/src/panels/lovelace/components/hui-buttons-base.ts
+++ b/src/panels/lovelace/components/hui-buttons-base.ts
@@ -95,16 +95,22 @@ export class HuiButtonsBase extends LitElement {
           width: 24px;
           height: 24px;
           margin-left: -4px;
+          margin-inline-start: -4px;
+          margin-inline-end: initial;
           margin-top: -2px;
         }
         state-badge.no-text {
           width: 26px;
           height: 26px;
           margin-left: -3px;
+          margin-inline-start: -3px;
+          margin-inline-end: initial;
           margin-top: -3px;
         }
         ha-assist-chip state-badge {
           margin-right: -4px;
+          margin-inline-end: -4px;
+          margin-inline-start: initial;
           --mdc-icon-size: 18px;
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
diff --git a/src/panels/lovelace/components/hui-energy-period-selector.ts b/src/panels/lovelace/components/hui-energy-period-selector.ts
index d5d50f1af4..e2717f6908 100644
--- a/src/panels/lovelace/components/hui-energy-period-selector.ts
+++ b/src/panels/lovelace/components/hui-energy-period-selector.ts
@@ -627,6 +627,8 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
       }
       :host([narrow]) .time-handle {
         margin-left: auto;
+        margin-inline-start: auto;
+        margin-inline-end: initial;
       }
       .label {
         display: flex;
@@ -634,12 +636,18 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
         justify-content: flex-end;
         font-size: 20px;
         margin-left: auto;
+        margin-inline-start: auto;
+        margin-inline-end: initial;
       }
       :host([narrow]) .label {
         margin-left: unset;
+        margin-inline-start: unset;
+        margin-inline-end: initial;
       }
       mwc-button {
         margin-left: 8px;
+        margin-inline-start: 8px;
+        margin-inline-end: initial;
         flex-shrink: 0;
         --mdc-button-outline-color: currentColor;
         --primary-color: currentColor;
diff --git a/src/panels/lovelace/components/hui-generic-entity-row.ts b/src/panels/lovelace/components/hui-generic-entity-row.ts
index eb745db372..f58677657e 100644
--- a/src/panels/lovelace/components/hui-generic-entity-row.ts
+++ b/src/panels/lovelace/components/hui-generic-entity-row.ts
@@ -205,6 +205,8 @@ export class HuiGenericEntityRow extends LitElement {
       .info {
         margin-left: 16px;
         margin-right: 8px;
+        margin-inline-start: 16px;
+        margin-inline-end: 8px;
         flex: 1 1 30%;
       }
       .info,
@@ -215,10 +217,14 @@ export class HuiGenericEntityRow extends LitElement {
       }
       .flex ::slotted(*) {
         margin-left: 8px;
+        margin-inline-start: 8px;
+        margin-inline-end: initial;
         min-width: 0;
       }
       .flex ::slotted([slot="secondary"]) {
         margin-left: 0;
+        margin-inline-start: 0;
+        margin-inline-end: initial;
       }
       .secondary,
       ha-relative-time {
diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
index dace73f087..98427c14f4 100644
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
@@ -152,6 +152,7 @@ export class HuiDialogEditCard
     if (this._cardConfig && this._cardConfig.type) {
       let cardName: string | undefined;
       if (isCustomType(this._cardConfig.type)) {
+        // prettier-ignore
         cardName = getCustomCardEntry(
           stripCustomPrefix(this._cardConfig.type)
         )?.name;
@@ -496,6 +497,8 @@ export class HuiDialogEditCard
         }
         .gui-mode-button {
           margin-right: auto;
+          margin-inline-end: auto;
+          margin-inline-start: initial;
         }
         .header {
           display: flex;
diff --git a/src/panels/lovelace/editor/hui-sub-element-editor.ts b/src/panels/lovelace/editor/hui-sub-element-editor.ts
index b46a03a80a..62848734dd 100644
--- a/src/panels/lovelace/editor/hui-sub-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-sub-element-editor.ts
@@ -1,9 +1,10 @@
 import "@material/mwc-button";
-import { mdiArrowLeft, mdiCodeBraces, mdiListBoxOutline } from "@mdi/js";
+import { mdiCodeBraces, mdiListBoxOutline } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-icon-button-prev";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceRowConfig } from "../entity-rows/types";
 import type { LovelaceHeaderFooterConfig } from "../header-footer/types";
@@ -39,11 +40,10 @@ export class HuiSubElementEditor extends LitElement {
     return html`
       <div class="header">
         <div class="back-title">
-          <ha-icon-button
+          <ha-icon-button-prev
             .label=${this.hass!.localize("ui.common.back")}
-            .path=${mdiArrowLeft}
             @click=${this._goBack}
-          ></ha-icon-button>
+          ></ha-icon-button-prev>
           <span slot="title"
             >${this.hass.localize(
               `ui.panel.lovelace.editor.sub-element-editor.types.${this.config?.type}`
diff --git a/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts b/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts
index 1a3398455e..870feb1cc0 100644
--- a/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts
@@ -227,6 +227,8 @@ class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
 
         .info {
           margin-left: 16px;
+          margin-inline-start: 16px;
+          margin-inline-end: initial;
           flex: 1 0 60px;
         }
 
@@ -273,6 +275,8 @@ class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
           justify-content: center;
           text-align: right;
           margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
         }
 
         .secondary {
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index 77ed7aedd6..9d182239cb 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -1027,7 +1027,7 @@ class HUIRoot extends LitElement {
           }
         }
         .main-title {
-          margin: 0 0 0 24px;
+          margin: var(--margin-title);
           line-height: 20px;
           flex-grow: 1;
         }
@@ -1040,6 +1040,8 @@ class HUIRoot extends LitElement {
           width: 100%;
           height: 100%;
           margin-left: 4px;
+          margin-inline-start: 4px;
+          margin-inline-end: initial;
         }
         ha-tabs,
         paper-tabs {
diff --git a/src/panels/lovelace/special-rows/hui-button-row.ts b/src/panels/lovelace/special-rows/hui-button-row.ts
index 6c92cd0b01..61302bb8a8 100644
--- a/src/panels/lovelace/special-rows/hui-button-row.ts
+++ b/src/panels/lovelace/special-rows/hui-button-row.ts
@@ -89,6 +89,8 @@ export class HuiButtonRow extends LitElement implements LovelaceRow {
         flex: 1;
         overflow: hidden;
         margin-left: 16px;
+        margin-inline-start: 16px;
+        margin-inline-end: initial;
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -100,6 +102,8 @@ export class HuiButtonRow extends LitElement implements LovelaceRow {
       }
       mwc-button {
         margin-right: -0.57em;
+        margin-inline-end: -0.57em;
+        margin-inline-start: initial;
       }
     `;
   }
diff --git a/src/panels/lovelace/special-rows/hui-cast-row.ts b/src/panels/lovelace/special-rows/hui-cast-row.ts
index 35ebe527e8..d91e530453 100644
--- a/src/panels/lovelace/special-rows/hui-cast-row.ts
+++ b/src/panels/lovelace/special-rows/hui-cast-row.ts
@@ -138,6 +138,8 @@ class HuiCastRow extends LitElement implements LovelaceRow {
       .flex {
         flex: 1;
         margin-left: 16px;
+        margin-inline-start: 16px;
+        margin-inline-end: initial;
         display: flex;
         justify-content: space-between;
         align-items: center;
diff --git a/src/panels/lovelace/special-rows/hui-section-row.ts b/src/panels/lovelace/special-rows/hui-section-row.ts
index 2af962d209..cc954ecfb2 100644
--- a/src/panels/lovelace/special-rows/hui-section-row.ts
+++ b/src/panels/lovelace/special-rows/hui-section-row.ts
@@ -39,6 +39,8 @@ class HuiSectionRow extends LitElement implements LovelaceRow {
       .label {
         color: var(--section-header-text-color, var(--primary-text-color));
         margin-left: 8px;
+        margin-inline-start: 8px;
+        margin-inline-end: initial;
         margin-bottom: 8px;
         margin-top: 16px;
         font-weight: 500;
@@ -48,6 +50,8 @@ class HuiSectionRow extends LitElement implements LovelaceRow {
         background-color: var(--entities-divider-color, var(--divider-color));
         margin-left: -16px;
         margin-right: -16px;
+        margin-inline-start: -16px;
+        margin-inline-end: -16px;
         margin-top: 8px;
       }
     `;
diff --git a/src/panels/lovelace/special-rows/hui-text-row.ts b/src/panels/lovelace/special-rows/hui-text-row.ts
index aa1eabff0c..6ac2764297 100644
--- a/src/panels/lovelace/special-rows/hui-text-row.ts
+++ b/src/panels/lovelace/special-rows/hui-text-row.ts
@@ -45,9 +45,11 @@ class HuiTextRow extends LitElement implements LovelaceRow {
       }
       .name {
         margin-left: 16px;
+        margin-inline-start: 16px;
+        margin-inline-end: initial;
       }
       .text {
-        text-align: right;
+        text-align: var(--float-end);
       }
     `;
   }
diff --git a/src/panels/lovelace/special-rows/hui-weblink-row.ts b/src/panels/lovelace/special-rows/hui-weblink-row.ts
index 04d00240f0..50098a47ab 100644
--- a/src/panels/lovelace/special-rows/hui-weblink-row.ts
+++ b/src/panels/lovelace/special-rows/hui-weblink-row.ts
@@ -58,6 +58,8 @@ class HuiWeblinkRow extends LitElement implements LovelaceRow {
         overflow: hidden;
         text-overflow: ellipsis;
         margin-left: 16px;
+        margin-inline-start: 16px;
+        margin-inline-end: initial;
       }
     `;
   }
diff --git a/src/panels/mailbox/ha-panel-mailbox.ts b/src/panels/mailbox/ha-panel-mailbox.ts
index 22d297e744..643112c7bd 100644
--- a/src/panels/mailbox/ha-panel-mailbox.ts
+++ b/src/panels/mailbox/ha-panel-mailbox.ts
@@ -226,6 +226,8 @@ class HaPanelMailbox extends LitElement {
         ha-tabs {
           margin-left: max(env(safe-area-inset-left), 24px);
           margin-right: max(env(safe-area-inset-right), 24px);
+          margin-inline-start: max(env(safe-area-inset-left), 24px);
+          margin-inline-end: max(env(safe-area-inset-right), 24px);
           --paper-tabs-selection-bar-color: #fff;
           text-transform: uppercase;
         }
diff --git a/src/panels/todo/dialog-todo-item-editor.ts b/src/panels/todo/dialog-todo-item-editor.ts
index a58832197f..51d181b8a3 100644
--- a/src/panels/todo/dialog-todo-item-editor.ts
+++ b/src/panels/todo/dialog-todo-item-editor.ts
@@ -411,6 +411,8 @@ class DialogTodoItemEditor extends LitElement {
         }
         ha-time-input {
           margin-left: 16px;
+          margin-inline-start: 16px;
+          margin-inline-end: initial;
         }
         .flex {
           display: flex;
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index 21d9b18214..e06a943982 100644
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@@ -429,6 +429,8 @@ const mainStyles = css`
     --direction: ltr;
     --float-start: left;
     --float-end: right;
+    --margin-title-ltr: 0 0 0 24px;
+    --margin-title-rtl: 0 24px 0 0;
 
     ${unsafeCSS(
       Object.entries(derivedStyles)
diff --git a/src/resources/styles.ts b/src/resources/styles.ts
index 80eef864e7..a2ed64635e 100644
--- a/src/resources/styles.ts
+++ b/src/resources/styles.ts
@@ -29,6 +29,8 @@ export const haStyle = css`
 
   app-toolbar [main-title] {
     margin-left: 20px;
+    margin-inline-start: 20px;
+    margin-inline-end: initial;
   }
 
   h1 {
diff --git a/src/state-control/climate/ha-state-control-climate-temperature.ts b/src/state-control/climate/ha-state-control-climate-temperature.ts
index e449704b1c..2ecc9d95e3 100644
--- a/src/state-control/climate/ha-state-control-climate-temperature.ts
+++ b/src/state-control/climate/ha-state-control-climate-temperature.ts
@@ -337,14 +337,14 @@ export class HaStateControlClimateTemperature extends LitElement {
 
   private _renderSecondary() {
     if (!this.showSecondary) {
-      return html`<p class="label"></p>`;
+      return html`<p class="label secondary"></p>`;
     }
 
     const currentTemperature = this.stateObj.attributes.current_temperature;
 
     if (currentTemperature && !this.showCurrentAsPrimary) {
       return html`
-        <p class="label">
+        <p class="label secondary">
           <ha-svg-icon .path=${mdiThermometer}></ha-svg-icon>
           ${this._renderCurrent(currentTemperature, "normal")}
         </p>
@@ -353,7 +353,7 @@ export class HaStateControlClimateTemperature extends LitElement {
 
     if (this._supportsTargetTemperature && this.showCurrentAsPrimary) {
       return html`
-        <p class="label">
+        <p class="label secondary">
           <ha-svg-icon .path=${mdiThermostat}></ha-svg-icon>
           ${this._renderTarget(this._targetTemperature.value!, "normal")}
         </p>
@@ -362,7 +362,7 @@ export class HaStateControlClimateTemperature extends LitElement {
 
     if (this._supportsTargetTemperatureRange && this.showCurrentAsPrimary) {
       return html`
-        <p class="label">
+        <p class="label secondary">
           <ha-svg-icon class="target-icon" .path=${mdiThermostat}></ha-svg-icon>
           <button
             @click=${this._handleSelectTemp}
@@ -387,7 +387,7 @@ export class HaStateControlClimateTemperature extends LitElement {
       `;
     }
 
-    return html`<p class="label"></p>`;
+    return html`<p class="label secondary"></p>`;
   }
 
   private _renderInfo() {
@@ -578,6 +578,9 @@ export class HaStateControlClimateTemperature extends LitElement {
         .container.sm .target-icon {
           display: none;
         }
+        .secondary {
+          direction: ltr;
+        }
         ha-control-circular-slider {
           --control-circular-slider-low-color: var(
             --low-color,
diff --git a/src/state-summary/state-card-climate.ts b/src/state-summary/state-card-climate.ts
index 828f422315..561990e7f5 100644
--- a/src/state-summary/state-card-climate.ts
+++ b/src/state-summary/state-card-climate.ts
@@ -40,7 +40,9 @@ class StateCardClimate extends LitElement {
 
         ha-climate-state {
           margin-left: 16px;
-          text-align: right;
+          margin-inline-start: 16px;
+          margin-inline-end: initial;
+          text-align: var(--float-end);
         }
       `,
     ];
diff --git a/src/state-summary/state-card-humidifier.ts b/src/state-summary/state-card-humidifier.ts
index f1d24b94b7..f3362fc3bf 100644
--- a/src/state-summary/state-card-humidifier.ts
+++ b/src/state-summary/state-card-humidifier.ts
@@ -42,7 +42,9 @@ class StateCardHumidifier extends LitElement {
 
         ha-humidifier-state {
           margin-left: 16px;
-          text-align: right;
+          margin-inline-start: 16px;
+          margin-inline-end: initial;
+          text-align: var(--float-end);
         }
       `,
     ];
diff --git a/src/state-summary/state-card-input_text.ts b/src/state-summary/state-card-input_text.ts
index 1a6e6ef451..a422441455 100644
--- a/src/state-summary/state-card-input_text.ts
+++ b/src/state-summary/state-card-input_text.ts
@@ -76,6 +76,8 @@ class StateCardInputText extends LitElement {
       css`
         ha-textfield {
           margin-left: 16px;
+          margin-inline-start: 16px;
+          margin-inline-end: initial;
         }
       `,
     ];
diff --git a/src/state-summary/state-card-media_player.ts b/src/state-summary/state-card-media_player.ts
index 17d66084c5..eb3350504a 100644
--- a/src/state-summary/state-card-media_player.ts
+++ b/src/state-summary/state-card-media_player.ts
@@ -57,7 +57,9 @@ class StateCardMediaPlayer extends LitElement {
 
         .state {
           margin-left: 16px;
-          text-align: right;
+          margin-inline-start: 16px;
+          margin-inline-end: initial;
+          text-align: var(--float-end);
         }
 
         .main-text {
diff --git a/src/state-summary/state-card-timer.ts b/src/state-summary/state-card-timer.ts
index d746ba860c..57bb83e8e7 100644
--- a/src/state-summary/state-card-timer.ts
+++ b/src/state-summary/state-card-timer.ts
@@ -92,7 +92,9 @@ class StateCardTimer extends LitElement {
           color: var(--primary-text-color);
 
           margin-left: 16px;
-          text-align: right;
+          margin-inline-start: 16px;
+          margin-inline-end: initial;
+          text-align: var(--float-end);
           line-height: 40px;
           white-space: nowrap;
         }
diff --git a/src/state-summary/state-card-update.ts b/src/state-summary/state-card-update.ts
index 85d34517a0..98dc766882 100755
--- a/src/state-summary/state-card-update.ts
+++ b/src/state-summary/state-card-update.ts
@@ -47,7 +47,6 @@ export class StateCardUpdate extends LitElement {
           word-break: break-word;
           display: flex;
           align-items: center;
-          direction: ltr;
           justify-content: flex-end;
         }
       `,
diff --git a/src/state-summary/state-card-water_heater.ts b/src/state-summary/state-card-water_heater.ts
index 2ca34e5f2a..812266ec5a 100644
--- a/src/state-summary/state-card-water_heater.ts
+++ b/src/state-summary/state-card-water_heater.ts
@@ -41,7 +41,9 @@ class StateCardWaterHeater extends LitElement {
 
         ha-water_heater-state {
           margin-left: 16px;
-          text-align: right;
+          margin-inline-start: 16px;
+          margin-inline-end: initial;
+          text-align: var(--float-end);
         }
       `,
     ];