Bunch of fixes and cleanup

hassio/src/system/hassio-core-info.ts

@@ -205,16 +205,6 @@ class HassioCoreInfo extends LitElement {
           color: var(--secondary-text-color);
           --mdc-menu-min-width: 200px;
         }
-        @media (min-width: 563px) {
-          paper-listbox {
-            max-height: 150px;
-            overflow: auto;
-          }
-        }
-        paper-item {
-          cursor: pointer;
-          min-height: 35px;
-        }
         mwc-list-item ha-svg-icon {
           color: var(--secondary-text-color);
         }

hassio/src/system/hassio-host-info.ts

@@ -440,16 +440,6 @@ class HassioHostInfo extends LitElement {
           color: var(--secondary-text-color);
           --mdc-menu-min-width: 200px;
         }
-        @media (min-width: 563px) {
-          paper-listbox {
-            max-height: 150px;
-            overflow: auto;
-          }
-        }
-        paper-item {
-          cursor: pointer;
-          min-height: 35px;
-        }
         mwc-list-item ha-svg-icon {
           color: var(--secondary-text-color);
         }

src/components/entity/ha-entities-picker.ts

@@ -1,5 +1,5 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import { html, LitElement, TemplateResult } from "lit";
+import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
@@ -145,6 +145,12 @@ class HaEntitiesPickerLight extends LitElement {
 
     this._updateEntities([...currentEntities, toAdd]);
   }
