hassio fixes (#11688)

hassio/src/addon-store/hassio-addon-store.ts

@@ -221,13 +221,14 @@ class HassioAddonStore extends LitElement {
         margin-top: 24px;
       }
       .search {
-        padding: 0 16px;
+        position: sticky;
-        background: var(--sidebar-background-color);
+        top: 0;
-        border-bottom: 1px solid var(--divider-color);
+        z-index: 2;
       }
-      .search search-input {
+      search-input {
-        position: relative;
+        display: block;
-        top: 2px;
+        --mdc-text-field-fill-color: var(--sidebar-background-color);
+        --mdc-text-field-idle-line-color: var(--divider-color);
       }
       .advanced {
         padding: 12px;

hassio/src/addon-view/config/hassio-addon-audio.ts

@@ -56,8 +56,8 @@ class HassioAddonAudio extends LitElement {
           ${this._error
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : ""}
-
+          ${this._inputDevices &&
-          <mwc-select
+          html`<mwc-select
             .label=${this.supervisor.localize(
               "addon.configuration.audio.input"
             )}
@@ -67,16 +67,16 @@ class HassioAddonAudio extends LitElement {
             naturalMenuWidth
             .value=${this._selectedInput!}
           >
-            ${this._inputDevices &&
+            ${this._inputDevices.map(
-            this._inputDevices.map(
               (item) => html`
                 <mwc-list-item .value=${item.device || ""}>
                   ${item.name}
                 </mwc-list-item>
               `
             )}
-          </mwc-select>
+          </mwc-select>`}
-          <mwc-select
+          ${this._outputDevices &&
+          html`<mwc-select
             .label=${this.supervisor.localize(
               "addon.configuration.audio.output"
             )}
@@ -86,15 +86,14 @@ class HassioAddonAudio extends LitElement {
             naturalMenuWidth
             .value=${this._selectedOutput!}
           >
-            ${this._outputDevices &&
+            ${this._outputDevices.map(
-            this._outputDevices.map(
               (item) => html`
                 <mwc-list-item .value=${item.device || ""}
                   >${item.name}</mwc-list-item
                 >
               `
             )}
-          </mwc-select>
+          </mwc-select>`}
         </div>
         <div class="card-actions">
           <ha-progress-button @click=${this._saveSettings}>
@@ -121,12 +120,18 @@ class HassioAddonAudio extends LitElement {
         .card-actions {
           text-align: right;
         }
+        mwc-select {
+          width: 100%;
+        }
+        mwc-select:last-child {
+          margin-top: 8px;
+        }
       `,
     ];
   }
 
-  protected update(changedProperties: PropertyValues): void {
+  protected willUpdate(changedProperties: PropertyValues): void {
-    super.update(changedProperties);
+    super.willUpdate(changedProperties);
     if (changedProperties.has("addon")) {
       this._addonChanged();
     }

hassio/src/dialogs/hardware/dialog-hassio-hardware.ts

@@ -178,7 +178,7 @@ class HassioHardwareDialog extends LitElement {
           padding: 0.2em 0.4em;
         }
         search-input {
-          margin: 0 16px;
+          margin: 8px 16px 0;
           display: block;
         }
         .device-property {

hassio/src/system/hassio-supervisor-log.ts

@@ -146,8 +146,8 @@ class HassioSupervisorLog extends LitElement {
           white-space: pre-wrap;
         }
         mwc-select {
-          padding: 0 2%;
+          width: 100%;
-          width: 96%;
+          margin-bottom: 4px;
         }
       `,
     ];

hassio/src/update-available/update-available-card.ts

@@ -10,7 +10,6 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../src/common/dom/fire_event";
-import "../../../src/common/search/search-input";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-alert";
 import "../../../src/components/ha-button-menu";