diff --git a/src/panels/lovelace/views/hui-masonry-view.ts b/src/panels/lovelace/views/hui-masonry-view.ts index 4f8547c93e..fb3290fff7 100644 --- a/src/panels/lovelace/views/hui-masonry-view.ts +++ b/src/panels/lovelace/views/hui-masonry-view.ts @@ -98,10 +98,9 @@ export class MasonryView extends LitElement implements LovelaceViewElement { } protected firstUpdated(): void { - this._updateColumns = this._updateColumns.bind(this); this._mqls = [300, 600, 900, 1200].map((width) => { - const mql = matchMedia(`(min-width: ${width}px)`); - mql.addEventListener("change", this._updateColumns); + const mql = window.matchMedia(`(min-width: ${width}px)`); + mql.addListener(() => this._updateColumns()); return mql; }); this._updateColumns(); @@ -120,10 +119,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement { if (changedProperties.has("hass")) { const oldHass = changedProperties.get("hass") as HomeAssistant; - if ( - (oldHass && this.hass!.dockedSidebar !== oldHass.dockedSidebar) || - (!oldHass && this.hass) - ) { + if (oldHass && this.hass!.dockedSidebar !== oldHass.dockedSidebar) { this._updateColumns(); } @@ -155,6 +151,10 @@ export class MasonryView extends LitElement implements LovelaceViewElement { } private async _createColumns() { + if (!this._columns) { + return; + } + this._createColumnsIteration++; const iteration = this._createColumnsIteration; const root = this.shadowRoot!.getElementById("columns")!; @@ -168,7 +168,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement { const columnSizes: number[] = []; const columnElements: HTMLDivElement[] = []; // Add columns to DOM, limit number of columns to the number of cards - for (let i = 0; i < Math.min(this._columns!, this.cards.length); i++) { + for (let i = 0; i < Math.min(this._columns, this.cards.length); i++) { const columnEl = document.createElement("div"); columnEl.classList.add("column"); root.appendChild(columnEl); diff --git a/src/translations/en.json b/src/translations/en.json index 690c71de3e..e0d6f97e1a 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -2331,7 +2331,7 @@ "toggle": "Toggle entities.", "description": "The Entities card is the most common type of card. It groups items together into lists.", "special_row": "special row", - "edit_special_row": "Edit row using the code editor", + "edit_special_row": "View the details of this row by clicking the edit button", "entity_row_editor": "Entity Row Editor", "secondary_info_values": { "none": "No Secondary Info",