diff --git a/src/dialogs/config-flow/step-flow-pick-handler.ts b/src/dialogs/config-flow/step-flow-pick-handler.ts
index 68a54c92dd..3383b094d2 100644
--- a/src/dialogs/config-flow/step-flow-pick-handler.ts
+++ b/src/dialogs/config-flow/step-flow-pick-handler.ts
@@ -42,6 +42,8 @@ class StepFlowPickHandler extends LitElement {
private _width?: number;
+ private _height?: number;
+
private _getHandlers = memoizeOne(
(h: string[], filter?: string, _localize?: LocalizeFunc) => {
const handlers: HandlerObj[] = h.map((handler) => {
@@ -82,7 +84,10 @@ class StepFlowPickHandler extends LitElement {
@value-changed=${this._filterChanged}
>
${handlers.map(
@@ -139,13 +144,20 @@ class StepFlowPickHandler extends LitElement {
protected updated(changedProps) {
super.updated(changedProps);
- // Store the width so that when we search, box doesn't jump
+ // Store the width and height so that when we search, box doesn't jump
+ const div = this.shadowRoot!.querySelector("div")!;
if (!this._width) {
- const width = this.shadowRoot!.querySelector("div")!.clientWidth;
+ const width = div.clientWidth;
if (width) {
this._width = width;
}
}
+ if (!this._height) {
+ const height = div.clientHeight;
+ if (height) {
+ this._height = height;
+ }
+ }
}
private async _filterChanged(e) {
@@ -166,8 +178,8 @@ class StepFlowPickHandler extends LitElement {
configFlowContentStyles,
css`
img {
- max-width: 40px;
- max-height: 40px;
+ width: 40px;
+ height: 40px;
}
search-input {
display: block;
@@ -180,12 +192,12 @@ class StepFlowPickHandler extends LitElement {
overflow: auto;
max-height: 600px;
}
- @media all and (max-height: 1px) {
+ @media all and (max-height: 900px) {
div {
- max-height: calc(100vh - 205px);
+ max-height: calc(100vh - 134px);
}
div.advanced {
- max-height: calc(100vh - 300px);
+ max-height: calc(100vh - 250px);
}
}
paper-icon-item {