Used AI to generate more inspirational quotes.

config/www/community/search-card/search-card.js

@@ -55,17 +55,26 @@ class SearchCard extends ct.LitElement {
       return ct.LitHtml `
       <ha-card>
         <div id="searchContainer">
-          <paper-input id="searchText"
-                       @value-changed="${this._valueChanged}"
-                       no-label-float type="text" autocomplete="off"
-                       label="${this.search_text}">
-            <ha-icon icon="mdi:magnify" id="searchIcon"
-                       slot="prefix"></ha-icon>
-            <ha-icon-button slot="suffix"
-                               @click="${this._clearInput}"
-                               alt="Clear"
-                               title="Clear"><ha-icon icon="mdi:close"></ha-icon></ha-icon-button>
-          </paper-input>
+          <div id="searchTextFieldContainer">
+            <ha-textfield
+              id="searchText"
+              @input="${this._valueChanged}"
+              no-label-float type="text" autocomplete="off"
+              icon iconTrailing
+              label="${this.search_text}"
+            >
+              <ha-icon icon="mdi:magnify" id="searchIcon" slot="leadingIcon"></ha-icon>
+              <ha-icon-button
+                slot="trailingIcon"
+                @click="${this._clearInput}"
+                alt="Clear"
+                title="Clear"
+              >
+                <ha-icon icon="mdi:close"></ha-icon>
+              </ha-icon-button>
+            </ha-textfield>
+          </div>
+
           ${results.length > 0 ?
               ct.LitHtml `<div id="count">Showing ${results.length} of ${this.results.length} results</div>`
             : ''}
@@ -106,12 +115,15 @@ class SearchCard extends ct.LitElement {
   _clearInput()
   {
     this.shadowRoot.getElementById('searchText').value = '';
-    super.update()
+    this._updateSearchResults('');
   }
 
   _valueChanged(ev) {
     var searchText = ev.target.value;
+    this._updateSearchResults(searchText);
+  }
 
+  _updateSearchResults(searchText) {
     this.results = [];
     this.active_actions = [];
 
@@ -175,6 +187,14 @@ class SearchCard extends ct.LitElement {
         margin-left: auto;
         margin-right: auto;
       }
+      #searchTextFieldContainer {
+        display: flex;
+        padding-top: 5px;
+        padding-bottom: 5px;
+      }
+      #searchText {
+        flex-grow: 1;
+      }
       #count {
         text-align: right;
         font-style: italic;
@@ -187,9 +207,6 @@ class SearchCard extends ct.LitElement {
         margin-left: auto;
         margin-right: auto;
       }
-      #searchIcon {
-        padding: 10px;
-      }
     `;
   }
 }
@@ -211,4 +228,4 @@ window.customCards.push({
   name: "Search Card",
   preview: true,
   description: "Card to search entities"
-});
+});