diff --git a/src/panels/config/automation/action/ha-automation-action.ts b/src/panels/config/automation/action/ha-automation-action.ts index fde289bacc..2cf2984cbe 100644 --- a/src/panels/config/automation/action/ha-automation-action.ts +++ b/src/panels/config/automation/action/ha-automation-action.ts @@ -77,6 +77,7 @@ export default class HaAutomationAction extends LitElement { return html` ` )} +
+ + + + + +
-
- - - - - - -
`; } @@ -269,14 +269,11 @@ export default class HaAutomationAction extends LitElement { return css` .actions { padding: 16px; - margin: -16px -16px 0px -16px; + margin: -16px; display: flex; flex-direction: column; gap: 16px; } - .actions:not(:has(ha-automation-action-row)) { - margin: -16px; - } .sortable-ghost { background: none; border-radius: var(--ha-card-border-radius, 12px); @@ -304,6 +301,7 @@ export default class HaAutomationAction extends LitElement { display: flex; flex-wrap: wrap; gap: 8px; + order: 1; } `; } diff --git a/src/panels/config/automation/action/types/ha-automation-action-choose.ts b/src/panels/config/automation/action/types/ha-automation-action-choose.ts index d57379ab8e..947bbffb0b 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-choose.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-choose.ts @@ -122,6 +122,7 @@ export class HaChooseAction extends LitElement implements ActionElement { return html` ` )} +
+ + + +
- - - + ${this._showDefault || action.default ? html`

@@ -505,14 +509,11 @@ export class HaChooseAction extends LitElement implements ActionElement { css` .options { padding: 16px; - margin: -16px -16px 0px -16px; + margin: -16px; display: flex; flex-direction: column; gap: 16px; } - .options:not(:has(.option)) { - margin: -16px; - } .sortable-ghost { background: none; border-radius: var(--ha-card-border-radius, 12px); @@ -562,6 +563,12 @@ export class HaChooseAction extends LitElement implements ActionElement { pointer-events: none; height: 24px; } + .buttons { + display: flex; + flex-wrap: wrap; + gap: 8px; + order: 1; + } `, ]; } diff --git a/src/panels/config/automation/condition/ha-automation-condition.ts b/src/panels/config/automation/condition/ha-automation-condition.ts index a598750248..a615f9a1b4 100644 --- a/src/panels/config/automation/condition/ha-automation-condition.ts +++ b/src/panels/config/automation/condition/ha-automation-condition.ts @@ -117,6 +117,7 @@ export default class HaAutomationCondition extends LitElement { return html` ` )} +
+ + + + + + +
-
- - - - - - -
`; } @@ -294,14 +295,11 @@ export default class HaAutomationCondition extends LitElement { return css` .conditions { padding: 16px; - margin: -16px -16px 0px -16px; + margin: -16px; display: flex; flex-direction: column; gap: 16px; } - .conditions:not(:has(ha-automation-condition-row)) { - margin: -16px; - } .sortable-ghost { background: none; border-radius: var(--ha-card-border-radius, 12px); @@ -313,6 +311,9 @@ export default class HaAutomationCondition extends LitElement { display: block; scroll-margin-top: 48px; } + .buttons { + order: 1; + } ha-svg-icon { height: 20px; } diff --git a/src/panels/config/automation/trigger/ha-automation-trigger.ts b/src/panels/config/automation/trigger/ha-automation-trigger.ts index 69041acc92..4da764f879 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger.ts @@ -74,6 +74,7 @@ export default class HaAutomationTrigger extends LitElement { return html` ` )} +
+ + + +
- - - `; } @@ -243,14 +246,11 @@ export default class HaAutomationTrigger extends LitElement { return css` .triggers { padding: 16px; - margin: -16px -16px 0px -16px; + margin: -16px; display: flex; flex-direction: column; gap: 16px; } - .triggers:not(:has(ha-automation-trigger-row)) { - margin: -16px; - } .sortable-ghost { background: none; border-radius: var(--ha-card-border-radius, 12px); @@ -274,6 +274,12 @@ export default class HaAutomationTrigger extends LitElement { pointer-events: none; height: 24px; } + .buttons { + display: flex; + flex-wrap: wrap; + gap: 8px; + order: 1; + } `; } }