diff --git a/src/panels/config/automation/action/ha-automation-action.ts b/src/panels/config/automation/action/ha-automation-action.ts
index df140e94ea..c75237a2c0 100644
--- a/src/panels/config/automation/action/ha-automation-action.ts
+++ b/src/panels/config/automation/action/ha-automation-action.ts
@@ -119,26 +119,27 @@ export default class HaAutomationAction extends LitElement {
`
)}
-
-
-
-
-
-
+
+
+
+
+
+
+
+
`;
}
@@ -325,6 +326,11 @@ export default class HaAutomationAction extends LitElement {
pointer-events: none;
height: 24px;
}
+ .buttons {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ }
`,
];
}
diff --git a/src/panels/config/automation/add-automation-element-dialog.ts b/src/panels/config/automation/add-automation-element-dialog.ts
index b24bb71121..097a00ca27 100644
--- a/src/panels/config/automation/add-automation-element-dialog.ts
+++ b/src/panels/config/automation/add-automation-element-dialog.ts
@@ -5,6 +5,7 @@ import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { repeat } from "lit/directives/repeat";
import memoizeOne from "memoize-one";
+import { styleMap } from "lit/directives/style-map";
import { fireEvent } from "../../../common/dom/fire_event";
import { domainIcon } from "../../../common/entity/domain_icon";
import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
@@ -93,6 +94,10 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
@query("ha-dialog") private _dialog?: HaDialog;
+ private _width?: number;
+
+ private _height?: number;
+
public showDialog(params): void {
this._params = params;
this._group = params.group;
@@ -106,6 +111,8 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
if (this._params) {
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
+ this._height = undefined;
+ this._width = undefined;
this._params = undefined;
this._group = undefined;
this._prev = undefined;
@@ -349,6 +356,14 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
this._manifests = manifests;
}
+ protected _opened(): void {
+ // Store the width and height so that when we search, box doesn't jump
+ const boundingRect =
+ this.shadowRoot!.querySelector("mwc-list")?.getBoundingClientRect();
+ this._width = boundingRect?.width;
+ this._height = boundingRect?.height;
+ }
+
protected render() {
if (!this._params) {
return nothing;
@@ -383,7 +398,13 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
);
return html`
-
+
`}
${this._params.clipboardItem &&
!this._filter &&
diff --git a/src/panels/config/automation/condition/ha-automation-condition.ts b/src/panels/config/automation/condition/ha-automation-condition.ts
index 11744d7454..7f38b7bb2b 100644
--- a/src/panels/config/automation/condition/ha-automation-condition.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition.ts
@@ -175,25 +175,27 @@ export default class HaAutomationCondition extends LitElement {
`
)}
-
-
-
-
-
-
+
+
+
+
+
+
+
+
`;
}
@@ -363,6 +365,11 @@ export default class HaAutomationCondition extends LitElement {
pointer-events: none;
height: 24px;
}
+ .buttons {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ }
`,
];
}