From 8ca5b7528bacb9243f03ea60fa9b20881c398010 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Tue, 5 Mar 2024 23:55:10 +0100
Subject: [PATCH] Add section max width variable to section view (#19995)

---
 src/panels/lovelace/views/hui-sections-view.ts | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/panels/lovelace/views/hui-sections-view.ts b/src/panels/lovelace/views/hui-sections-view.ts
index 0403ad7b36..aeea8ae5b3 100644
--- a/src/panels/lovelace/views/hui-sections-view.ts
+++ b/src/panels/lovelace/views/hui-sections-view.ts
@@ -253,12 +253,19 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
         --grid-gap: 32px;
         --grid-max-section-count: 4;
         --grid-section-min-width: 320px;
+        --grid-section-max-width: 500px;
 
         /* Calculated */
         --max-count: min(var(--section-count), var(--grid-max-section-count));
-        --grid-max-width: calc(
-          (var(--max-count) + 1) * var(--grid-section-min-width) +
-            (var(--max-count) + 2) * var(--grid-gap) - 1px
+        --grid-max-width: min(
+          calc(
+            (var(--max-count) + 1) * var(--grid-section-min-width) +
+              (var(--max-count) + 2) * var(--grid-gap) - 1px
+          ),
+          calc(
+            var(--max-count) * var(--grid-section-max-width) +
+              (var(--max-count) + 1) * var(--grid-gap)
+          )
         );
 
         display: grid;