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`${this._error}`
: ""}
-
-
- ${this._inputDevices &&
- this._inputDevices.map(
+ ${this._inputDevices.map(
(item) => html`
${item.name}
`
)}
-
- `}
+ ${this._outputDevices &&
+ html`
- ${this._outputDevices &&
- this._outputDevices.map(
+ ${this._outputDevices.map(
(item) => html`
${item.name}
`
)}
-
+ `}
@@ -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";