Fix updating columns (#7171)

Co-authored-by: Zack Barett <arnett.zackary@gmail.com>

src/panels/lovelace/ha-panel-lovelace.ts

@@ -5,7 +5,6 @@ import {
   LitElement,
   property,
   internalProperty,
-  PropertyValues,
   TemplateResult,
 } from "lit-element";
 import { domainToName } from "../../data/integration";
@@ -46,8 +45,6 @@ class LovelacePanel extends LitElement {
 
   @property() public route?: Route;
 
-  @internalProperty() private _columns?: number;
-
   @property()
   private _state?: "loading" | "loaded" | "error" | "yaml-editor" = "loading";
 
@@ -55,8 +52,6 @@ class LovelacePanel extends LitElement {
 
   @internalProperty() private lovelace?: Lovelace;
 
-  private mqls?: MediaQueryList[];
-
   private _ignoreNextUpdateEvent = false;
 
   private _fetchConfigOnConnect = false;
@@ -105,7 +100,6 @@ class LovelacePanel extends LitElement {
           .hass=${this.hass}
           .lovelace=${this.lovelace}
           .route=${this.route}
-          .columns=${this._columns}
           .narrow=${this.narrow}
           @config-refresh=${this._forceFetchConfig}
         ></hui-root>
@@ -144,25 +138,6 @@ class LovelacePanel extends LitElement {
     `;
   }
 
-  protected updated(changedProps: PropertyValues): void {
-    super.updated(changedProps);
-
-    if (changedProps.has("narrow")) {
-      this._updateColumns();
-      return;
-    }
-
-    if (!changedProps.has("hass")) {
-      return;
-    }
-
-    const oldHass = changedProps.get("hass") as this["hass"];
-
-    if (oldHass && this.hass!.dockedSidebar !== oldHass.dockedSidebar) {
-      this._updateColumns();
-    }
-  }
-
   protected firstUpdated() {
     this._fetchConfig(false);
     if (!this._unsubUpdates) {
@@ -174,13 +149,6 @@ class LovelacePanel extends LitElement {
         this._fetchConfig(false);
       }
     });
-    this._updateColumns = this._updateColumns.bind(this);
-    this.mqls = [300, 600, 900, 1200].map((width) => {
-      const mql = matchMedia(`(min-width: ${width}px)`);
-      mql.addListener(this._updateColumns);
-      return mql;
-    });
-    this._updateColumns();
   }
 
   private async _regenerateConfig() {
@@ -201,19 +169,6 @@ class LovelacePanel extends LitElement {
     this._state = "loaded";
   }
 
-  private _updateColumns() {
-    const matchColumns = this.mqls!.reduce(
-      (cols, mql) => cols + Number(mql.matches),
-      0
-    );
-    // Do -1 column if the menu is docked and open
-    this._columns = Math.max(
-      1,
-      matchColumns -
-        Number(!this.narrow && this.hass!.dockedSidebar === "docked")
-    );
-  }
-
   private _lovelaceChanged() {
     if (this._ignoreNextUpdateEvent) {
       this._ignoreNextUpdateEvent = false;

src/panels/lovelace/views/hui-masonry-view.ts

@@ -98,11 +98,13 @@ 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);
       return mql;
     });
+    this._updateColumns();
   }
 
   protected updated(changedProperties: PropertyValues): void {
@@ -130,11 +132,14 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
       }
     }
 
-    const oldLovelace = changedProperties.get("lovelace") as Lovelace;
+    const oldLovelace = changedProperties.get("lovelace") as
+      | Lovelace
+      | undefined;
 
     if (
+      (changedProperties.has("lovelace") && (
         oldLovelace?.config !== this.lovelace?.config ||
-      oldLovelace?.editMode !== this.lovelace?.editMode ||
+        oldLovelace?.editMode !== this.lovelace?.editMode)) ||
       changedProperties.has("_columns")
     ) {
       this._createColumns();
@@ -237,6 +242,9 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
   }
 
   private _updateColumns() {
+    if (!this._mqls) {
+      return;
+    }
     const matchColumns = this._mqls!.reduce(
       (cols, mql) => cols + Number(mql.matches),
       0
@@ -260,6 +268,8 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
         display: flex;
         flex-direction: row;
         justify-content: center;
+        margin-left: 4px;
+        margin-right: 4px;
       }
 
       .column {
@@ -288,11 +298,6 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
       }
 
       @media (max-width: 500px) {
-        :host {
-          padding-left: 0;
-          padding-right: 0;
-        }
-
         .column > * {
           margin-left: 0;
           margin-right: 0;

src/panels/lovelace/views/hui-panel-view.ts

@@ -57,7 +57,13 @@ export class PanelView extends LitElement implements LovelaceViewElement {
       );
     }
 
-    const oldLovelace = changedProperties.get("lovelace") as Lovelace;
+    if (!changedProperties.has("lovelace")) {
+      return;
+    }
+
+    const oldLovelace = changedProperties.get("lovelace") as
+      | Lovelace
+      | undefined;
 
     if (
       oldLovelace?.config !== this.lovelace?.config ||