Fix tree view heading overlapping Show more button (#28872) (#28968)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.nvmrc

@@ -1 +1 @@
-24.12.0
+24.13.0

package.json

@@ -236,6 +236,6 @@
   },
   "packageManager": "yarn@4.12.0",
   "volta": {
-    "node": "24.12.0"
+    "node": "24.13.0"
   }
 }

src/components/device/ha-device-automation-picker.ts

@@ -1,9 +1,8 @@
 import { consume } from "@lit/context";
 import { css, html, LitElement, nothing } from "lit";
 import { property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
-import { caseInsensitiveStringCompare } from "../../common/string/compare";
+import { stopPropagation } from "../../common/dom/stop_propagation";
 import { fullEntitiesContext } from "../../data/context";
 import type { DeviceAutomation } from "../../data/device/device_automation";
 import {
@@ -12,12 +11,11 @@ import {
 } from "../../data/device/device_automation";
 import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../types";
-import "../ha-generic-picker";
 import "../ha-md-select";
 import "../ha-md-select-option";
-import type { PickerValueRenderer } from "../ha-picker-field";
 
 const NO_AUTOMATION_KEY = "NO_AUTOMATION";
+const UNKNOWN_AUTOMATION_KEY = "UNKNOWN_AUTOMATION";
 
 export abstract class HaDeviceAutomationPicker<
   T extends DeviceAutomation,
@@ -30,7 +28,7 @@ export abstract class HaDeviceAutomationPicker<
 
   @property({ type: Object }) public value?: T;
 
-  @state() private _automations?: T[];
+  @state() private _automations: T[] = [];
 
   // Trigger an empty render so we start with a clean DOM.
   // paper-listbox does not like changing things around.
@@ -46,6 +44,12 @@ export abstract class HaDeviceAutomationPicker<
     );
   }
 
+  protected get UNKNOWN_AUTOMATION_TEXT() {
+    return this.hass.localize(
+      "ui.panel.config.devices.automation.actions.unknown_action"
+    );
+  }
+
   private _localizeDeviceAutomation: (
     hass: HomeAssistant,
     entityRegistry: EntityRegistryEntry[],
@@ -71,7 +75,7 @@ export abstract class HaDeviceAutomationPicker<
   }
 
   private get _value() {
-    if (!this.value || !this._automations) {
+    if (!this.value) {
       return "";
     }
 
@@ -84,7 +88,7 @@ export abstract class HaDeviceAutomationPicker<
     );
 
     if (idx === -1) {
-      return this.value.alias || this.value.type || "unknown";
+      return UNKNOWN_AUTOMATION_KEY;
     }
 
     return `${this._automations[idx].device_id}_${idx}`;
@@ -95,21 +99,37 @@ export abstract class HaDeviceAutomationPicker<
       return nothing;
     }
     const value = this._value;
-
-    return html`<ha-generic-picker
-      .hass=${this.hass}
-      .label=${this.label}
-      .value=${value}
-      .disabled=${!this._automations || this._automations.length === 0}
-      .getItems=${this._getItems(value, this._automations)}
-      @value-changed=${this._automationChanged}
-      .valueRenderer=${this._valueRenderer}
-      .unknownItemText=${this.hass.localize(
-        "ui.panel.config.devices.automation.actions.unknown_action"
-      )}
-      hide-clear-icon
-    >
-    </ha-generic-picker>`;
+    return html`
+      <ha-md-select
+        .label=${this.label}
+        .value=${value}
+        @change=${this._automationChanged}
+        @closed=${stopPropagation}
+        .disabled=${this._automations.length === 0}
+      >
+        ${value === NO_AUTOMATION_KEY
+          ? html`<ha-md-select-option .value=${NO_AUTOMATION_KEY}>
+              ${this.NO_AUTOMATION_TEXT}
+            </ha-md-select-option>`
+          : nothing}
+        ${value === UNKNOWN_AUTOMATION_KEY
+          ? html`<ha-md-select-option .value=${UNKNOWN_AUTOMATION_KEY}>
+              ${this.UNKNOWN_AUTOMATION_TEXT}
+            </ha-md-select-option>`
+          : nothing}
+        ${this._automations.map(
+          (automation, idx) => html`
+            <ha-md-select-option .value=${`${automation.device_id}_${idx}`}>
+              ${this._localizeDeviceAutomation(
+                this.hass,
+                this._entityReg,
+                automation
+              )}
+            </ha-md-select-option>
+          `
+        )}
+      </ha-md-select>
+    `;
   }
 
   protected updated(changedProps) {
@@ -120,57 +140,6 @@ export abstract class HaDeviceAutomationPicker<
     }
   }
 
