Make it possible to configure items per row for area cards in home view

src/Helper.ts

@@ -61,6 +61,12 @@ class Helper {
    */
   static #strategyOptions: generic.StrategyConfig;
 
+  /**
+   * Indicates if the display is narrow (i.e. mobile)
+   * @type {boolean}
+   */
+  static #narrow: boolean;
+
   /**
    * Set to true for more verbose information in the console.
    *
@@ -131,6 +137,14 @@ class Helper {
     return this.#debug;
   }
 
+  /**
+   * @returns {boolean}
+   * @static
+   */
+  static get narrow(): boolean {
+    return this.#narrow;
+  }
+
   /**
    * Initialize this module.
    *
@@ -141,6 +155,7 @@ class Helper {
   static async initialize(info: generic.DashBoardInfo): Promise<void> {
     // Initialize properties.
     this.#hassStates = info.hass.states;
+    this.#narrow = window.matchMedia("(max-width: 870px)").matches;
     this.#strategyOptions = deepmerge(configurationDefaults, info.config?.strategy?.options ?? {});
     this.#debug = this.#strategyOptions.debug;
 

src/types/strategy/generic.ts

@@ -107,7 +107,8 @@ export namespace generic {
     extra_cards?: LovelaceCardConfig[];
     extra_views?: ViewConfig[];
     home_view: {
-      hidden: HiddenSectionType[]
+      hidden: HiddenSectionType[];
+      areas_per_row?: number | AreasPerRow;
     }
     quick_access_cards?: LovelaceCardConfig[];
     views: { [k: string]: ViewConfig };
@@ -116,6 +117,11 @@ export namespace generic {
   const hiddenSectionList = ["chips", "persons", "greeting", "areas", "areasTitle"] as const;
   export type HiddenSectionType = typeof hiddenSectionList[number];
 
+  export interface AreasPerRow {
+    narrow?: number;
+    wide?: number;
+  }
+
   /**
    * Represents the default configuration for a strategy.
    */

src/views/HomeView.ts

@@ -9,6 +9,7 @@ import {ActionConfig} from "../types/homeassistant/data/lovelace";
 import {TitleCardConfig} from "../types/lovelace-mushroom/cards/title-card-config";
 import {PersonCardConfig} from "../types/lovelace-mushroom/cards/person-card-config";
 
+const DEFAULT_AREAS_PER_ROW = 2;
 
 // noinspection JSUnusedGlobalSymbols Class is dynamically imported.
 /**
@@ -263,10 +264,16 @@ class HomeView extends AbstractView {
 
       // Horizontally group every two area cards if all cards are created.
       if (i === Helper.areas.length - 1) {
-        for (let i = 0; i < areaCards.length; i += 2) {
+        let cardsPerRow = Helper.strategyOptions.home_view?.areas_per_row ?? DEFAULT_AREAS_PER_ROW;
+
+        if (typeof cardsPerRow === 'object') {
+          cardsPerRow = (Helper.narrow ? cardsPerRow.narrow : cardsPerRow.wide) ?? DEFAULT_AREAS_PER_ROW;
+        }
+
+        for (let i = 0; i < areaCards.length; i += cardsPerRow) {
           groupedCards.push({
             type: "horizontal-stack",
-            cards: areaCards.slice(i, i + 2),
+            cards: areaCards.slice(i, i + cardsPerRow),
           } as StackCardConfig);
         }
       }