CSS fixes

Author: piitaya

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

@@ -519,7 +519,7 @@ export class HuiCardPicker extends LitElement {
         }
 
         ha-input-search {
-          padding: var(--ha-space-3) var(--ha-space-4) 0;
+          padding: var(--ha-space-3) var(--ha-space-3) 0;
           position: sticky;
           top: 0;
           z-index: 10;

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

@@ -178,6 +178,9 @@ export class HuiCreateDialogCard
         ha-dialog::part(body) {
           overflow: hidden;
         }
+        ha-dialog-footer {
+          border-top: 1px solid var(--divider-color);
+        }
 
         ha-tab-group-tab {
           flex: 1;

src/panels/lovelace/editor/card-editor/hui-suggestion-entity-tree.ts

@@ -1,4 +1,9 @@
-import { mdiChevronDown, mdiChevronRight, mdiTextureBox } from "@mdi/js";
+import {
+  mdiChevronDown,
+  mdiChevronRight,
+  mdiMagnify,
+  mdiTextureBox,
+} from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -199,7 +204,19 @@ export class HuiSuggestionEntityTree extends LitElement {
     );
     if (!results.length) {
       return html`
-        <div class="empty">${this.hass.localize("ui.common.no_results")}</div>
+        <div class="empty">
+          <ha-svg-icon .path=${mdiMagnify}></ha-svg-icon>
+          <h2>
+            ${this.hass.localize(
+              "ui.panel.lovelace.editor.cardpicker.no_search_results_title"
+            )}
+          </h2>
+          <p>
+            ${this.hass.localize(
+              "ui.panel.lovelace.editor.cardpicker.no_search_results_description"
+            )}
+          </p>
+        </div>
       `;
     }
     const rtl = computeRTL(
@@ -524,7 +541,8 @@ export class HuiSuggestionEntityTree extends LitElement {
           min-height: 0;
         }
         ha-input-search {
-          padding: var(--ha-space-3) var(--ha-space-3) var(--ha-space-2);
+          padding: var(--ha-space-3);
+          border-bottom: 1px solid var(--divider-color);
         }
         .tree {
           flex: 1;
@@ -591,9 +609,27 @@ export class HuiSuggestionEntityTree extends LitElement {
           --state-icon-color: var(--primary-color);
         }
         .empty {
-          padding: var(--ha-space-4);
-          color: var(--ha-color-text-secondary);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: var(--ha-space-2);
+          padding: var(--ha-space-8) var(--ha-space-4);
           text-align: center;
+        }
+        .empty ha-svg-icon {
+          --mdc-icon-size: 32px;
+          color: var(--ha-color-text-secondary);
+        }
+        .empty h2 {
+          margin: 0;
+          font-size: var(--ha-font-size-l);
+          font-weight: var(--ha-font-weight-medium);
+          color: var(--primary-text-color);
+        }
+        .empty p {
+          margin: 0;
+          color: var(--ha-color-text-secondary);
           font-size: var(--ha-font-size-s);
         }
       `,

src/translations/en.json

@@ -10355,6 +10355,8 @@
             "more_cards": "+{count} more",
             "content_empty_title": "Pick an entity to see suggestions",
             "content_empty_description": "Or browse all card types.",
+            "no_search_results_title": "No entity matches your search",
+            "no_search_results_description": "Try a different keyword.",
             "selected_entity": "Selected entity",
             "suggestions_title": "Suggestions",
             "not_found": "Can't find the card you want?",