RTL fixes (#19563)

2024-01-30 15:27:40 +02:00 · 2024-01-30 15:27:40 +02:00 · 5e40bb55eb
parent 476457fe2e
commit 5e40bb55eb
109 changed files with 283 additions and 8 deletions
--- a/cast/src/launcher/layout/hc-cast.ts
+++ b/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;
      }

--- a/cast/src/receiver/layout/hc-launch-screen.ts
+++ b/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;
      }
    `;
  }
--- a/hassio/src/components/supervisor-metric.ts
+++ b/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;
      }
    `;
--- a/hassio/src/dialogs/registries/dialog-hassio-registries.ts
+++ b/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;
        }
      `,
    ];
--- a/hassio/src/resources/hassio-style.ts
+++ b/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;
--- a/hassio/src/system/hassio-system.ts
+++ b/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 {
--- a/src/auth/ha-authorize.ts
+++ b/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;
--- a/src/components/chart/state-history-charts.ts
+++ b/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) {
--- a/src/components/ha-base-time-input.ts
+++ b/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;
    }
  `;
 }
--- a/src/components/ha-file-upload.ts
+++ b/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;
--- a/src/components/ha-icon-picker.ts
+++ b/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;
      }
    `;
  }
--- a/src/components/ha-input-helper-text.ts
+++ b/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;
    }
  `;
 }
--- a/src/components/ha-lawn_mower-action-button.ts
+++ b/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;
--- a/src/components/ha-list-item.ts
+++ b/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])) {
--- a/src/components/ha-metric.ts
+++ b/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;
      }
    `;
--- a/src/components/ha-navigation-picker.ts
+++ b/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;
      }
    `;
  }
--- a/src/components/ha-qr-scanner.ts
+++ b/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;
    }
  `;
 }
--- a/src/components/ha-selector/ha-selector-datetime.ts
+++ b/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;
    }
  `;
 }
--- a/src/components/ha-selector/ha-selector-media.ts
+++ b/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 {
--- a/src/components/ha-selector/ha-selector-selector.ts
+++ b/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;
      }
    `;
--- a/src/components/ha-sidebar.ts
+++ b/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%;
--- a/src/components/ha-target-picker.ts
+++ b/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;
--- a/src/components/ha-textfield.ts
+++ b/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)
--- a/src/components/ha-vacuum-state.ts
+++ b/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;
--- a/src/components/trace/ha-timeline.ts
+++ b/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 {
--- a/src/components/trace/trace-tab-styles.ts
+++ b/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 {
--- a/src/dialogs/config-flow/step-flow-form.ts
+++ b/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,
--- a/src/dialogs/more-info/controls/more-info-configurator.ts
+++ b/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;
    }
  `;
 }
--- a/src/dialogs/notifications/notification-drawer.ts
+++ b/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;
--- a/src/dialogs/restart/dialog-restart.ts
+++ b/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;
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/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 {
--- a/src/onboarding/dialogs/app-dialog.ts
+++ b/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%;
--- a/src/onboarding/ha-onboarding.ts
+++ b/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;
    }
  `;
 }
--- a/src/panels/calendar/ha-full-calendar.ts
+++ b/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 {
--- a/src/panels/config/application_credentials/ha-config-application-credentials.ts
+++ b/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;
--- a/src/panels/config/automation/action/ha-automation-action-row.ts
+++ b/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 {
--- a/src/panels/config/automation/condition/ha-automation-condition-row.ts
+++ b/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 {
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/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;
--- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
+++ b/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 {
--- a/src/panels/config/cloud/account/cloud-remote-pref.ts
+++ b/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);
      }
--- a/src/panels/config/cloud/account/cloud-webhooks.ts
+++ b/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;
--- a/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts
+++ b/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;
--- a/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts
+++ b/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);
      }
    `;
--- a/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts
+++ b/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);
      }
    `;
--- a/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts
+++ b/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;
--- a/src/panels/config/energy/components/ha-energy-validation-result.ts
+++ b/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 {
--- a/src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts
+++ b/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;
        }
      `,
