From 2a18706a13e54bbc220c222d7069b4933c55564c Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Thu, 29 Aug 2024 09:58:17 +0200
Subject: [PATCH] Take column span into account to determine the max number of
 columns (#21827)

---
 src/panels/lovelace/views/hui-sections-view.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/panels/lovelace/views/hui-sections-view.ts b/src/panels/lovelace/views/hui-sections-view.ts
index 7f2781f74b..5d27ac1be1 100644
--- a/src/panels/lovelace/views/hui-sections-view.ts
+++ b/src/panels/lovelace/views/hui-sections-view.ts
@@ -47,7 +47,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
 
   @state() private _config?: LovelaceViewConfig;
 
-  @state() private _sectionCount = 0;
+  @state() private _sectionColumnCount = 0;
 
   @state() _dragging = false;
 
@@ -89,9 +89,10 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
   }
 
   private _computeSectionsCount() {
-    this._sectionCount = this.sections.filter(
-      (section) => !section.hidden
-    ).length;
+    this._sectionColumnCount = this.sections
+      .filter((section) => !section.hidden)
+      .map((section) => section.config.column_span ?? 1)
+      .reduce((acc, val) => acc + val, 0);
   }
 
   private _sectionVisibilityChanged = () => {
@@ -125,7 +126,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
 
     const sections = this.sections;
     const totalSectionCount =
-      this._sectionCount + (this.lovelace?.editMode ? 1 : 0);
+      this._sectionColumnCount + (this.lovelace?.editMode ? 1 : 0);
     const editMode = this.lovelace.editMode;
 
     const maxColumnCount = this._columnsController.value ?? 1;