From 9fbc94e8d82701c022e02f113664e77ed277d206 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 22 Oct 2020 23:29:26 +0200
Subject: [PATCH] Pass narrow to masonry view to calc columns (#7454)

---
 src/data/lovelace.ts                          | 1 +
 src/panels/lovelace/hui-root.ts               | 5 +++++
 src/panels/lovelace/views/hui-masonry-view.ts | 9 ++++++++-
 src/panels/lovelace/views/hui-view.ts         | 7 +++++++
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/data/lovelace.ts b/src/data/lovelace.ts
index 608dbb9fb7..090bb0dfc0 100644
--- a/src/data/lovelace.ts
+++ b/src/data/lovelace.ts
@@ -89,6 +89,7 @@ export interface LovelaceViewConfig {
 export interface LovelaceViewElement extends HTMLElement {
   hass?: HomeAssistant;
   lovelace?: Lovelace;
+  narrow?: boolean;
   index?: number;
   cards?: Array<LovelaceCard | HuiErrorCard>;
   badges?: LovelaceBadge[];
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index 740c5a7afb..ab652d6dcc 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -490,6 +490,10 @@ class HUIRoot extends LitElement {
       huiView.hass = this.hass;
     }
 
+    if (changedProperties.has("narrow") && huiView) {
+      huiView.narrow = this.narrow;
+    }
+
     let newSelectView;
     let force = false;
 
@@ -753,6 +757,7 @@ class HUIRoot extends LitElement {
 
     view.lovelace = this.lovelace;
     view.hass = this.hass;
+    view.narrow = this.narrow;
 
     const configBackground = viewConfig.background || this.config.background;
 
diff --git a/src/panels/lovelace/views/hui-masonry-view.ts b/src/panels/lovelace/views/hui-masonry-view.ts
index 00555cd6b1..23d9833c4c 100644
--- a/src/panels/lovelace/views/hui-masonry-view.ts
+++ b/src/panels/lovelace/views/hui-masonry-view.ts
@@ -49,6 +49,8 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
 
   @property({ attribute: false }) public lovelace?: Lovelace;
 
+  @property({ type: Boolean }) public narrow!: boolean;
+
   @property({ type: Number }) public index?: number;
 
   @property({ attribute: false }) public cards: Array<
@@ -128,6 +130,10 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
       }
     }
 
+    if (changedProperties.has("narrow")) {
+      this._updateColumns();
+    }
+
     const oldLovelace = changedProperties.get("lovelace") as
       | Lovelace
       | undefined;
@@ -252,7 +258,8 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
     // Do -1 column if the menu is docked and open
     this._columns = Math.max(
       1,
-      matchColumns - Number(this.hass!.dockedSidebar === "docked")
+      matchColumns -
+        Number(!this.narrow && this.hass!.dockedSidebar === "docked")
     );
   }
 
diff --git a/src/panels/lovelace/views/hui-view.ts b/src/panels/lovelace/views/hui-view.ts
index 60ee6c4760..1fd878e572 100644
--- a/src/panels/lovelace/views/hui-view.ts
+++ b/src/panels/lovelace/views/hui-view.ts
@@ -31,6 +31,8 @@ export class HUIView extends UpdatingElement {
 
   @property({ attribute: false }) public lovelace?: Lovelace;
 
+  @property({ type: Boolean }) public narrow!: boolean;
+
   @property({ type: Number }) public index?: number;
 
   @internalProperty() private _cards: Array<LovelaceCard | HuiErrorCard> = [];
@@ -111,6 +113,7 @@ export class HUIView extends UpdatingElement {
       this._createCards(viewConfig!);
 
       this._layoutElement!.hass = this.hass;
+      this._layoutElement!.narrow = this.narrow;
       this._layoutElement!.lovelace = lovelace;
       this._layoutElement!.index = this.index;
     }
@@ -127,6 +130,10 @@ export class HUIView extends UpdatingElement {
       this._layoutElement!.hass = this.hass;
     }
 
+    if (changedProperties.has("narrow")) {
+      this._layoutElement!.narrow = this.narrow;
+    }
+
     if (editModeChanged) {
       this._layoutElement!.lovelace = lovelace;
     }