Add view top margin option for section view (#24386)

src/data/lovelace/config/view.ts

@@ -45,6 +45,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;
+  top_margin?: boolean;
 }
 
 export interface LovelaceViewConfig extends LovelaceBaseViewConfig {

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

@@ -100,6 +100,12 @@ export class HuiViewEditor extends LitElement {
                       boolean: {},
                     },
                   },
+                  {
+                    name: "top_margin",
+                    selector: {
+                      boolean: {},
+                    },
+                  },
                 ],
               },
             ] as const satisfies HaFormSchema[])
@@ -149,6 +155,7 @@ export class HuiViewEditor extends LitElement {
     if (config.type !== SECTIONS_VIEW_LAYOUT) {
       delete config.max_columns;
       delete config.dense_section_placement;
+      delete config.top_margin;
     }
 
     if (
@@ -174,6 +181,7 @@ export class HuiViewEditor extends LitElement {
       case "subview":
       case "max_columns":
       case "dense_section_placement":
+      case "top_margin":
       case "section_specifics":
         return this.hass.localize(
           `ui.panel.lovelace.editor.edit_view.${schema.name}`
@@ -191,6 +199,7 @@ export class HuiViewEditor extends LitElement {
     switch (schema.name) {
       case "subview":
       case "dense_section_placement":
+      case "top_margin":
         return this.hass.localize(
           `ui.panel.lovelace.editor.edit_view.${schema.name}_helper`
         );

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

@@ -154,6 +154,11 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
     const maxColumnCount = this._columnsController.value ?? 1;
 
     return html`
+      <div
+        class="wrapper ${classMap({
+          "top-margin": Boolean(this._config?.top_margin),
+        })}"
+      >
         <hui-view-header
           .hass=${this.hass}
           .badges=${this.badges}
@@ -304,6 +309,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
               : nothing}
           </div>
         </ha-sortable>
+      </div>
     `;
   }
 
@@ -429,6 +435,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       --column-gap: var(--ha-view-sections-column-gap, 32px);
       --column-max-width: var(--ha-view-sections-column-max-width, 500px);
       --column-min-width: var(--ha-view-sections-column-min-width, 320px);
+      --top-margin: var(--ha-view-sections-extra-top-margin, 80px);
       display: block;
     }
 
@@ -438,6 +445,11 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       }
     }
 
+    .wrapper.top-margin {
+      display: block;
+      margin-top: var(--top-margin);
+    }
+
     .container > * {
       position: relative;
       width: 100%;

src/translations/en.json

@@ -6569,6 +6569,8 @@
             "section_specifics": "Sections view specific 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.",
+            "top_margin": "Add additional space above",
+            "top_margin_helper": "Helps reveal more of the background",
             "subview_helper": "Subviews don't appear in tabs and have a back button.",
             "edit_ui": "Edit in visual editor",
             "edit_yaml": "Edit in YAML",