-  private _getItems = memoizeOne(
-    (value: string, automations: T[] | undefined) => {
-      if (!automations) {
-        return () => undefined;
-      }
-
-      const automationListItems = automations.map((automation, idx) => {
-        const primary = this._localizeDeviceAutomation(
-          this.hass,
-          this._entityReg,
-          automation
-        );
-        return {
-          id: `${automation.device_id}_${idx}`,
-          primary,
-        };
-      });
-
-      automationListItems.sort((a, b) =>
-        caseInsensitiveStringCompare(
-          a.primary,
-          b.primary,
-          this.hass.locale.language
-        )
-      );
-
-      if (value === NO_AUTOMATION_KEY) {
-        automationListItems.unshift({
-          id: NO_AUTOMATION_KEY,
-          primary: this.NO_AUTOMATION_TEXT,
-        });
-      }
-
-      return () => automationListItems;
-    }
-  );
-
-  private _valueRenderer: PickerValueRenderer = (value: string) => {
-    const automation = this._automations?.find(
-      (a, idx) => value === `${a.device_id}_${idx}`
-    );
-
-    const text = automation
-      ? this._localizeDeviceAutomation(this.hass, this._entityReg, automation)
-      : value === NO_AUTOMATION_KEY
-        ? this.NO_AUTOMATION_TEXT
-        : value;
-
-    return html`<span slot="headline">${text}</span>`;
-  };
-
   private async _updateDeviceInfo() {
     this._automations = this.deviceId
       ? (await this._fetchDeviceAutomations(this.hass, this.deviceId)).sort(
@@ -192,14 +161,13 @@ export abstract class HaDeviceAutomationPicker<
     this._renderEmpty = false;
   }
 
-  private _automationChanged(ev: CustomEvent<{ value: string }>) {
-    ev.stopPropagation();
-    const value = ev.detail.value;
-    if (!value || NO_AUTOMATION_KEY === value) {
+  private _automationChanged(ev) {
+    const value = ev.target.value;
+    if (!value || [UNKNOWN_AUTOMATION_KEY, NO_AUTOMATION_KEY].includes(value)) {
       return;
     }
     const [deviceId, idx] = value.split("_");
-    const automation = this._automations![idx];
+    const automation = this._automations[idx];
     if (automation.device_id !== deviceId) {
       return;
     }

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

@@ -58,7 +58,6 @@ import { fullEntitiesContext } from "../../../../data/context";
 import type { EntityRegistryEntry } from "../../../../data/entity/entity_registry";
 import type {
   Action,
-  DeviceAction,
   NonConditionAction,
   RepeatAction,
   ServiceAction,
@@ -234,13 +233,6 @@ export default class HaAutomationActionRow extends LitElement {
   private _renderRow() {
     const type = getAutomationActionType(this.action);
 
-    const target =
-      type === "service" && "target" in this.action
-        ? (this.action as ServiceAction).target
-        : type === "device_id" && (this.action as DeviceAction).device_id
-          ? { device_id: (this.action as DeviceAction).device_id }
-          : undefined;
-
     return html`
       ${type === "service" && "action" in this.action && this.action.action
         ? html`
@@ -262,7 +254,9 @@ export default class HaAutomationActionRow extends LitElement {
         ${capitalizeFirstLetter(
           describeAction(this.hass, this._entityReg, this.action)
         )}
-        ${target ? this._renderTargets(target) : nothing}
+        ${type === "service" && "target" in this.action
+          ? this._renderTargets((this.action as ServiceAction).target)
+          : nothing}
       </h3>
 
       <slot name="icons" slot="icons"></slot>

src/panels/config/automation/add-automation-element/ha-automation-add-from-target.ts

@@ -1504,14 +1504,7 @@ export default class HaAutomationAddFromTarget extends LitElement {
       box-shadow: inset var(--ha-shadow-offset-x-lg)
         calc(var(--ha-shadow-offset-y-lg) * -1) var(--ha-shadow-blur-lg)
         var(--ha-shadow-spread-lg) var(--ha-color-shadow-light);
-    }
-
-    @media (prefers-color-scheme: dark) {
-      .targets-show-more {
-        box-shadow: inset var(--ha-shadow-offset-x-lg)
-          calc(var(--ha-shadow-offset-y-lg) * -1) var(--ha-shadow-blur-lg)
-          var(--ha-shadow-spread-lg) var(--ha-color-shadow-dark);
-      }
+      z-index: 2;
     }
 
     @media all and (max-width: 870px), all and (max-height: 500px) {

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

@@ -76,7 +76,6 @@ import "./types/ha-automation-condition-template";
 import "./types/ha-automation-condition-time";
 import "./types/ha-automation-condition-trigger";
 import "./types/ha-automation-condition-zone";
-import type { DeviceCondition } from "../../../../data/device/device_automation";
 
 export interface ConditionElement extends LitElement {
   condition: Condition;
@@ -185,14 +184,6 @@ export default class HaAutomationConditionRow extends LitElement {
   }
 
   private _renderRow() {
-    const target =
-      "target" in (this.conditionDescriptions[this.condition.condition] || {})
-        ? (this.condition as PlatformCondition).target
-        : "device_id" in this.condition &&
-            (this.condition as DeviceCondition).device_id
-          ? { device_id: [(this.condition as any).device_id] }
-          : undefined;
-
     return html`
       <ha-condition-icon
         slot="leading-icon"
@@ -203,7 +194,10 @@ export default class HaAutomationConditionRow extends LitElement {
         ${capitalizeFirstLetter(
           describeCondition(this.condition, this.hass, this._entityReg)
         )}
-        ${target ? this._renderTargets(target) : nothing}
+        ${"target" in
+        (this.conditionDescriptions[this.condition.condition] || {})
+          ? this._renderTargets((this.condition as PlatformCondition).target)
+          : nothing}
       </h3>
 
       <slot name="icons" slot="icons"></slot>

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

@@ -56,7 +56,6 @@ import { isTrigger, subscribeTrigger } from "../../../../data/automation";
 import { describeTrigger } from "../../../../data/automation_i18n";
 import { validateConfig } from "../../../../data/config";
 import { fullEntitiesContext } from "../../../../data/context";
-import type { DeviceTrigger } from "../../../../data/device/device_automation";
 import type { EntityRegistryEntry } from "../../../../data/entity/entity_registry";
 import type { TriggerDescriptions } from "../../../../data/trigger";
 import { isTriggerList } from "../../../../data/trigger";
@@ -197,15 +196,6 @@ export default class HaAutomationTriggerRow extends LitElement {
 
     const yamlMode = this._yamlMode || !supported;
 
-    const target =
-      type === "platform" &&
-      "target" in
-        this.triggerDescriptions[(this.trigger as PlatformTrigger).trigger]
-        ? (this.trigger as PlatformTrigger).target
-        : type === "device" && (this.trigger as DeviceTrigger).device_id
-          ? { device_id: (this.trigger as DeviceTrigger).device_id }
-          : undefined;
-
     return html`
       ${type === "list"
         ? html`<ha-svg-icon
@@ -220,7 +210,11 @@ export default class HaAutomationTriggerRow extends LitElement {
           ></ha-trigger-icon>`}
       <h3 slot="header">
         ${describeTrigger(this.trigger, this.hass, this._entityReg)}
-        ${target ? this._renderTargets(target) : nothing}
+        ${type === "platform" &&
+        "target" in
+          this.triggerDescriptions[(this.trigger as PlatformTrigger).trigger]
+          ? this._renderTargets((this.trigger as PlatformTrigger).target)
+          : nothing}
       </h3>
 
       <slot name="icons" slot="icons"></slot>

src/panels/lovelace/cards/hui-card.ts

@@ -73,13 +73,18 @@ export class HuiCard extends ConditionalListenerMixin<LovelaceCardConfig>(
     };
 
     // If the element has fixed rows or columns, we use the values from the element
+    // unless the user has already configured their own
     if (elementOptions.fixed_rows) {
-      mergedConfig.rows = elementOptions.rows;
+      if (configOptions.rows === undefined) {
+        mergedConfig.rows = elementOptions.rows;
+      }
       delete mergedConfig.min_rows;
       delete mergedConfig.max_rows;
     }
     if (elementOptions.fixed_columns) {
-      mergedConfig.columns = elementOptions.columns;
+      if (configOptions.columns === undefined) {
+        mergedConfig.columns = elementOptions.columns;
+      }
       delete mergedConfig.min_columns;
       delete mergedConfig.max_columns;
     }