From 3de4dffa0231168672f8fcdd4e383ec656cb25e7 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Mon, 19 Aug 2024 18:30:42 +0200
Subject: [PATCH] WIP: Allow to resize section

---
 src/data/lovelace/config/view.ts              |  1 +
 .../lovelace/views/hui-sections-view.ts       | 43 ++++++++++++++++++-
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/data/lovelace/config/view.ts b/src/data/lovelace/config/view.ts
index dd784c628a..3da2b71903 100644
--- a/src/data/lovelace/config/view.ts
+++ b/src/data/lovelace/config/view.ts
@@ -25,6 +25,7 @@ export interface LovelaceBaseViewConfig {
   // Only used for section view, it should move to a section view config type when the views will have dedicated editor.
   max_columns?: number;
   dense_section_placement?: boolean;
+  column_breakpoints: Record<string, number>;
 }
 
 export interface LovelaceViewConfig extends LovelaceBaseViewConfig {
diff --git a/src/panels/lovelace/views/hui-sections-view.ts b/src/panels/lovelace/views/hui-sections-view.ts
index 6a4851ab0e..6fd5920428 100644
--- a/src/panels/lovelace/views/hui-sections-view.ts
+++ b/src/panels/lovelace/views/hui-sections-view.ts
@@ -32,6 +32,15 @@ export const DEFAULT_MAX_COLUMNS = 4;
 
 const parsePx = (value: string) => parseInt(value.replace("px", ""));
 
+export const BREAKPOINTS: Record<string, number> = {
+  "0": 1,
+  "768": 2,
+  "1280": 3,
+  "1600": 4,
+  "1920": 5,
+  "2560": 6,
+};
+
 @customElement("hui-sections-view")
 export class SectionsView extends LitElement implements LovelaceViewElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -321,20 +330,50 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       :host {
         --row-height: var(--ha-view-sections-row-height, 56px);
         --row-gap: var(--ha-view-sections-row-gap, 8px);
-        --column-gap: var(--ha-view-sections-column-gap, 32px);
+        --column-gap: var(--ha-view-sections-column-gap, 24px);
         --column-max-width: var(--ha-view-sections-column-max-width, 500px);
         --column-min-width: var(--ha-view-sections-column-min-width, 320px);
         display: block;
       }
 
+      :host {
+        --column-count: 1;
+      }
+      @media (min-width: 768px) {
+        :host {
+          --column-count: 2;
+        }
+      }
+      @media (min-width: 1280px) {
+        :host {
+          --column-count: 3;
+        }
+      }
+      @media (min-width: 1600px) {
+        :host {
+          --column-count: 4;
+        }
+      }
+      @media (min-width: 1920px) {
+        :host {
+          --column-count: 5;
+        }
+      }
+      @media (min-width: 2560px) {
+        :host {
+          --column-count: 6;
+        }
+      }
+
       .container > * {
         position: relative;
         width: 100%;
       }
 
       .section {
+        --section-column-span: min(var(--column-span, 1), var(--column-count));
         border-radius: var(--ha-card-border-radius, 12px);
-        grid-column: span var(--column-span);
+        grid-column: span var(--section-column-span);
         grid-row: span var(--row-span);
       }