Fix height & scroll in hui-dialog-create-card (#25042)

* set min/max height & fix margin for "search" field

* remove restoring height & width

* added scrollTo(top)

* compare _filter with _prevFilter

* use changedProps

src/panels/lovelace/editor/card-editor/hui-card-picker.ts

@@ -4,7 +4,6 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { styleMap } from "lit/directives/style-map";
 import { until } from "lit/directives/until";
 import memoizeOne from "memoize-one";
 import { storage } from "../../../../common/decorators/storage";
@@ -59,10 +58,6 @@ export class HuiCardPicker extends LitElement {
 
   @state() private _filter = "";
 
-  @state() private _width?: number;
-
-  @state() private _height?: number;
-
   private _unusedEntities?: string[];
 
   private _usedEntities?: string[];
@@ -146,13 +141,7 @@ export class HuiCardPicker extends LitElement {
           "ui.panel.lovelace.editor.edit_card.search_cards"
         )}
       ></search-input>
-      <div
+      <div id="content">
-        id="content"
-        style=${styleMap({
-          width: this._width ? `${this._width}px` : "auto",
-          height: this._height ? `${this._height}px` : "auto",
-        })}
-      >
         ${this._filter
           ? html`<div class="cards-container">
               ${this._filterCards(this._cards, this._filter).map(
@@ -262,6 +251,16 @@ export class HuiCardPicker extends LitElement {
     this._loadCards();
   }
 
+  protected updated(changedProps) {
+    super.updated(changedProps);
+    if (changedProps.has("_filter")) {
+      const div = this.parentElement!.shadowRoot!.getElementById("content");
+      if (div) {
+        div.scrollTo({ behavior: "auto", top: 0 });
+      }
+    }
+  }
+
   private _loadCards() {
     let cards: Card[] = coreCards.map((card: Card) => ({
       name: this.hass!.localize(
@@ -352,30 +351,7 @@ export class HuiCardPicker extends LitElement {
   }
 
   private _handleSearchChange(ev: CustomEvent) {
-    const value = ev.detail.value;
+    this._filter = ev.detail.value;
-
-    if (!value) {
-      // Reset when we no longer filter
-      this._width = undefined;
-      this._height = undefined;
-    } else if (!this._width || !this._height) {
-      // Save height and width so the dialog doesn't jump while searching
-      const div = this.shadowRoot!.getElementById("content");
-      if (div && !this._width) {
-        const width = div.clientWidth;
-        if (width) {
-          this._width = width;
-        }
-      }
-      if (div && !this._height) {
-        const height = div.clientHeight;
-        if (height) {
-          this._height = height;
-        }
-      }
-    }
-
-    this._filter = value;
   }
 
   private _cardPicked(ev: Event): void {

src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts

@@ -194,6 +194,8 @@ export class HuiCreateDialogCard
         @media all and (min-width: 850px) {
           ha-dialog {
             --mdc-dialog-min-width: 845px;
+            --mdc-dialog-min-height: calc(100vh - 72px);
+            --mdc-dialog-max-height: calc(100vh - 72px);
           }
         }
 
@@ -216,7 +218,7 @@ export class HuiCreateDialogCard
 
         hui-card-picker {
           --card-picker-search-shape: 0;
-          --card-picker-search-margin: -2px -24px 0;
+          --card-picker-search-margin: 0 -24px 0;
         }
         hui-entity-picker-table {
           display: block;