Use dense layout for section view (#21830)

* Use dense layout for section view

* Make it an option in view settings

* Add expandable

src/data/lovelace/config/view.ts

@@ -22,7 +22,9 @@ export interface LovelaceBaseViewConfig {
   visible?: boolean | ShowViewConfig[];
   subview?: boolean;
   back_path?: string;
-  max_columns?: number; // Only used for section view, it should move to a section view config type when the views will have dedicated editor.
+  // 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;
 }
 
 export interface LovelaceViewConfig extends LovelaceBaseViewConfig {

src/panels/lovelace/editor/view-editor/hui-view-editor.ts

@@ -48,6 +48,12 @@ export class HuiViewEditor extends LitElement {
         },
         { name: "path", selector: { text: {} } },
         { name: "theme", selector: { theme: {} } },
+        {
+          name: "subview",
+          selector: {
+            boolean: {},
+          },
+        },
         {
           name: "type",
           selector: {
@@ -71,24 +77,32 @@ export class HuiViewEditor extends LitElement {
         ...(viewType === SECTION_VIEW_LAYOUT
           ? ([
               {
-                name: "max_columns",
+                name: "section_specifics",
-                selector: {
+                type: "expandable",
-                  number: {
+                flatten: true,
-                    min: 1,
+                expanded: true,
-                    max: 10,
+                schema: [
-                    mode: "slider",
+                  {
-                    slider_ticks: true,
+                    name: "max_columns",
+                    selector: {
+                      number: {
+                        min: 1,
+                        max: 10,
+                        mode: "slider",
+                        slider_ticks: true,
+                      },
+                    },
                   },
-                },
+                  {
+                    name: "dense_section_placement",
+                    selector: {
+                      boolean: {},
+                    },
+                  },
+                ],
               },
             ] as const satisfies HaFormSchema[])
           : []),
-        {
-          name: "subview",
-          selector: {
-            boolean: {},
-          },
-        },
       ] as const satisfies HaFormSchema[]
   );
 
@@ -164,12 +178,12 @@ export class HuiViewEditor extends LitElement {
       case "path":
         return this.hass!.localize("ui.panel.lovelace.editor.card.generic.url");
       case "type":
-        return this.hass.localize("ui.panel.lovelace.editor.edit_view.type");
       case "subview":
-        return this.hass.localize("ui.panel.lovelace.editor.edit_view.subview");
       case "max_columns":
+      case "dense_section_placement":
+      case "section_specifics":
         return this.hass.localize(
-          "ui.panel.lovelace.editor.edit_view.max_columns"
+          `ui.panel.lovelace.editor.edit_view.${schema.name}`
         );
       default:
         return this.hass!.localize(
@@ -183,9 +197,11 @@ export class HuiViewEditor extends LitElement {
   ) => {
     switch (schema.name) {
       case "subview":
+      case "dense_section_placement":
         return this.hass.localize(
-          "ui.panel.lovelace.editor.edit_view.subview_helper"
+          `ui.panel.lovelace.editor.edit_view.${schema.name}_helper`
         );
+
       default:
         return undefined;
     }

src/panels/lovelace/views/hui-sections-view.ts

@@ -9,6 +9,7 @@ import {
   nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { repeat } from "lit/directives/repeat";
 import { styleMap } from "lit/directives/style-map";
 import "../../../components/ha-icon-button";
@@ -147,7 +148,9 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
         .rollback=${false}
       >
         <div
-          class="container"
+          class="container ${classMap({
+            dense: Boolean(this._config?.dense_section_placement),
+          })}"
           style=${styleMap({
             "--total-section-count": totalSectionCount,
             "--max-column-count": maxColumnCount,
@@ -323,6 +326,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
         align-items: start;
         justify-content: center;
         grid-template-columns: repeat(var(--column-count), 1fr);
+        grid-auto-flow: row;
         gap: var(--row-gap) var(--column-gap);
         padding: var(--row-gap) var(--column-gap);
         box-sizing: content-box;
@@ -332,6 +336,9 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
             (var(--column-count) - 1) * var(--column-gap)
         );
       }
+      .container.dense {
+        grid-auto-flow: row dense;
+      }
 
       @media (max-width: 600px) {
         .container {

src/translations/en.json

@@ -5550,6 +5550,9 @@
             },
             "subview": "Subview",
             "max_columns": "Max number of sections wide",
+            "section_specifics": "Sections view specifics settings",
+            "dense_section_placement": "Dense section placement",
+            "dense_section_placement_helper": "Will try to fill gaps with sections that fit the gap. This may make section placement less predictable.",
             "subview_helper": "Subviews don't appear in tabs and have a back button.",
             "edit_ui": "Edit in visual editor",
             "edit_yaml": "Edit in YAML",