RTL fixes (#19563)

cast/src/launcher/layout/hc-cast.ts

@@ -241,6 +241,8 @@ class HcCast extends LitElement {
 
       mwc-button ha-svg-icon {
         margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
         height: 18px;
       }
 

cast/src/receiver/layout/hc-launch-screen.ts

@@ -45,6 +45,8 @@ class HcLaunchScreen extends LitElement {
       }
       .status {
         padding-right: 54px;
+        padding-inline-end: 54px;
+        padding-inline-start: initial;
       }
     `;
   }

hassio/src/components/supervisor-metric.ts

@@ -64,6 +64,8 @@ class SupervisorMetric extends LitElement {
       .value {
         width: 48px;
         padding-right: 4px;
+        padding-inline-start: initial;
+        padding-inline-end: 4px;
         flex-shrink: 0;
       }
     `;

hassio/src/dialogs/registries/dialog-hassio-registries.ts

@@ -229,6 +229,8 @@ class HassioRegistriesDialog extends LitElement {
         ha-icon-button {
           color: var(--error-color);
           margin-right: -10px;
+          margin-inline-end: -10px;
+          margin-inline-start: initial;
         }
       `,
     ];

hassio/src/resources/hassio-style.ts

@@ -19,10 +19,14 @@ export const hassioStyle = css`
     letter-spacing: var(--paper-font-headline_-_letter-spacing);
     line-height: var(--paper-font-headline_-_line-height);
     padding-left: 8px;
+    padding-inline-start: 8px;
+    padding-inline-end: initial;
   }
   .description {
     margin-top: 4px;
     padding-left: 8px;
+    padding-inline-start: 8px;
+    padding-inline-end: initial;
   }
   .card-group {
     display: grid;

hassio/src/system/hassio-system.ts

@@ -73,6 +73,8 @@ class HassioSystem extends LitElement {
           color: var(--primary-text-color);
           font-size: 2em;
           padding-left: 8px;
+          padding-inline-start: 8px;
+          padding-inline-end: initial;
           margin-bottom: 8px;
         }
         hassio-supervisor-log {

src/auth/ha-authorize.ts

@@ -149,6 +149,8 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
           text-decoration: none;
           color: var(--primary-text-color);
           margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
         }
         h1 {
           font-size: 28px;

src/components/chart/state-history-charts.ts

@@ -300,6 +300,8 @@ export class StateHistoryCharts extends LitElement {
       :host([virtualize]) .entry-container {
         padding-left: 1px;
         padding-right: 1px;
+        padding-inline-start: 1px;
+        padding-inline-end: 1px;
       }
 
       .entry-container:not(:first-child) {

src/components/ha-base-time-input.ts

@@ -353,6 +353,8 @@ export class HaBaseTimeInput extends LitElement {
       text-transform: var(--mdc-typography-body2-text-transform, inherit);
       color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
       padding-left: 4px;
+      padding-inline-start: 4px;
+      padding-inline-end: initial;
     }
   `;
 }

src/components/ha-file-upload.ts

@@ -282,6 +282,8 @@ export class HaFileUpload extends LitElement {
       }
       .value ha-svg-icon {
         margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
       }
       .big-icon {
         --mdc-icon-size: 48px;

src/components/ha-icon-picker.ts

@@ -206,6 +206,8 @@ export class HaIconPicker extends LitElement {
       }
       *[slot="prefix"] {
         margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
       }
     `;
   }

src/components/ha-input-helper-text.ts

@@ -14,6 +14,8 @@ class InputHelperText extends LitElement {
       font-size: 0.75rem;
       padding-left: 16px;
       padding-right: 16px;
+      padding-inline-start: 16px;
+      padding-inline-end: 16px;
     }
   `;
 }

src/components/ha-lawn_mower-action-button.ts

@@ -75,6 +75,8 @@ class HaLawnMowerActionButton extends LitElement {
         top: 3px;
         height: 37px;
         margin-right: -0.57em;
+        margin-inline-end: -0.57em;
+        margin-inline-start: initial;
       }
       mwc-button[disabled] {
         background-color: transparent;

src/components/ha-list-item.ts

@@ -21,10 +21,18 @@ export class HaListItem extends ListItemBase {
             --mdc-list-side-padding-left,
             var(--mdc-list-side-padding, 20px)
           );
+          padding-inline-start: var(
+            --mdc-list-side-padding-left,
+            var(--mdc-list-side-padding, 20px)
+          );
           padding-right: var(
             --mdc-list-side-padding-right,
             var(--mdc-list-side-padding, 20px)
           );
+          padding-inline-end: var(
+            --mdc-list-side-padding-right,
+            var(--mdc-list-side-padding, 20px)
+          );
         }
         :host([graphic="avatar"]:not([twoLine])),
         :host([graphic="icon"]:not([twoLine])) {

src/components/ha-metric.ts

@@ -66,6 +66,8 @@ class HaMetric extends LitElement {
       .value {
         width: 48px;
         padding-right: 4px;
+        padding-inline-end: 4px;
+        padding-inline-start: initial;
         flex-shrink: 0;
       }
     `;

src/components/ha-navigation-picker.ts

@@ -206,6 +206,8 @@ export class HaNavigationPicker extends LitElement {
       }
       *[slot="prefix"] {
         margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
       }
     `;
   }

src/components/ha-qr-scanner.ts

@@ -197,6 +197,8 @@ class HaQrScanner extends LitElement {
     ha-textfield {
       flex: 1;
       margin-right: 8px;
+      margin-inline-end: 8px;
+      margin-inline-start: initial;
     }
   `;
 }

src/components/ha-selector/ha-selector-datetime.ts

@@ -78,6 +78,8 @@ export class HaDateTimeSelector extends LitElement {
     ha-date-input {
       min-width: 150px;
       margin-right: 4px;
+      margin-inline-end: 4px;
+      margin-inline-start: initial;
     }
   `;
 }

src/components/ha-selector/ha-selector-media.ts

@@ -254,6 +254,8 @@ export class HaMediaSelector extends LitElement {
         margin-bottom: 16px;
         padding-left: 16px;
         padding-right: 4px;
+        padding-inline-start: 16px;
+        padding-inline-end: 4px;
         white-space: nowrap;
       }
       .image {

src/components/ha-selector/ha-selector-selector.ts

@@ -284,6 +284,8 @@ export class HaSelectorSelector extends LitElement {
         margin-bottom: 16px;
         padding-left: 16px;
         padding-right: 4px;
+        padding-inline-start: 16px;
+        padding-inline-end: 4px;
         white-space: nowrap;
       }
     `;

src/components/ha-sidebar.ts

@@ -1048,6 +1048,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         .configuration-badge {
           position: absolute;
           left: calc(var(--app-drawer-width, 248px) - 42px);
+          inset-inline-start: calc(var(--app-drawer-width, 248px) - 42px);
+          inset-inline-end: initial;
           min-width: 20px;
           box-sizing: border-box;
           border-radius: 50%;

src/components/ha-target-picker.ts

@@ -640,6 +640,8 @@ export class HaTargetPicker extends LitElement {
       }
       .expand-btn {
         margin-right: 0;
+        margin-inline-end: 0;
+        margin-inline-start: initial;
       }
       .mdc-chip.area_id:not(.add) {
         border: 2px solid #fed6a4;

src/components/ha-textfield.ts

@@ -187,6 +187,8 @@ export class HaTextField extends TextFieldBase {
       }
       .mdc-text-field__affix--prefix {
         padding-right: var(--text-field-prefix-padding-right, 2px);
+        padding-inline-end: var(--text-field-prefix-padding-right, 2px);
+        padding-inline-start: initial;
       }
 
       .mdc-text-field:not(.mdc-text-field--disabled)

src/components/ha-vacuum-state.ts

@@ -94,6 +94,8 @@ export class HaVacuumState extends LitElement {
           top: 3px;
           height: 37px;
           margin-right: -0.57em;
+          margin-inline-end: -0.57em;
+          margin-inline-start: initial;
         }
         mwc-button[disabled] {
           background-color: transparent;

src/components/trace/ha-timeline.ts

@@ -76,6 +76,8 @@ export class HaTimeline extends LitElement {
           flex-direction: column;
           align-items: center;
           margin-right: 8px;
+          margin-inline-end: 8px;
+          margin-inline-start: initial;
           width: 24px;
         }
         :host([notEnabled]) ha-svg-icon {

src/components/trace/trace-tab-styles.ts

@@ -7,6 +7,8 @@ export const traceTabStyles = css`
     border-bottom: 1px solid var(--divider-color);
     display: flex;
     padding-left: 4px;
+    padding-inline-start: 4px;
+    padding-inline-end: initial;
   }
 
   .tabs.top {

src/dialogs/config-flow/step-flow-form.ts

@@ -250,6 +250,8 @@ class StepFlowForm extends LitElement {
 
         .submit-spinner {
           margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
         }
 
         ha-alert,

src/dialogs/more-info/controls/more-info-configurator.ts

@@ -118,6 +118,8 @@ export class MoreInfoConfigurator extends LitElement {
       width: 14px;
       height: 14px;
       margin-right: 20px;
+      margin-inline-end: 20px;
+      margin-inline-start: initial;
     }
   `;
 }

src/dialogs/notifications/notification-drawer.ts

@@ -157,6 +157,8 @@ export class HuiNotificationDrawer extends LitElement {
       padding-top: 16px;
       padding-left: env(safe-area-inset-left);
       padding-right: env(safe-area-inset-right);
+      padding-inline-start: env(safe-area-inset-left);
+      padding-inline-end: env(safe-area-inset-right);
       padding-bottom: env(safe-area-inset-bottom);
       height: calc(100% - 1px - var(--header-height));
       box-sizing: border-box;

src/dialogs/restart/dialog-restart.ts

@@ -456,6 +456,8 @@ class DialogRestart extends LitElement {
           margin: 8px 0 4px 0;
           padding-left: var(--mdc-list-side-padding, 20px);
           padding-right: var(--mdc-list-side-padding, 20px);
+          padding-inline-start: var(--mdc-list-side-padding, 20px);
+          padding-inline-end: var(--mdc-list-side-padding, 20px);
         }
         .loader {
           display: flex;

src/layouts/hass-tabs-subpage.ts

@@ -227,6 +227,8 @@ class HassTabsSubpage extends LitElement {
 
         ha-menu-button {
           margin-right: 24px;
+          margin-inline-end: 24px;
+          margin-inline-start: initial;
         }
 
         .toolbar {

src/onboarding/dialogs/app-dialog.ts

@@ -6731,6 +6731,8 @@ class DialogApp extends LitElement {
     }
     a:first-child {
       margin-right: 16px;
+      margin-inline-end: 16px;
+      margin-inline-start: initial;
     }
     svg {
       width: 100%;

src/onboarding/ha-onboarding.ts

@@ -518,6 +518,8 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
       text-decoration: none;
       color: var(--primary-text-color);
       margin-right: 16px;
+      margin-inline-end: 16px;
+      margin-inline-start: initial;
     }
   `;
 }

src/panels/calendar/ha-full-calendar.ts

@@ -452,6 +452,8 @@ export class HAFullCalendar extends LitElement {
         :host([narrow]) .header {
           padding-right: 8px;
           padding-left: 8px;
+          padding-inline-start: 8px;
+          padding-inline-end: 8px;
           flex-direction: column;
           align-items: flex-start;
           justify-content: initial;
@@ -460,6 +462,8 @@ export class HAFullCalendar extends LitElement {
         .header {
           padding-right: var(--calendar-header-padding);
           padding-left: var(--calendar-header-padding);
+          padding-inline-start: var(--calendar-header-padding);
+          padding-inline-end: var(--calendar-header-padding);
         }
 
         .navigation {

src/panels/config/application_credentials/ha-config-application-credentials.ts

@@ -265,6 +265,8 @@ export class HaConfigApplicationCredentials extends LitElement {
       }
       .header-toolbar .header-btns {
         margin-right: -12px;
+        margin-inline-end: -12px;
+        margin-inline-start: initial;
       }
       .header-btns {
         display: flex;

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -643,6 +643,8 @@ export default class HaAutomationActionRow extends LitElement {
             color: var(--secondary-text-color);
             opacity: 0.9;
             margin-right: 8px;
+            margin-inline-end: 8px;
+            margin-inline-start: initial;
           }
         }
         .card-content {

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -548,6 +548,8 @@ export default class HaAutomationConditionRow extends LitElement {
             color: var(--secondary-text-color);
             opacity: 0.9;
             margin-right: 8px;
+            margin-inline-end: 8px;
+            margin-inline-start: initial;
           }
         }
         .card-content {

src/panels/config/automation/ha-automation-editor.ts

@@ -780,6 +780,8 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         }
         ha-entity-toggle {
           margin-right: 8px;
+          margin-inline-end: 8px;
+          margin-inline-start: initial;
         }
         ha-fab {
           position: relative;

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -686,6 +686,8 @@ export default class HaAutomationTriggerRow extends LitElement {
             color: var(--secondary-text-color);
             opacity: 0.9;
             margin-right: 8px;
+            margin-inline-end: 8px;
+            margin-inline-start: initial;
           }
         }
         .card-content {

src/panels/config/cloud/account/cloud-remote-pref.ts

@@ -189,8 +189,9 @@ export class CloudRemotePref extends LitElement {
       }
       .header-actions .icon-link {
         margin-top: -16px;
-        margin-inline-end: 8px;
         margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
         direction: var(--direction);
         color: var(--secondary-text-color);
       }

src/panels/config/cloud/account/cloud-webhooks.ts

@@ -223,6 +223,8 @@ export class CloudWebhooks extends LitElement {
         }
         .progress {
           margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
           display: flex;
           flex-direction: column;
           justify-content: center;

src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts

@@ -267,6 +267,8 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
           list-style-type: none;
           margin: 4px;
           padding-left: 16px;
+          padding-inline-start: 16px;
+          padding-inline-end: initial;
         }
         .entitylistitem {
           margin-bottom: 12px;

src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts

@@ -47,6 +47,8 @@ class MQTTDiscoveryPayload extends LitElement {
         position: relative;
         padding: 8px;
         padding-left: 29px;
+        padding-inline-start: 29px;
+        padding-inline-end: initial;
         border: 1px solid var(--divider-color);
       }
       .expander:before {
@@ -67,12 +69,16 @@ class MQTTDiscoveryPayload extends LitElement {
         border: 1px solid var(--divider-color);
         border-top: 0;
         padding-left: 16px;
+        padding-inline-start: 16px;
+        padding-inline-end: initial;
       }
       pre {
         display: inline-block;
         font-size: 0.9em;
         padding-left: 4px;
         padding-right: 4px;
+        padding-inline-start: 4px;
+        padding-inline-end: 4px;
         font-family: var(--code-font-family, monospace);
       }
     `;

src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts

@@ -135,6 +135,8 @@ class MQTTMessages extends LitElement {
         position: relative;
         padding: 8px;
         padding-left: 29px;
+        padding-inline-start: 29px
+        padding-inline-end: initial;
         border: 1px solid var(--divider-color);
       }
       .expander:before {
@@ -159,6 +161,8 @@ class MQTTMessages extends LitElement {
         border: 1px solid var(--divider-color);
         border-top: 0;
         padding-left: 28px;
+        padding-inline-start: 28px;
+        padding-inline-end: initial;
         margin: 0;
       }
       pre {
@@ -167,6 +171,8 @@ class MQTTMessages extends LitElement {
         margin: 0;
         padding-left: 4px;
         padding-right: 4px;
+        padding-inline-start: 4px;
+        padding-inline-end: 4px;
         font-family: var(--code-font-family, monospace);
       }
     `;

src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts

@@ -179,6 +179,8 @@ class DialogDeviceRegistryDetail extends LitElement {
       css`
         mwc-button.warning {
           margin-right: auto;
+          margin-inline-end: auto;
+          margin-inline-start: initial;
         }
         ha-textfield {
           display: block;

src/panels/config/energy/components/ha-energy-validation-result.ts

@@ -49,6 +49,8 @@ class EnergyValidationMessage extends LitElement {
   static styles = css`
     ul {
       padding-left: 24px;
+      padding-inline-start: 24px
+      padding-inline-end: initial;
       margin: 4px 0;
     }
     a {

src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts

@@ -339,6 +339,8 @@ export class DialogEnergyGasSettings
         .price-options {
           display: block;
           padding-left: 52px;
+          padding-inline-start: 52px;
+          padding-inline-end: initial;
           margin-top: -8px;
         }
       `,

src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts

@@ -378,6 +378,8 @@ export class DialogEnergyGridFlowSettings
         .price-options {
           display: block;
           padding-left: 52px;
+          padding-inline-start: 52px;
+          padding-inline-end: initial;
           margin-top: -8px;
         }
       `,

src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts

@@ -157,7 +157,7 @@ export class DialogEnergySolarSettings
                         alt=""
                         crossorigin="anonymous"
                         referrerpolicy="no-referrer"
-                        style="height: 24px; margin-right: 16px;"
+                        style="height: 24px; margin-right: 16px; margin-inline-end: 16px; margin-inline-start: initial;"
                         src=${brandsUrl({
                           domain: entry.domain,
                           type: "icon",
@@ -277,6 +277,8 @@ export class DialogEnergySolarSettings
         img {
           height: 24px;
           margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
         }
         ha-formfield {
           display: block;
@@ -286,9 +288,13 @@ export class DialogEnergySolarSettings
         }
         .forecast-options {
           padding-left: 32px;
+          padding-inline-start: 32px;
+          padding-inline-end: initial;
         }
         .forecast-options mwc-button {
           padding-left: 8px;
+          padding-inline-start: 8px;
+          padding-inline-end: initial;
         }
       `,
     ];

src/panels/config/energy/dialogs/dialog-energy-water-settings.ts

@@ -328,6 +328,8 @@ export class DialogEnergyWaterSettings
         .price-options {
           display: block;
           padding-left: 52px;
+          padding-inline-start: 52px;
+          padding-inline-end: initial;
           margin-top: -8px;
         }
       `,

src/panels/config/entities/entity-registry-settings-editor.ts

@@ -1470,9 +1470,13 @@ export class EntityRegistrySettingsEditor extends LitElement {
         }
         ha-switch {
           margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
         }
         ha-settings-row ha-switch {
           margin-right: 0;
+          margin-inline-end: 0;
+          margin-inline-start: initial;
         }
         ha-textfield,
         ha-icon-picker,

src/panels/config/ha-config-section.ts

@@ -93,6 +93,8 @@ export class HaConfigSection extends LitElement {
       .horizontal .intro {
         max-width: 400px;
         margin-right: 40px;
+        margin-inline-end: 40px;
+        margin-inline-start: initial;
       }
 
       .panel {
@@ -113,6 +115,8 @@ export class HaConfigSection extends LitElement {
       .narrow .intro {
         padding-bottom: 20px;
         margin-right: 0;
+        margin-inline-end: 0;
+        margin-inline-start: initial;
         max-width: 500px;
       }
 

src/panels/config/integrations/ha-config-integrations-dashboard.ts

@@ -790,7 +790,7 @@ class HaConfigIntegrationsDashboard extends SubscribeMixin(LitElement) {
           grid-column-end: -1;
         }
         .empty-message h1 {
-          margin-bottom: 0;
+          margin: 0;
         }
         search-input {
           --mdc-text-field-fill-color: var(--sidebar-background-color);

src/panels/config/integrations/ha-integration-action-card.ts

@@ -113,9 +113,13 @@ export class HaIntegrationActionCard extends LitElement {
       }
       :host ::slotted(*) {
         margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
       }
       :host ::slotted(:last-child) {
         margin-right: 0;
+        margin-inline-end: 0;
+        margin-inline-start: initial;
       }
     `,
   ];

src/panels/config/integrations/ha-integration-header.ts

@@ -144,6 +144,8 @@ export class HaIntegrationHeader extends LitElement {
     }
     .secondary > ha-svg-icon {
       margin-right: 4px;
+      margin-inline-end: 4px;
+      margin-inline-start: initial;
       flex-shrink: 0;
     }
     .error ha-svg-icon {

src/panels/config/integrations/ha-integration-list-item.ts

@@ -142,12 +142,18 @@ export class HaIntegrationListItem extends ListItemBase {
         }
         .mdc-deprecated-list-item__meta > * {
           margin-right: 8px;
+          margin-inline-end: 8px;
+          margin-inline-start: initial;
         }
         .mdc-deprecated-list-item__meta > *:last-child {
           margin-right: 0px;
+          margin-inline-end: 0px;
+          margin-inline-start: initial;
         }
         ha-icon-next {
           margin-right: 8px;
+          margin-inline-end: 8px;
+          margin-inline-start: initial;
         }
         .open-in-new {
           --mdc-icon-size: 22px;

src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts

@@ -439,6 +439,8 @@ class DialogZHAReconfigureDevice extends LitElement {
         .flex-container ha-circular-progress,
         .flex-container ha-svg-icon {
           margin-right: 20px;
+          margin-inline-end: 20px;
+          margin-inline-start: initial;
         }
       `,
     ];

src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts

@@ -265,6 +265,8 @@ class ZHAAddDevicesPage extends LitElement {
           position: absolute;
           margin-top: 16px;
           margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
           top: -6px;
           right: 0;
           color: var(--primary-color);
@@ -278,6 +280,8 @@ class ZHAAddDevicesPage extends LitElement {
         .help-text {
           color: grey;
           padding-left: 16px;
+          padding-inline-start: 16px;
+          padding-inline-end: initial;
         }
         ha-textarea {
           width: 100%;

src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts

@@ -251,12 +251,16 @@ export class ZHAClusterAttributes extends LitElement {
           align-items: center;
           padding-left: 28px;
           padding-right: 28px;
+          padding-inline-start: 28px;
+          padding-inline-end: 28px;
           padding-bottom: 10px;
         }
 
         .input-text {
           padding-left: 28px;
           padding-right: 28px;
+          padding-inline-start: 28px;
+          padding-inline-end: 28px;
           padding-bottom: 10px;
         }
 

src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts

@@ -212,18 +212,24 @@ export class ZHAClusterCommands extends LitElement {
           align-items: center;
           padding-left: 28px;
           padding-right: 28px;
+          padding-inline-start: 28px;
+          padding-inline-end: 28px;
           padding-bottom: 10px;
         }
 
         .input-text {
           padding-left: 28px;
           padding-right: 28px;
+          padding-inline-start: 28px;
+          padding-inline-end: 28px;
           padding-bottom: 10px;
         }
 
         .command-form {
           padding-left: 28px;
           padding-right: 28px;
+          padding-inline-start: 28px;
+          padding-inline-end: 28px;
           padding-bottom: 10px;
         }
 
@@ -236,6 +242,8 @@ export class ZHAClusterCommands extends LitElement {
           top: -6px;
           right: 0;
           padding-right: 0px;
+          padding-inline-end: 0px;
+          padding-inline-start: initial;
           color: var(--primary-color);
         }
       `,

src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts

@@ -379,6 +379,8 @@ class ZHAConfigDashboard extends LitElement {
         .network-settings ha-settings-row {
           padding-left: 0;
           padding-right: 0;
+          padding-inline-start: 0;
+          padding-inline-end: 0;
 
           --paper-item-body-two-line-min-height: 55px;
         }
@@ -388,6 +390,8 @@ class ZHAConfigDashboard extends LitElement {
           word-break: break-all;
           text-indent: -1em;
           padding-left: 1em;
+          padding-inline-start: 1em;
+          padding-inline-end: initial;
         }
 
         .network-settings ha-settings-row ha-icon-button {

src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts

@@ -142,6 +142,8 @@ export class ZHADeviceBindingControl extends LitElement {
           align-items: center;
           padding-left: 28px;
           padding-right: 28px;
+          padding-inline-start: 28px;
+          padding-inline-end: 28px;
           padding-bottom: 10px;
         }
 

src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts

@@ -216,12 +216,16 @@ export class ZHAGroupBindingControl extends LitElement {
           align-items: center;
           padding-left: 28px;
           padding-right: 28px;
+          padding-inline-start: 28px;
+          padding-inline-end: 28px;
           padding-bottom: 10px;
         }
 
         .input-text {
           padding-left: 28px;
           padding-right: 28px;
+          padding-inline-start: 28px;
+          padding-inline-end: 28px;
           padding-bottom: 10px;
         }
 

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts

@@ -825,6 +825,8 @@ class DialogZWaveJSAddNode extends LitElement {
           width: 16px;
           height: 16px;
           margin-right: 0px;
+          margin-inline-end: 0px;
+          margin-inline-start: initial;
         }
         .stage {
           padding: 8px;
@@ -891,6 +893,8 @@ class DialogZWaveJSAddNode extends LitElement {
         .flex-container ha-circular-progress,
         .flex-container ha-svg-icon {
           margin-right: 20px;
+          margin-inline-end: 20px;
+          margin-inline-start: initial;
         }
       `,
     ];

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-node-statistics.ts

@@ -461,11 +461,15 @@ class DialogZWaveJSNodeStatistics extends LitElement {
         .key-cell {
           display: table-cell;
           padding-right: 5px;
+          padding-inline-end: 5px;
+          padding-inline-start: initial;
         }
 
         .value-cell {
           display: table-cell;
           padding-left: 5px;
+          padding-inline-start: 5px;
+          padding-inline-end: initial;
         }
 
         span[slot="meta"] {

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-network-routes.ts

@@ -302,6 +302,8 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {
 
         .flex-container ha-svg-icon {
           margin-right: 20px;
+          margin-inline-end: 20px;
+          margin-inline-start: initial;
         }
 
         mwc-linear-progress {

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-node-routes.ts

@@ -255,6 +255,8 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {
         .flex-container ha-svg-icon,
         .flex-container ha-circular-progress {
           margin-right: 20px;
+          margin-inline-end: 20px;
+          margin-inline-start: initial;
         }
       `,
     ];

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts

@@ -236,6 +236,8 @@ class DialogZWaveJSReinterviewNode extends LitElement {
         .flex-container ha-circular-progress,
         .flex-container ha-svg-icon {
           margin-right: 20px;
+          margin-inline-end: 20px;
+          margin-inline-start: initial;
         }
       `,
     ];

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-failed-node.ts

@@ -219,6 +219,8 @@ class DialogZWaveJSRemoveFailedNode extends LitElement {
         .flex-container ha-circular-progress,
         .flex-container ha-svg-icon {
           margin-right: 20px;
+          margin-inline-end: 20px;
+          margin-inline-start: initial;
         }
       `,
     ];

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts

@@ -229,6 +229,8 @@ class DialogZWaveJSRemoveNode extends LitElement {
         .flex-container ha-circular-progress,
         .flex-container ha-svg-icon {
           margin-right: 20px;
+          margin-inline-end: 20px;
+          margin-inline-start: initial;
         }
       `,
     ];

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts

@@ -680,6 +680,8 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
         .sectionHeader {
           position: relative;
           padding-right: 40px;
+          padding-inline-end: 40px;
+          padding-inline-start: initial;
         }
 
         .row {
@@ -701,6 +703,8 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
           width: 48px;
           height: 48px;
           margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
         }
         .network-status div.heading ha-svg-icon {
           width: 48px;

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts

@@ -477,6 +477,8 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
         .sectionHeader {
           position: relative;
           padding-right: 40px;
+          padding-inline-start: initial;
+          padding-inline-end: 40px;
         }
 
         ha-settings-row {
@@ -497,6 +499,8 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
           text-transform: uppercase;
           font-size: 0.8em;
           padding-right: 24px;
+          padding-inline-end: 24px;
+          padding-inline-start: initial;
           line-height: 1.5em;
         }
 

src/panels/config/script/ha-script-field-row.ts

@@ -331,6 +331,8 @@ export default class HaScriptFieldRow extends LitElement {
             color: var(--secondary-text-color);
             opacity: 0.9;
             margin-right: 8px;
+            margin-inline-end: 8px;
+            margin-inline-start: initial;
           }
         }
         .card-content {

src/panels/config/voice-assistants/assist-pref.ts

@@ -235,9 +235,9 @@ export class AssistPref extends LitElement {
       }
       .header-actions .icon-link {
         margin-top: -16px;
-        margin-inline-end: 8px;
-        margin-inline-start: 8px;
         margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
         direction: var(--direction);
         color: var(--secondary-text-color);
       }

src/panels/config/voice-assistants/cloud-alexa-pref.ts

@@ -268,8 +268,9 @@ export class CloudAlexaPref extends LitElement {
       }
       .header-actions .icon-link {
         margin-top: -16px;
-        margin-inline-end: 8px;
         margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
         direction: var(--direction);
         color: var(--secondary-text-color);
       }

src/panels/config/voice-assistants/cloud-google-pref.ts

@@ -337,8 +337,9 @@ export class CloudGooglePref extends LitElement {
       }
       .header-actions .icon-link {
         margin-top: -16px;
-        margin-inline-end: 8px;
         margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
         direction: var(--direction);
         color: var(--secondary-text-color);
       }

src/panels/config/voice-assistants/debug/assist-pipeline-run-debug.ts

@@ -442,6 +442,7 @@ export class AssistPipelineRunDebug extends LitElement {
         align-items: center;
         flex-wrap: wrap;
         margin: 0 16px 16px;
+        direction: var(--direction);
       }
       ha-assist-pipeline-picker {
         display: block;

src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts

@@ -390,9 +390,13 @@ export class AssistPipelineDebug extends LitElement {
     }
     ha-expansion-panel {
       padding-left: 8px;
+      padding-inline-start: 8px;
+      padding-inline-end: initial;
     }
     .card-content ha-expansion-panel {
       padding-left: 0px;
+      padding-inline-start: 0px;
+      padding-inline-end: initial;
       --expansion-panel-summary-padding: 0px;
       --expansion-panel-content-padding: 0px;
     }

src/panels/config/voice-assistants/expose/expose-assistant-icon.ts

@@ -84,6 +84,8 @@ export class VoiceAssistantExposeAssistantIcon extends LitElement {
         position: relative;
         height: 24px;
         margin-right: 16px;
+        margin-inline-end: 16px;
+        margin-inline-start: initial;
       }
       .unsupported {
         color: var(--error-color);

src/panels/developer-tools/state/developer-tools-state.ts

@@ -684,6 +684,8 @@ class HaPanelDevState extends LitElement {
           cursor: pointer;
           flex-shrink: 0;
           margin-right: 8px;
+          margin-inline-end: 8px;
+          margin-inline-start: initial;
         }
         .entities td:nth-child(1) {
           min-width: 300px;

src/panels/logbook/ha-logbook-renderer.ts

@@ -711,8 +711,8 @@ class HaLogbookRenderer extends LitElement {
         .narrow .icon-message state-badge {
           margin-left: 0;
           margin-inline-start: 0;
-          margin-inline-end: 8px;
           margin-right: 8px;
+          margin-inline-end: 8px;
           direction: var(--direction);
         }
       `,

src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts

@@ -59,6 +59,8 @@ export class HuiEnergyDateSelectionCard
     return css`
       .padded {
         padding-left: 16px !important;
+        padding-inline-start: 16px !important;
+        padding-inline-end: initial !important;
       }
     `;
   }

src/panels/lovelace/cards/hui-area-card.ts

@@ -566,6 +566,8 @@ export class HuiAreaCard
         white-space: nowrap;
         float: left;
         margin-right: 4px;
+        margin-inline-end: 4px;
+        margin-inline-start: initial;
       }
 
       .alerts {
@@ -577,6 +579,8 @@ export class HuiAreaCard
         color: var(--text-accent-color, var(--text-primary-color));
         padding: 8px;
         margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
         border-radius: 50%;
       }
 

src/panels/lovelace/cards/hui-entity-card.ts

@@ -292,6 +292,8 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
         .value {
           font-size: 28px;
           margin-right: 4px;
+          margin-inline-end: 4px;
+          margin-inline-start: initial;
         }
 
         .measurement {

src/panels/lovelace/cards/hui-statistic-card.ts

@@ -299,6 +299,8 @@ export class HuiStatisticCard extends LitElement implements LovelaceCard {
         .value {
           font-size: 28px;
           margin-right: 4px;
+          margin-inline-end: 4px;
+          margin-inline-start: initial;
         }
 
         .measurement {

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

@@ -709,6 +709,8 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
 
       .due ha-svg-icon {
         margin-right: 4px;
+        margin-inline-end: 4px;
+        margin-inline-start: initial;
         --mdc-icon-size: 14px;
       }
 

src/panels/lovelace/components/hui-input-list-editor.ts

@@ -105,6 +105,8 @@ export class HuiInputListEditor extends LitElement {
     return css`
       ha-icon-button {
         margin-right: -24px;
+        margin-inline-end: -24px;
+        margin-inline-start: initial;
         color: var(--secondary-text-color);
       }
       ha-textfield {

src/panels/lovelace/components/hui-marquee.ts

@@ -96,6 +96,8 @@ class HuiMarquee extends LitElement {
 
       :host([animating]) .marquee-inner span {
         padding-right: 16px;
+        padding-inline-end: 16px;
+        padding-inline-start: initial;
       }
 
       @keyframes marquee {

src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts

@@ -325,6 +325,8 @@ export class HaCardConditionEditor extends LitElement {
           color: var(--secondary-text-color);
           opacity: 0.9;
           margin-right: 8px;
+          margin-inline-end: 8px;
+          margin-inline-start: initial;
         }
       }
       h3 {

src/panels/lovelace/editor/config-elements/config-elements-style.ts

@@ -15,10 +15,14 @@ export const configElementStyle = css`
   .side-by-side > * {
     flex: 1;
     padding-right: 8px;
+    padding-inline-end: 8px;
+    padding-inline-start: initial;
   }
   .side-by-side > *:last-child {
     flex: 1;
     padding-right: 0;
+    padding-inline-end: 0;
+    padding-inline-start: initial;
   }
   .suffix {
     margin: 0 8px;

src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts

@@ -249,6 +249,8 @@ export class HuiConditionalCardEditor
         }
         .gui-mode-button {
           margin-right: auto;
+          margin-inline-end: auto;
+          margin-inline-start: initial;
         }
       `,
     ];

src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts

@@ -322,6 +322,8 @@ export class HuiStackCardEditor
 
         .gui-mode-button {
           margin-right: auto;
+          margin-inline-end: auto;
+          margin-inline-start: initial;
         }
       `,
     ];

src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts

@@ -120,6 +120,8 @@ export class HuiHeaderFooterEditor extends LitElement {
 
       .header-footer-icon {
         padding-right: 8px;
+        padding-inline-end: 8px;
+        padding-inline-start: initial;
       }
     `;
   }

src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts

@@ -182,6 +182,8 @@ export class HuiUnusedEntities extends LitElement {
         bottom: 0;
         padding-right: 16px;
         padding-left: calc(16px + env(safe-area-inset-left));
+        padding-inline-end: 16px;
+        padding-inline-start: calc(16px + env(safe-area-inset-left));
       }
       ha-fab {
         position: relative;

src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts

@@ -524,6 +524,8 @@ export class HuiDialogEditView extends LitElement {
         }
         mwc-button.warning {
           margin-right: auto;
+          margin-inline-end: auto;
+          margin-inline-start: initial;
         }
         ha-circular-progress {
           display: none;

src/panels/lovelace/entity-rows/hui-button-entity-row.ts

@@ -63,6 +63,8 @@ class HuiButtonEntityRow extends LitElement implements LovelaceRow {
     return css`
       mwc-button:last-child {
         margin-right: -0.57em;
+        margin-inline-end: -0.57em;
+        margin-inline-start: initial;
       }
     `;
   }

src/panels/lovelace/entity-rows/hui-cover-entity-row.ts

@@ -72,6 +72,8 @@ class HuiCoverEntityRow extends LitElement implements LovelaceRow {
       ha-cover-controls,
       ha-cover-tilt-controls {
         margin-right: -0.57em;
+        margin-inline-end: -0.57em;
+        margin-inline-start: initial;
       }
     `;
   }

src/panels/lovelace/entity-rows/hui-input-button-entity-row.ts

@@ -63,6 +63,8 @@ class HuiInputButtonEntityRow extends LitElement implements LovelaceRow {
     return css`
       mwc-button:last-child {
         margin-right: -0.57em;
+        margin-inline-end: -0.57em;
+        margin-inline-start: initial;
       }
     `;
   }

src/panels/lovelace/entity-rows/hui-lock-entity-row.ts

@@ -66,6 +66,8 @@ class HuiLockEntityRow extends LitElement implements LovelaceRow {
     return css`
       mwc-button {
         margin-right: -0.57em;
+        margin-inline-end: -0.57em;
+        margin-inline-start: initial;
       }
     `;
   }

src/panels/lovelace/entity-rows/hui-scene-entity-row.ts

@@ -67,6 +67,8 @@ class HuiSceneEntityRow extends LitElement implements LovelaceRow {
     return css`
       mwc-button {
         margin-right: -0.57em;
+        margin-inline-end: -0.57em;
+        margin-inline-start: initial;
       }
       :host {
         cursor: pointer;