+
+  static override styles = css`
+    ha-entity-picker {
+      margin-top: 8px;
+    }
+  `;
 }
 
 declare global {

src/components/entity/ha-statistics-picker.ts

@@ -111,7 +111,9 @@ class HaStatisticsPicker extends LitElement {
         display: block;
       }
       ha-statistic-picker {
+        display: block;
         width: 100%;
+        margin-top: 8px;
       }
     `;
   }

src/components/ha-check-list-item.ts

@@ -1,12 +1,14 @@
 import { css } from "lit";
 import { CheckListItemBase } from "@material/mwc-list/mwc-check-list-item-base";
-import { styles } from "@material/mwc-list/mwc-control-list-item.css";
+import { styles as controlStyles } from "@material/mwc-list/mwc-control-list-item.css";
+import { styles } from "@material/mwc-list/mwc-list-item.css";
 import { customElement } from "lit/decorators";
 
 @customElement("ha-check-list-item")
 export class HaCheckListItem extends CheckListItemBase {
   static override styles = [
     styles,
+    controlStyles,
     css`
       :host {
         --mdc-theme-secondary: var(--primary-color);

src/components/ha-selector/ha-selector.ts

@@ -31,7 +31,7 @@ export class HaSelector extends LitElement {
   @property({ type: Boolean }) public disabled = false;
 
   public focus() {
-    this.shadowRoot!.getElementById("selector")?.focus();
+    this.shadowRoot?.getElementById("selector")?.focus();
   }
 
   private get _type() {

src/components/ha-service-control.ts

@@ -67,7 +67,7 @@ export class HaServiceControl extends LitElement {
 
   @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
 
-  protected updated(changedProperties: PropertyValues<this>) {
+  protected willUpdate(changedProperties: PropertyValues<this>) {
     if (!changedProperties.has("value")) {
       return;
     }
@@ -482,9 +482,6 @@ export class HaServiceControl extends LitElement {
         display: block;
         margin: var(--service-control-padding, 0 16px);
       }
-      ha-service-picker {
-        padding-top: 16px;
-      }
       ha-yaml-editor {
         padding: 16px 0;
       }

src/components/ha-service-picker.ts

@@ -10,7 +10,7 @@ import "./ha-combo-box";
 
 const rowRenderer: ComboBoxLitRenderer<{ service: string; name: string }> = (
   item
-) => html` <mwc-list-item twoline>
+) => html`<mwc-list-item twoline>
   <span>${item.name}</span>
   <span slot="secondary"
     >${item.name === item.service ? "" : item.service}</span

src/components/media-player/ha-media-player-browse.ts

@@ -3,7 +3,6 @@ import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import { mdiPlay, mdiPlus } from "@mdi/js";
 import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
   css,

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -342,12 +342,14 @@ export default class HaAutomationActionRow extends LitElement {
       haStyle,
       css`
         .card-menu {
-          float: right;
+          position: absolute;
+          right: 16px;
           z-index: 3;
           --mdc-theme-text-primary-on-background: var(--primary-text-color);
         }
         .rtl .card-menu {
-          float: left;
+          right: initial;
+          left: 16px;
         }
         mwc-list-item[disabled] {
           --mdc-theme-text-primary-on-background: var(--disabled-text-color);
@@ -358,6 +360,9 @@ export default class HaAutomationActionRow extends LitElement {
         .warning ul {
           margin: 4px 0;
         }
+        mwc-select {
+          margin-bottom: 16px;
+        }
       `,
     ];
   }

src/panels/config/automation/action/types/ha-automation-action-choose.ts

@@ -1,6 +1,5 @@
 import { mdiDelete } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";

src/panels/config/automation/action/types/ha-automation-action-device_id.ts

@@ -1,4 +1,4 @@
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
@@ -140,6 +140,13 @@ export class HaDeviceAction extends LitElement {
         `ui.panel.config.automation.editor.actions.type.device_id.extra_fields.${schema.name}`
       ) || schema.name;
   }
+
+  static styles = css`
+    ha-device-action-picker {
+      display: block;
+      margin-top: 8px;
+    }
+  `;
 }
 
 declare global {

src/panels/config/automation/condition/ha-automation-condition-editor.ts

@@ -1,7 +1,7 @@
-import { CSSResultGroup, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
 import "@material/mwc-select";
 import type { Select } from "@material/mwc-select";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -143,9 +143,14 @@ export default class HaAutomationConditionEditor extends LitElement {
     fireEvent(this, "value-changed", { value: ev.detail.value, yaml: true });
   }
 
-  static get styles(): CSSResultGroup {
-    return haStyle;
-  }
+  static styles = [
+    haStyle,
+    css`
+      mwc-select {
+        margin-bottom: 16px;
+      }
+    `,
+  ];
 }
 
 declare global {

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -332,6 +332,9 @@ export default class HaAutomationTriggerRow extends LitElement {
         mwc-list-item[disabled] {
           --mdc-theme-text-primary-on-background: var(--disabled-text-color);
         }
+        mwc-select {
+          margin-bottom: 16px;
+        }
       `,
     ];
   }

src/panels/config/integrations/integration-panels/zha/zha-device-card.ts

@@ -1,5 +1,4 @@
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-listbox/paper-listbox";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import memoizeOne from "memoize-one";

src/panels/config/integrations/integration-panels/zha/zha-device-pairing-status-card.ts

@@ -1,5 +1,4 @@
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";

src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts

@@ -1,7 +1,6 @@
 import { mdiPlus } from "@mdi/js";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-icon-item";
-import "@polymer/paper-listbox/paper-listbox";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoize from "memoize-one";

src/panels/config/scene/ha-scene-editor.ts

@@ -984,6 +984,12 @@ export class HaSceneEditor extends SubscribeMixin(
         ha-fab.saving {
           opacity: var(--light-disabled-opacity);
         }
+        ha-icon-picker,
+        ha-area-picker,
+        ha-entity-picker {
+          display: block;
+          margin-top: 8px;
+        }
       `,
     ];
   }

src/panels/config/users/dialog-user-detail.ts

@@ -93,6 +93,7 @@ class DialogUserDetail extends LitElement {
               `}
           <div class="form">
             <paper-input
+              dialogInitialFocus
               .value=${this._name}
               .disabled=${user.system_generated}
               @value-changed=${this._nameChanged}

src/panels/developer-tools/service/developer-tools-service.ts

@@ -92,28 +92,31 @@ class HaPanelDevService extends LitElement {
             "ui.panel.developer-tools.tabs.services.description"
           )}
         </p>
-
-        ${this._yamlMode
-          ? html`<ha-service-picker
-                .hass=${this.hass}
-                .value=${this._serviceData?.service}
-                @value-changed=${this._serviceChanged}
-              ></ha-service-picker>
-              <ha-yaml-editor
-                .hass=${this.hass}
-                .defaultValue=${this._serviceData}
-                @value-changed=${this._yamlChanged}
-              ></ha-yaml-editor>`
-          : html`<ha-card
-              ><div>
+        <ha-card>
+          ${this._yamlMode
+            ? html`<div class="card-content">
+                <ha-service-picker
+                  .hass=${this.hass}
+                  .value=${this._serviceData?.service}
+                  @value-changed=${this._serviceChanged}
+                ></ha-service-picker>
+                <ha-yaml-editor
+                  .hass=${this.hass}
+                  .defaultValue=${this._serviceData}
+                  @value-changed=${this._yamlChanged}
+                ></ha-yaml-editor>
+              </div>`
+            : html`
                 <ha-service-control
                   .hass=${this.hass}
                   .value=${this._serviceData}
                   .narrow=${this.narrow}
                   showAdvanced
                   @value-changed=${this._serviceDataChanged}
-                ></ha-service-control></div
-            ></ha-card>`}
+                  class="card-content"
+                ></ha-service-control>
+              `}
+        </ha-card>
       </div>
       <div class="button-row">
         <div class="buttons">