From 23229b3e3b8ef8687945237c06112989d13a6208 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Thu, 27 Mar 2025 16:39:47 +0100
Subject: [PATCH] Set the max number of columns to 3 for area dashboard
 (#24802)

* Set the max number of columns to 4 for area dashboard

* Set it to 3
---
 .../lovelace/strategies/areas/area-view-strategy.ts       | 8 ++++++--
 .../strategies/areas/areas-overview-view-strategy.ts      | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/panels/lovelace/strategies/areas/area-view-strategy.ts b/src/panels/lovelace/strategies/areas/area-view-strategy.ts
index 89668343c5..b9c9025091 100644
--- a/src/panels/lovelace/strategies/areas/area-view-strategy.ts
+++ b/src/panels/lovelace/strategies/areas/area-view-strategy.ts
@@ -1,5 +1,6 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
+import { clamp } from "../../../../common/number/clamp";
 import type { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge";
 import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type { LovelaceSectionRawConfig } from "../../../../data/lovelace/config/section";
@@ -144,7 +145,10 @@ export class AreaViewStrategy extends ReactiveElement {
       });
     }
 
-    // Take the full width if there is only one section to avoid misalignment between cards and header
+    // Allow between 2 and 3 columns (the max should be set to define the width of the header)
+    const maxColumns = clamp(sections.length, 2, 3);
+
+    // Take the full width if there is only one section to avoid narrow header on desktop
     if (sections.length === 1) {
       sections[0].column_span = 2;
     }
@@ -160,7 +164,7 @@ export class AreaViewStrategy extends ReactiveElement {
           content: `## ${area.name}`,
         },
       },
-      max_columns: 2,
+      max_columns: maxColumns,
       sections: sections,
       badges: badges,
     };
diff --git a/src/panels/lovelace/strategies/areas/areas-overview-view-strategy.ts b/src/panels/lovelace/strategies/areas/areas-overview-view-strategy.ts
index d3e706bab1..547f93ed34 100644
--- a/src/panels/lovelace/strategies/areas/areas-overview-view-strategy.ts
+++ b/src/panels/lovelace/strategies/areas/areas-overview-view-strategy.ts
@@ -95,7 +95,7 @@ export class AreasOverviewViewStrategy extends ReactiveElement {
 
     return {
       type: "sections",
-      max_columns: 2,
+      max_columns: 3,
       sections: areaSections,
     };
   }