--- a/src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts
+++ b/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;
        }
      `,
--- a/src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts
+++ b/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;
        }
      `,
    ];
--- a/src/panels/config/energy/dialogs/dialog-energy-water-settings.ts
+++ b/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;
        }
      `,
--- a/src/panels/config/entities/entity-registry-settings-editor.ts
+++ b/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,
--- a/src/panels/config/ha-config-section.ts
+++ b/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;
      }

--- a/src/panels/config/integrations/ha-config-integrations-dashboard.ts
+++ b/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);
--- a/src/panels/config/integrations/ha-integration-action-card.ts
+++ b/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;
      }
    `,
  ];
--- a/src/panels/config/integrations/ha-integration-header.ts
+++ b/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 {
--- a/src/panels/config/integrations/ha-integration-list-item.ts
+++ b/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;
--- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts
+++ b/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;
        }
      `,
    ];
--- 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
@ -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%;
--- a/src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts
+++ b/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;
        }

--- a/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts
+++ b/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);
        }
      `,
--- a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts
+++ b/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 {
--- a/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts
+++ b/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;
        }

--- a/src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts
+++ b/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;
        }

--- 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
@ -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;
        }
      `,
    ];
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-node-statistics.ts
+++ b/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"] {
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-network-routes.ts
+++ b/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 {
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-node-routes.ts
+++ b/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;
        }
      `,
    ];
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts
+++ b/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;
        }
      `,
    ];
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-failed-node.ts
+++ b/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;
        }
      `,
    ];
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts
+++ b/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;
        }
      `,
    ];
--- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
+++ b/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;
--- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
+++ b/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;
        }

--- a/src/panels/config/script/ha-script-field-row.ts
+++ b/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 {
--- a/src/panels/config/voice-assistants/assist-pref.ts
+++ b/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);
      }
--- a/src/panels/config/voice-assistants/cloud-alexa-pref.ts
+++ b/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);
      }
--- a/src/panels/config/voice-assistants/cloud-google-pref.ts
+++ b/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);
      }
--- a/src/panels/config/voice-assistants/debug/assist-pipeline-run-debug.ts
+++ b/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;
--- a/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts
+++ b/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;
    }
--- a/src/panels/config/voice-assistants/expose/expose-assistant-icon.ts
+++ b/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);
--- a/src/panels/developer-tools/state/developer-tools-state.ts
+++ b/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;
--- a/src/panels/logbook/ha-logbook-renderer.ts
+++ b/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);
        }
      `,
--- a/src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts
+++ b/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;
      }
    `;
  }
--- a/src/panels/lovelace/cards/hui-area-card.ts
+++ b/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%;
      }

--- a/src/panels/lovelace/cards/hui-entity-card.ts
+++ b/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 {
--- a/src/panels/lovelace/cards/hui-statistic-card.ts
+++ b/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 {
--- a/src/panels/lovelace/cards/hui-todo-list-card.ts
+++ b/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;
      }

--- a/src/panels/lovelace/components/hui-input-list-editor.ts
+++ b/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 {
--- a/src/panels/lovelace/components/hui-marquee.ts
+++ b/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 {
--- a/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts
+++ b/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 {
--- a/src/panels/lovelace/editor/config-elements/config-elements-style.ts
+++ b/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;
--- a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
+++ b/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;
        }
      `,
    ];
--- a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
+++ b/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;
        }
      `,
    ];
--- a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
+++ b/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;
      }
    `;
  }
--- a/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts
+++ b/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;
--- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
+++ b/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;
--- a/src/panels/lovelace/entity-rows/hui-button-entity-row.ts
+++ b/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;
      }
    `;
  }
--- a/src/panels/lovelace/entity-rows/hui-cover-entity-row.ts
+++ b/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;
      }
    `;
  }
--- a/src/panels/lovelace/entity-rows/hui-input-button-entity-row.ts
+++ b/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;
      }
    `;
  }
--- a/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts
+++ b/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;
      }
    `;
  }
--- a/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts
+++ b/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;
--- a/Show More
+++ b/Show More