Add section max width variable to section view (#19995)

home-assistant · Mar 5, 2024 · 8ca5b75 · 8ca5b75
1 parent d951e68
commit 8ca5b75
Showing 1 changed file with 10 additions and 3 deletions.
diff --git 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;