From 5e40bb55eb45753d8a958391e8f36f3271a9d226 Mon Sep 17 00:00:00 2001 From: Yosi Levy <37745463+yosilevy@users.noreply.github.com> Date: Tue, 30 Jan 2024 15:27:40 +0200 Subject: [PATCH] RTL fixes (#19563) --- cast/src/launcher/layout/hc-cast.ts | 2 ++ cast/src/receiver/layout/hc-launch-screen.ts | 2 ++ hassio/src/components/supervisor-metric.ts | 2 ++ .../src/dialogs/registries/dialog-hassio-registries.ts | 2 ++ hassio/src/resources/hassio-style.ts | 4 ++++ hassio/src/system/hassio-system.ts | 2 ++ src/auth/ha-authorize.ts | 2 ++ src/components/chart/state-history-charts.ts | 2 ++ src/components/ha-base-time-input.ts | 2 ++ src/components/ha-file-upload.ts | 2 ++ src/components/ha-icon-picker.ts | 2 ++ src/components/ha-input-helper-text.ts | 2 ++ src/components/ha-lawn_mower-action-button.ts | 2 ++ src/components/ha-list-item.ts | 8 ++++++++ src/components/ha-metric.ts | 2 ++ src/components/ha-navigation-picker.ts | 2 ++ src/components/ha-qr-scanner.ts | 2 ++ src/components/ha-selector/ha-selector-datetime.ts | 2 ++ src/components/ha-selector/ha-selector-media.ts | 2 ++ src/components/ha-selector/ha-selector-selector.ts | 2 ++ src/components/ha-sidebar.ts | 2 ++ src/components/ha-target-picker.ts | 2 ++ src/components/ha-textfield.ts | 2 ++ src/components/ha-vacuum-state.ts | 2 ++ src/components/trace/ha-timeline.ts | 2 ++ src/components/trace/trace-tab-styles.ts | 2 ++ src/dialogs/config-flow/step-flow-form.ts | 2 ++ src/dialogs/more-info/controls/more-info-configurator.ts | 2 ++ src/dialogs/notifications/notification-drawer.ts | 2 ++ src/dialogs/restart/dialog-restart.ts | 2 ++ src/layouts/hass-tabs-subpage.ts | 2 ++ src/onboarding/dialogs/app-dialog.ts | 2 ++ src/onboarding/ha-onboarding.ts | 2 ++ src/panels/calendar/ha-full-calendar.ts | 4 ++++ .../ha-config-application-credentials.ts | 2 ++ .../config/automation/action/ha-automation-action-row.ts | 2 ++ .../automation/condition/ha-automation-condition-row.ts | 2 ++ src/panels/config/automation/ha-automation-editor.ts | 2 ++ .../automation/trigger/ha-automation-trigger-row.ts | 2 ++ src/panels/config/cloud/account/cloud-remote-pref.ts | 3 ++- src/panels/config/cloud/account/cloud-webhooks.ts | 2 ++ .../mqtt/dialog-mqtt-device-debug-info.ts | 2 ++ .../integration-elements/mqtt/mqtt-discovery-payload.ts | 6 ++++++ .../integration-elements/mqtt/mqtt-messages.ts | 6 ++++++ .../dialog-device-registry-detail.ts | 2 ++ .../energy/components/ha-energy-validation-result.ts | 2 ++ .../config/energy/dialogs/dialog-energy-gas-settings.ts | 2 ++ .../energy/dialogs/dialog-energy-grid-flow-settings.ts | 2 ++ .../energy/dialogs/dialog-energy-solar-settings.ts | 8 +++++++- .../energy/dialogs/dialog-energy-water-settings.ts | 2 ++ .../config/entities/entity-registry-settings-editor.ts | 4 ++++ src/panels/config/ha-config-section.ts | 4 ++++ .../integrations/ha-config-integrations-dashboard.ts | 2 +- .../config/integrations/ha-integration-action-card.ts | 4 ++++ src/panels/config/integrations/ha-integration-header.ts | 2 ++ .../config/integrations/ha-integration-list-item.ts | 6 ++++++ .../zha/dialog-zha-reconfigure-device.ts | 2 ++ .../integration-panels/zha/zha-add-devices-page.ts | 4 ++++ .../integration-panels/zha/zha-cluster-attributes.ts | 4 ++++ .../integration-panels/zha/zha-cluster-commands.ts | 8 ++++++++ .../integration-panels/zha/zha-config-dashboard.ts | 4 ++++ .../integration-panels/zha/zha-device-binding.ts | 2 ++ .../integration-panels/zha/zha-group-binding.ts | 4 ++++ .../zwave_js/dialog-zwave_js-add-node.ts | 4 ++++ .../zwave_js/dialog-zwave_js-node-statistics.ts | 4 ++++ .../zwave_js/dialog-zwave_js-rebuild-network-routes.ts | 2 ++ .../zwave_js/dialog-zwave_js-rebuild-node-routes.ts | 2 ++ .../zwave_js/dialog-zwave_js-reinterview-node.ts | 2 ++ .../zwave_js/dialog-zwave_js-remove-failed-node.ts | 2 ++ .../zwave_js/dialog-zwave_js-remove-node.ts | 2 ++ .../zwave_js/zwave_js-config-dashboard.ts | 4 ++++ .../integration-panels/zwave_js/zwave_js-node-config.ts | 4 ++++ src/panels/config/script/ha-script-field-row.ts | 2 ++ src/panels/config/voice-assistants/assist-pref.ts | 4 ++-- src/panels/config/voice-assistants/cloud-alexa-pref.ts | 3 ++- src/panels/config/voice-assistants/cloud-google-pref.ts | 3 ++- .../voice-assistants/debug/assist-pipeline-run-debug.ts | 1 + .../voice-assistants/debug/assist-render-pipeline-run.ts | 4 ++++ .../voice-assistants/expose/expose-assistant-icon.ts | 2 ++ .../developer-tools/state/developer-tools-state.ts | 2 ++ src/panels/logbook/ha-logbook-renderer.ts | 2 +- .../cards/energy/hui-energy-date-selection-card.ts | 2 ++ src/panels/lovelace/cards/hui-area-card.ts | 4 ++++ src/panels/lovelace/cards/hui-entity-card.ts | 2 ++ src/panels/lovelace/cards/hui-statistic-card.ts | 2 ++ src/panels/lovelace/cards/hui-todo-list-card.ts | 2 ++ src/panels/lovelace/components/hui-input-list-editor.ts | 2 ++ src/panels/lovelace/components/hui-marquee.ts | 2 ++ .../editor/conditions/ha-card-condition-editor.ts | 2 ++ .../editor/config-elements/config-elements-style.ts | 4 ++++ .../config-elements/hui-conditional-card-editor.ts | 2 ++ .../editor/config-elements/hui-stack-card-editor.ts | 2 ++ .../header-footer-editor/hui-header-footer-editor.ts | 2 ++ .../editor/unused-entities/hui-unused-entities.ts | 2 ++ .../lovelace/editor/view-editor/hui-dialog-edit-view.ts | 2 ++ src/panels/lovelace/entity-rows/hui-button-entity-row.ts | 2 ++ src/panels/lovelace/entity-rows/hui-cover-entity-row.ts | 2 ++ .../lovelace/entity-rows/hui-input-button-entity-row.ts | 2 ++ src/panels/lovelace/entity-rows/hui-lock-entity-row.ts | 2 ++ src/panels/lovelace/entity-rows/hui-scene-entity-row.ts | 2 ++ src/panels/lovelace/entity-rows/hui-script-entity-row.ts | 2 ++ src/panels/lovelace/hui-root.ts | 2 ++ src/panels/lovelace/special-rows/hui-cast-row.ts | 2 ++ src/panels/media-browser/ha-bar-media-player.ts | 9 +++++++++ src/panels/profile/dialog-ha-mfa-module-setup-flow.ts | 2 ++ src/panels/profile/ha-mfa-modules-card.ts | 2 ++ src/state-summary/state-card-configurator.ts | 2 ++ src/state-summary/state-card-lock.ts | 2 ++ src/state-summary/state-card-scene.ts | 2 ++ 109 files changed, 283 insertions(+), 8 deletions(-) diff --git a/cast/src/launcher/layout/hc-cast.ts b/cast/src/launcher/layout/hc-cast.ts index b95be048fc..27de4e0198 100644 --- 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; } diff --git a/cast/src/receiver/layout/hc-launch-screen.ts b/cast/src/receiver/layout/hc-launch-screen.ts index b2fd4503ae..2b212860e8 100644 --- 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; } `; } diff --git a/hassio/src/components/supervisor-metric.ts b/hassio/src/components/supervisor-metric.ts index fa0d798bbf..7db487da69 100644 --- 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; } `; diff --git a/hassio/src/dialogs/registries/dialog-hassio-registries.ts b/hassio/src/dialogs/registries/dialog-hassio-registries.ts index e26753e5dc..0f670d2bc9 100644 --- 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; } `, ]; diff --git a/hassio/src/resources/hassio-style.ts b/hassio/src/resources/hassio-style.ts index 495d5d3e2e..8bfd9f30c6 100644 --- 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; diff --git a/hassio/src/system/hassio-system.ts b/hassio/src/system/hassio-system.ts index 88fdd3e2a3..1f64271017 100644 --- 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 { diff --git a/src/auth/ha-authorize.ts b/src/auth/ha-authorize.ts index 74b1e649d1..1e950af536 100644 --- 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; diff --git a/src/components/chart/state-history-charts.ts b/src/components/chart/state-history-charts.ts index 7ecbfdd26a..770fe76dc8 100644 --- 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) { diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts index 8db3e132e1..54490e047b 100644 --- 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; } `; } diff --git a/src/components/ha-file-upload.ts b/src/components/ha-file-upload.ts index f4077934ce..8b03bb8417 100644 --- 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; diff --git a/src/components/ha-icon-picker.ts b/src/components/ha-icon-picker.ts index d651675f04..871adf5380 100644 --- 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; } `; } diff --git a/src/components/ha-input-helper-text.ts b/src/components/ha-input-helper-text.ts index a6c34ccdc2..f40bb53320 100644 --- 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; } `; } diff --git a/src/components/ha-lawn_mower-action-button.ts b/src/components/ha-lawn_mower-action-button.ts index cdf3d35a5c..a142067348 100644 --- 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; diff --git a/src/components/ha-list-item.ts b/src/components/ha-list-item.ts index dcd13f0f70..8afbe56bcc 100644 --- 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])) { diff --git a/src/components/ha-metric.ts b/src/components/ha-metric.ts index 77bf266941..4a33812929 100644 --- 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; } `; diff --git a/src/components/ha-navigation-picker.ts b/src/components/ha-navigation-picker.ts index 13e8c58321..105d052d06 100644 --- 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; } `; } diff --git a/src/components/ha-qr-scanner.ts b/src/components/ha-qr-scanner.ts index b26aae20d6..9d437164cc 100644 --- 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; } `; } diff --git a/src/components/ha-selector/ha-selector-datetime.ts b/src/components/ha-selector/ha-selector-datetime.ts index 0ad02213f9..1c5e2bf8db 100644 --- 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; } `; } diff --git a/src/components/ha-selector/ha-selector-media.ts b/src/components/ha-selector/ha-selector-media.ts index e9149a6b1c..86fa91335d 100644 --- 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 { diff --git a/src/components/ha-selector/ha-selector-selector.ts b/src/components/ha-selector/ha-selector-selector.ts index 93061f9ea4..7f944d46ad 100644 --- 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; } `; diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts index 2d99a1766b..ba19958170 100644 --- 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%; diff --git a/src/components/ha-target-picker.ts b/src/components/ha-target-picker.ts index 1604c42ce1..d0ed84559e 100644 --- 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; diff --git a/src/components/ha-textfield.ts b/src/components/ha-textfield.ts index 12a6f0f6db..170c0c179d 100644 --- 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) diff --git a/src/components/ha-vacuum-state.ts b/src/components/ha-vacuum-state.ts index 0e033e8cde..52c93b4a17 100644 --- 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; diff --git a/src/components/trace/ha-timeline.ts b/src/components/trace/ha-timeline.ts index bf5685bb9e..8c4fae44a1 100644 --- 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 { diff --git a/src/components/trace/trace-tab-styles.ts b/src/components/trace/trace-tab-styles.ts index 4f7146df7a..5554545172 100644 --- 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 { diff --git a/src/dialogs/config-flow/step-flow-form.ts b/src/dialogs/config-flow/step-flow-form.ts index bdea2195ed..1390c3f02e 100644 --- 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, diff --git a/src/dialogs/more-info/controls/more-info-configurator.ts b/src/dialogs/more-info/controls/more-info-configurator.ts index dca2575fe0..28c392d4c6 100644 --- 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; } `; } diff --git a/src/dialogs/notifications/notification-drawer.ts b/src/dialogs/notifications/notification-drawer.ts index 9ea46efedd..a1a15f8130 100644 --- 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; diff --git a/src/dialogs/restart/dialog-restart.ts b/src/dialogs/restart/dialog-restart.ts index a3fe4e992d..97f16e8087 100644 --- 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; diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts index ef38fb1b12..15d8b26629 100644 --- 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 { diff --git a/src/onboarding/dialogs/app-dialog.ts b/src/onboarding/dialogs/app-dialog.ts index 087adfc3a7..3f66189792 100644 --- 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%; diff --git a/src/onboarding/ha-onboarding.ts b/src/onboarding/ha-onboarding.ts index e1e9f6578e..7237e4083d 100644 --- 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; } `; } diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts index 51ebdffb32..8b203a790d 100644 --- 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 { diff --git a/src/panels/config/application_credentials/ha-config-application-credentials.ts b/src/panels/config/application_credentials/ha-config-application-credentials.ts index 9a16b46274..c606e4f158 100644 --- 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; diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts index 49c99daecb..f1eada50d2 100644 --- 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 { diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts index 72734de566..eb4cfa2781 100644 --- 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 { diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index c465828413..9d891cc147 100644 --- 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; diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts index aea9540dc0..96bbeeb136 100644 --- 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 { diff --git a/src/panels/config/cloud/account/cloud-remote-pref.ts b/src/panels/config/cloud/account/cloud-remote-pref.ts index 54b093e949..e5d0771b39 100644 --- 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); } diff --git a/src/panels/config/cloud/account/cloud-webhooks.ts b/src/panels/config/cloud/account/cloud-webhooks.ts index fcc7372f48..35b340bda6 100644 --- 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; diff --git 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 index 3600514238..2a629114aa 100644 --- 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; diff --git 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 index ef9b3b74d2..c30d951ad6 100644 --- 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); } `; diff --git 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 index 10297c5a46..fed296c860 100644 --- 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); } `; diff --git 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 index 13b5c0ab98..74218b47a4 100644 --- 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; diff --git a/src/panels/config/energy/components/ha-energy-validation-result.ts b/src/panels/config/energy/components/ha-energy-validation-result.ts index 2a0817345a..982b50f9bf 100644 --- 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 { diff --git a/src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts index 6ddfbc62d2..ca550ec6d2 100644 --- 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; } `, diff --git a/src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts index acd8f35c59..647767d6a2 100644 --- 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; } `, diff --git a/src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts index 40e5263516..bb90c6cbfb 100644 --- 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; } `, ]; diff --git a/src/panels/config/energy/dialogs/dialog-energy-water-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-water-settings.ts index e6ae0fb403..895bd63ef4 100644 --- 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; } `, diff --git a/src/panels/config/entities/entity-registry-settings-editor.ts b/src/panels/config/entities/entity-registry-settings-editor.ts index f9c52f6517..41b70f4875 100644 --- 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, diff --git a/src/panels/config/ha-config-section.ts b/src/panels/config/ha-config-section.ts index cf6088be9f..5b337e8b30 100644 --- 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; } diff --git a/src/panels/config/integrations/ha-config-integrations-dashboard.ts b/src/panels/config/integrations/ha-config-integrations-dashboard.ts index 6ce1180061..8e0ed86b45 100644 --- 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); diff --git a/src/panels/config/integrations/ha-integration-action-card.ts b/src/panels/config/integrations/ha-integration-action-card.ts index ab715f0e84..189b5d4b46 100644 --- 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; } `, ]; diff --git a/src/panels/config/integrations/ha-integration-header.ts b/src/panels/config/integrations/ha-integration-header.ts index e93aa4fb8e..9d2d40466c 100644 --- 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 { diff --git a/src/panels/config/integrations/ha-integration-list-item.ts b/src/panels/config/integrations/ha-integration-list-item.ts index 50cc9fe95d..38842801ee 100644 --- 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; diff --git 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 index 68ba57d1a4..fcc3feb71e 100644 --- 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; } `, ]; diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts index c33ea1a61c..11d37b1988 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts @@ -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%; diff --git a/src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts b/src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts index cc052ac842..e3462fd69e 100644 --- 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; } diff --git a/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts b/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts index f699db7634..4872fde8e1 100644 --- 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); } `, diff --git a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts index 109219fc44..dbf0ae07a0 100644 --- 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 { diff --git a/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts b/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts index e21f6ec625..f39622c9f8 100644 --- 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; } diff --git a/src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts b/src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts index 641d43b240..95e6f07f1d 100644 --- 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; } diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts index 9910a65af4..7ef38d02b1 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts @@ -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; } `, ]; diff --git 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 index 39eac1a73d..3ef7290c4c 100644 --- 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"] { diff --git 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 index ef0eafe475..8b8b9c328e 100644 --- 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 { diff --git 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 index d86235eaae..f6589fd647 100644 --- 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; } `, ]; diff --git 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 index 8c1959ca50..a0b4f8dab4 100644 --- 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; } `, ]; diff --git 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 index 7d9d160226..e5246ce40e 100644 --- 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; } `, ]; diff --git 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 index 79c3256d5a..20c8854057 100644 --- 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; } `, ]; diff --git 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 index 6a7cf044c6..e7e8a21e0a 100644 --- 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; diff --git 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 index 95e9633b84..a8a3d6cbd8 100644 --- 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; } diff --git a/src/panels/config/script/ha-script-field-row.ts b/src/panels/config/script/ha-script-field-row.ts index 38a0c4e33c..b10b72746b 100644 --- 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 { diff --git a/src/panels/config/voice-assistants/assist-pref.ts b/src/panels/config/voice-assistants/assist-pref.ts index 6ed2899cc9..2d54c44d08 100644 --- 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); } diff --git a/src/panels/config/voice-assistants/cloud-alexa-pref.ts b/src/panels/config/voice-assistants/cloud-alexa-pref.ts index 3418293be1..44049b4426 100644 --- 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); } diff --git a/src/panels/config/voice-assistants/cloud-google-pref.ts b/src/panels/config/voice-assistants/cloud-google-pref.ts index 3ddfce8833..8e2b119907 100644 --- 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); } diff --git a/src/panels/config/voice-assistants/debug/assist-pipeline-run-debug.ts b/src/panels/config/voice-assistants/debug/assist-pipeline-run-debug.ts index 0450419477..a2190dbc63 100644 --- 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; diff --git a/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts b/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts index 15c64cc561..ea42a9c89f 100644 --- 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; } diff --git a/src/panels/config/voice-assistants/expose/expose-assistant-icon.ts b/src/panels/config/voice-assistants/expose/expose-assistant-icon.ts index bb45b1e6d0..46d2291aa6 100644 --- 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); diff --git a/src/panels/developer-tools/state/developer-tools-state.ts b/src/panels/developer-tools/state/developer-tools-state.ts index a2682f0863..d82d2bc2bb 100644 --- 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; diff --git a/src/panels/logbook/ha-logbook-renderer.ts b/src/panels/logbook/ha-logbook-renderer.ts index fe5f955637..32545466db 100644 --- 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); } `, diff --git a/src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts b/src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts index 3500d73a17..d6ab8eb492 100644 --- 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; } `; } diff --git a/src/panels/lovelace/cards/hui-area-card.ts b/src/panels/lovelace/cards/hui-area-card.ts index fd8f890722..6380371871 100644 --- 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%; } diff --git a/src/panels/lovelace/cards/hui-entity-card.ts b/src/panels/lovelace/cards/hui-entity-card.ts index 024bb033ce..fd1b63e13e 100644 --- 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 { diff --git a/src/panels/lovelace/cards/hui-statistic-card.ts b/src/panels/lovelace/cards/hui-statistic-card.ts index 7128cf921f..e5beb4a209 100644 --- 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 { diff --git a/src/panels/lovelace/cards/hui-todo-list-card.ts b/src/panels/lovelace/cards/hui-todo-list-card.ts index 56b9cbadab..5094ea3d73 100644 --- 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; } diff --git a/src/panels/lovelace/components/hui-input-list-editor.ts b/src/panels/lovelace/components/hui-input-list-editor.ts index 0a189e5e38..6616753fc8 100644 --- 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 { diff --git a/src/panels/lovelace/components/hui-marquee.ts b/src/panels/lovelace/components/hui-marquee.ts index 9756d6d823..3632c5dbc2 100644 --- 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 { diff --git a/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts b/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts index cafc1d31d8..f4f0e0e718 100644 --- 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 { diff --git a/src/panels/lovelace/editor/config-elements/config-elements-style.ts b/src/panels/lovelace/editor/config-elements/config-elements-style.ts index 2f068a1f91..a3bf655e52 100644 --- 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; diff --git a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts index f875c3ed7e..633c251519 100644 --- 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; } `, ]; diff --git a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts index 2b190b9354..0655f6dddb 100644 --- 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; } `, ]; diff --git 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 index 1036e0437e..d73d3d28d1 100644 --- 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; } `; } diff --git a/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts b/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts index 7745be4b80..0f56db97c8 100644 --- 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; diff --git a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts index d2899a7de6..a16f8237f4 100644 --- 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; diff --git a/src/panels/lovelace/entity-rows/hui-button-entity-row.ts b/src/panels/lovelace/entity-rows/hui-button-entity-row.ts index 6e3d4ccd5d..1b9d5cf583 100644 --- 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; } `; } diff --git a/src/panels/lovelace/entity-rows/hui-cover-entity-row.ts b/src/panels/lovelace/entity-rows/hui-cover-entity-row.ts index ffec18cb69..83b6a6fc2e 100644 --- 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; } `; } diff --git a/src/panels/lovelace/entity-rows/hui-input-button-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-button-entity-row.ts index 61cc1aa8b3..97b2a08dba 100644 --- 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; } `; } diff --git a/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts b/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts index c2ff7da903..6c757e22d7 100644 --- 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; } `; } diff --git a/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts b/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts index 0d493f2c43..3e539272a2 100644 --- 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; diff --git a/src/panels/lovelace/entity-rows/hui-script-entity-row.ts b/src/panels/lovelace/entity-rows/hui-script-entity-row.ts index 050209570a..6fa20512ea 100644 --- a/src/panels/lovelace/entity-rows/hui-script-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-script-entity-row.ts @@ -79,6 +79,8 @@ class HuiScriptEntityRow extends LitElement implements LovelaceRow { return css` mwc-button:last-child { margin-right: -0.57em; + margin-inline-end: -0.57em; + margin-inline-start: initial; } `; } diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 9d182239cb..73d6a272c9 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -1094,6 +1094,8 @@ class HUIRoot extends LitElement { box-sizing: border-box; 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); } hui-view { diff --git a/src/panels/lovelace/special-rows/hui-cast-row.ts b/src/panels/lovelace/special-rows/hui-cast-row.ts index d91e530453..1ca54f0857 100644 --- a/src/panels/lovelace/special-rows/hui-cast-row.ts +++ b/src/panels/lovelace/special-rows/hui-cast-row.ts @@ -155,6 +155,8 @@ class HuiCastRow extends LitElement implements LovelaceRow { } google-cast-launcher { margin-right: 0.57em; + margin-inline-end: -0.57em; + margin-inline-start: initial; cursor: pointer; display: inline-block; height: 24px; diff --git a/src/panels/media-browser/ha-bar-media-player.ts b/src/panels/media-browser/ha-bar-media-player.ts index f9cbb28689..7f2a61943a 100644 --- a/src/panels/media-browser/ha-bar-media-player.ts +++ b/src/panels/media-browser/ha-bar-media-player.ts @@ -582,6 +582,9 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) { align-items: center; width: 100%; margin-right: 16px; + margin-inline-end: 16px; + margin-inline-start: initial; + text-overflow: ellipsis; white-space: nowrap; overflow: hidden; @@ -633,6 +636,8 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) { white-space: nowrap; overflow: hidden; padding-left: 16px; + padding-inline-start: 16px; + padding-inline-end: initial; width: 100%; } @@ -669,6 +674,8 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) { :host([narrow]) .media-info { padding-left: 8px; + padding-inline-start: 8px; + padding-inline-end: initial; } :host([narrow]) .controls { @@ -680,6 +687,8 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) { :host([narrow]) .choose-player { padding-left: 0; padding-right: 8px; + padding-inline-start: 0; + padding-inline-end: 8px; min-width: 48px; flex: unset; justify-content: center; diff --git a/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts b/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts index c836b21876..5ee69e91b0 100644 --- a/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts +++ b/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts @@ -172,6 +172,8 @@ class HaMfaModuleSetupFlow extends LitElement { } .submit-spinner { margin-right: 16px; + margin-inline-end: 16px; + margin-inline-start: initial; } `, ]; diff --git a/src/panels/profile/ha-mfa-modules-card.ts b/src/panels/profile/ha-mfa-modules-card.ts index 76eaabf877..fcf980d29a 100644 --- a/src/panels/profile/ha-mfa-modules-card.ts +++ b/src/panels/profile/ha-mfa-modules-card.ts @@ -42,6 +42,8 @@ class HaMfaModulesCard extends LitElement { return css` mwc-button { margin-right: -0.57em; + margin-inline-end: -0.57em; + margin-inline-start: initial; } ha-list-item { --mdc-list-item-meta-size: auto; diff --git a/src/state-summary/state-card-configurator.ts b/src/state-summary/state-card-configurator.ts index adc4ad23af..9f114b72a2 100644 --- a/src/state-summary/state-card-configurator.ts +++ b/src/state-summary/state-card-configurator.ts @@ -46,6 +46,8 @@ class StateCardConfigurator extends LitElement { top: 3px; height: 37px; margin-right: -0.57em; + margin-inline-end: -0.57em; + margin-inline-start: initial; } `, ]; diff --git a/src/state-summary/state-card-lock.ts b/src/state-summary/state-card-lock.ts index bb19c6c64c..c35c4e3007 100644 --- a/src/state-summary/state-card-lock.ts +++ b/src/state-summary/state-card-lock.ts @@ -70,6 +70,8 @@ class StateCardLock extends LitElement { top: 3px; height: 37px; margin-right: -0.57em; + margin-inline-end: -0.57em; + margin-inline-start: initial; } `, ]; diff --git a/src/state-summary/state-card-scene.ts b/src/state-summary/state-card-scene.ts index 40e5f4522d..585876567a 100644 --- a/src/state-summary/state-card-scene.ts +++ b/src/state-summary/state-card-scene.ts @@ -43,6 +43,8 @@ class StateCardScene extends LitElement { top: 3px; height: 37px; margin-right: -0.57em; + margin-inline-end: -0.57em; + margin-inline-start: initial; } `, ];