Various RTL fixes (#19134)

* Various RTL fixes

* Various RTL fixes

src/components/ha-check-list-item.ts

@@ -30,6 +30,9 @@ export class HaCheckListItem extends CheckListItemBase {
       }
       .mdc-deprecated-list-item__meta {
         flex-shrink: 0;
+        direction: var(--direction);
+        margin-inline-start: auto;
+        margin-inline-end: 0;
       }
       .mdc-deprecated-list-item__graphic {
         margin-top: var(--check-list-item-graphic-margin-top);

src/components/ha-list-item.ts

@@ -36,12 +36,12 @@ export class HaListItem extends ListItemBase {
             --mdc-list-item-graphic-margin,
             16px
           ) !important;
-          direction: var(--direction);
+          direction: var(--direction) !important;
         }
         span.material-icons:last-of-type {
           margin-inline-start: auto !important;
           margin-inline-end: 0px !important;
-          direction: var(--direction);
+          direction: var(--direction) !important;
         }
         .mdc-deprecated-list-item__meta {
           display: var(--mdc-list-item-meta-display);
@@ -85,6 +85,15 @@ export class HaListItem extends ListItemBase {
           pointer-events: unset;
         }
       `,
+      // safari workaround - must be explicit
+      document.dir === "rtl"
+        ? css`
+            span.material-icons:first-of-type,
+            span.material-icons:last-of-type {
+              direction: rtl !important;
+            }
+          `
+        : css``,
     ];
   }
 }

src/components/ha-settings-row.ts

@@ -35,7 +35,12 @@ export class HaSettingsRow extends LitElement {
         align-items: center;
       }
       .body {
-        padding: 8px 16px 8px 0;
+        padding-top: 8px;
+        padding-bottom: 8px;
+        padding-left: 0;
+        padding-inline-start: 0;
+        padding-right: 16x;
+        padding-inline-end: 16px;
         overflow: hidden;
         display: var(--layout-vertical_-_display);
         flex-direction: var(--layout-vertical_-_flex-direction);

src/components/ha-two-pane-top-app-bar-fixed.ts

@@ -280,6 +280,8 @@ export abstract class TopAppBarBaseBase extends BaseElement {
       }
       #title {
         border-right: 1px solid rgba(255, 255, 255, 0.12);
+        border-inline-end: 1px solid rgba(255, 255, 255, 0.12);
+        border-inline-start: initial;
         box-sizing: border-box;
         flex: 0 0 var(--sidepane-width, 250px);
         width: var(--sidepane-width, 250px);
@@ -290,6 +292,8 @@ export abstract class TopAppBarBaseBase extends BaseElement {
       }
       .pane {
         border-right: 1px solid var(--divider-color);
+        border-inline-end: 1px solid var(--divider-color);
+        border-inline-start: initial;
         box-sizing: border-box;
         display: flex;
         flex: 0 0 var(--sidepane-width, 250px);

src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts

@@ -668,7 +668,12 @@ export class HaVoiceCommandDialog extends LitElement {
         ha-button-menu {
           --mdc-theme-on-primary: var(--text-primary-color);
           --mdc-theme-primary: var(--primary-color);
-          margin: -8px 0 0 -8px;
+          margin-top: -8px;
+          margin-bottom: 0;
+          margin-right: 0;
+          margin-inline-end: 0;
+          margin-left: -8px;
+          margin-inline-start: -8px;
         }
         ha-button-menu ha-button {
           --mdc-theme-primary: var(--secondary-text-color);
@@ -689,7 +694,7 @@ export class HaVoiceCommandDialog extends LitElement {
           height: 28px;
           margin-left: 4px;
           margin-inline-start: 4px;
-          margin-inline-end: 4px;
+          margin-inline-end: initial;
           direction: var(--direction);
         }
         ha-list-item {
@@ -698,7 +703,7 @@ export class HaVoiceCommandDialog extends LitElement {
         ha-list-item ha-svg-icon {
           margin-left: 4px;
           margin-inline-start: 4px;
-          margin-inline-end: 4px;
+          margin-inline-end: initial;
           direction: var(--direction);
           display: block;
         }

src/panels/lovelace/cards/hui-todo-list-card.ts

@@ -624,6 +624,8 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
       .addRow ha-icon-button {
         position: absolute;
         right: 16px;
+        inset-inline-start: initial;
+        inset-inline-end: 16px;
       }
 
       .addRow,
@@ -636,8 +638,11 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
       .header {
         padding-left: 30px;
         padding-right: 16px;
+        padding-inline-start: 30px;
+        padding-inline-end: 16px;
         margin-top: 8px;
         justify-content: space-between;
+        direction: var(--direction);
       }
 
       .header span {

src/panels/lovelace/cards/hui-weather-forecast-card.ts

@@ -486,6 +486,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
           align-items: center;
           min-width: 64px;
           margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
         }
 
         .icon-image > * {
@@ -505,7 +507,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         }
 
         .temp-attribute {
-          text-align: right;
+          text-align: var(--float-end);
         }
 
         .temp-attribute .temp {
@@ -535,6 +537,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         .name-state {
           overflow: hidden;
           padding-right: 12px;
+          padding-inline-end: 12px;
+          padding-inline-start: initial;
           width: 100%;
         }
 
@@ -634,6 +638,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
 
         :host([narrow]) .temp-attribute .temp {
           margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
         }
 
         :host([narrow]) .temp span {
@@ -655,6 +661,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
 
         :host([veryNarrow]) .name-state {
           padding-right: 0;
+          padding-inline-end: 0;
+          padding-inline-start: initial;
         }
 
         /* ============= VERY VERY NARROW ============= */
@@ -672,6 +680,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
 
         :host([veryVeryNarrow]) .icon-image {
           margin-right: 0;
+          margin-inline-end: 0;
+          margin-inline-start: initial;
         }
       `,
     ];