From fc654d86c6fa51e130d062f0f356a55853bc98d1 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 14 Feb 2022 22:33:12 +0100
Subject: [PATCH] hassio fixes (#11688)

---
 hassio/src/addon-store/hassio-addon-store.ts  | 13 ++++-----
 .../addon-view/config/hassio-addon-audio.ts   | 27 +++++++++++--------
 .../hardware/dialog-hassio-hardware.ts        |  2 +-
 hassio/src/system/hassio-supervisor-log.ts    |  4 +--
 .../update-available/update-available-card.ts |  1 -
 5 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts
index b83d282787..2e071dc145 100644
--- a/hassio/src/addon-store/hassio-addon-store.ts
+++ b/hassio/src/addon-store/hassio-addon-store.ts
@@ -221,13 +221,14 @@ class HassioAddonStore extends LitElement {
         margin-top: 24px;
       }
       .search {
-        padding: 0 16px;
-        background: var(--sidebar-background-color);
-        border-bottom: 1px solid var(--divider-color);
+        position: sticky;
+        top: 0;
+        z-index: 2;
       }
-      .search search-input {
-        position: relative;
-        top: 2px;
+      search-input {
+        display: block;
+        --mdc-text-field-fill-color: var(--sidebar-background-color);
+        --mdc-text-field-idle-line-color: var(--divider-color);
       }
       .advanced {
         padding: 12px;
diff --git a/hassio/src/addon-view/config/hassio-addon-audio.ts b/hassio/src/addon-view/config/hassio-addon-audio.ts
index c9629589ae..ff8480609b 100644
--- a/hassio/src/addon-view/config/hassio-addon-audio.ts
+++ b/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>`
             : ""}
-
-          <mwc-select
+          ${this._inputDevices &&
+          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 {
-    super.update(changedProperties);
+  protected willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
     if (changedProperties.has("addon")) {
       this._addonChanged();
     }
diff --git a/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts b/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts
index ca94af7c8d..5575658d5e 100755
--- a/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts
+++ b/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 {
diff --git a/hassio/src/system/hassio-supervisor-log.ts b/hassio/src/system/hassio-supervisor-log.ts
index 6000b5b9aa..65cb0f8a66 100644
--- a/hassio/src/system/hassio-supervisor-log.ts
+++ b/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: 96%;
+          width: 100%;
+          margin-bottom: 4px;
         }
       `,
     ];
diff --git a/hassio/src/update-available/update-available-card.ts b/hassio/src/update-available/update-available-card.ts
index fce6b76927..a5a2bc81a2 100644
--- a/hassio/src/update-available/update-available-card.ts
+++ b/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";