Sidebar view: Move all cards to 1 column on mobile (#9656)

src/panels/energy/strategies/energy-strategy.ts

@@ -69,23 +69,6 @@ export class EnergyStrategy {
       });
     }
 
-    if (hasGrid || hasSolar) {
-      view.cards!.push({
-        title: "Sources",
-        type: "energy-sources-table",
-        prefs: energyPrefs,
-      });
-    }
-
-    // Only include if we have at least 1 device in the config.
-    if (energyPrefs.device_consumption.length) {
-      view.cards!.push({
-        title: "Monitor individual devices",
-        type: "energy-devices-graph",
-        prefs: energyPrefs,
-      });
-    }
-
     // Only include if we have a grid.
     if (hasGrid) {
       view.cards!.push({
@@ -96,6 +79,14 @@ export class EnergyStrategy {
       });
     }
 
+    if (hasGrid || hasSolar) {
+      view.cards!.push({
+        title: "Sources",
+        type: "energy-sources-table",
+        prefs: energyPrefs,
+      });
+    }
+
     // Only include if we have a solar source.
     if (hasSolar) {
       view.cards!.push({
@@ -123,6 +114,15 @@ export class EnergyStrategy {
       });
     }
 
+    // Only include if we have at least 1 device in the config.
+    if (energyPrefs.device_consumption.length) {
+      view.cards!.push({
+        title: "Monitor individual devices",
+        type: "energy-devices-graph",
+        prefs: energyPrefs,
+      });
+    }
+
     return view;
   }
 }

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

@@ -64,6 +64,8 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
 
   private _mqls?: MediaQueryList[];
 
+  private _mqlListenerRef?: () => void;
+
   public constructor() {
     super();
     this.addEventListener("iron-resize", (ev: Event) => ev.stopPropagation());
@@ -77,8 +79,9 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
   public disconnectedCallback() {
     super.disconnectedCallback();
     this._mqls?.forEach((mql) => {
-      mql.removeListener(this._updateColumns);
+      mql.removeListener(this._mqlListenerRef!);
     });
+    this._mqlListenerRef = undefined;
     this._mqls = undefined;
   }
 
@@ -112,7 +115,10 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
   private _initMqls() {
     this._mqls = [300, 600, 900, 1200].map((width) => {
       const mql = window.matchMedia(`(min-width: ${width}px)`);
-      mql.addListener(this._updateColumns.bind(this));
+      if (!this._mqlListenerRef) {
+        this._mqlListenerRef = this._updateColumns.bind(this);
+      }
+      mql.addListener(this._mqlListenerRef);
       return mql;
     });
   }

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

@@ -35,6 +35,24 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
 
   @state() private _config?: LovelaceViewConfig;
 
+  private _mqlListenerRef?: () => void;
+
+  private _mql?: MediaQueryList;
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this._mql = window.matchMedia("(min-width: 760px)");
+    this._mqlListenerRef = this._createCards.bind(this);
+    this._mql.addListener(this._mqlListenerRef);
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this._mql?.removeListener(this._mqlListenerRef!);
+    this._mqlListenerRef = undefined;
+    this._mql = undefined;
+  }
+
   public setConfig(config: LovelaceViewConfig): void {
     this._config = config;
   }
@@ -96,8 +114,14 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
   private _createCards(): void {
     const mainDiv = document.createElement("div");
     mainDiv.id = "main";
-    const sidebarDiv = document.createElement("div");
+
-    sidebarDiv.id = "sidebar";
+    let sidebarDiv: HTMLDivElement;
+    if (this._mql?.matches) {
+      sidebarDiv = document.createElement("div");
+      sidebarDiv.id = "sidebar";
+    } else {
+      sidebarDiv = mainDiv;
+    }
 
     if (this.hasUpdated) {
       const oldMain = this.renderRoot.querySelector("#main");
@@ -177,15 +201,6 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
         margin: var(--masonry-view-card-margin, 4px 4px 8px);
       }
 
-      @media (max-width: 760px) {
-        .container {
-          flex-direction: column;
-        }
-        #sidebar {
-          max-width: unset;
-        }
-      }
-
       @media (max-width: 500px) {
         .container > div > * {
           margin-left: 0;