Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-04-02 00:27:49 +01:00
Code Activity

Improve sections view spacing and heading card grid options (#30295)

Browse Source 
* Improve sections view spacing and heading card grid options

* Remove extra margin in heading section

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

Good catch !

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>
This commit is contained in:
Paul Bottein
2026-03-24 14:26:05 +01:00
committed by GitHub
parent 4bdac1f385
commit 9470863808
3 changed files with 6 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/panels/lovelace/cards/hui-heading-card.ts
View File

@@ -67,7 +67,7 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard {
public getGridOptions(): LovelaceGridOptions {
return {
columns: "full",
rows: this._config?.heading_style === "subtitle" ? "auto" : 1,
rows: "auto",
min_columns: 3,
};
}

9
src/panels/lovelace/views/hui-sections-view.ts
View File

@@ -485,10 +485,11 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
static styles = css`
:host {
--row-height: var(--ha-view-sections-row-height, 56px);
--row-gap: var(--ha-view-sections-row-gap, 8px);
--row-gap: var(--ha-view-sections-row-gap, 24px);
--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);
--narrow-column-gap: var(--ha-view-sections-narrow-column-gap, 8px);
--top-margin: var(--ha-view-sections-extra-top-margin, 80px);
display: block;
flex: 1;
@@ -496,15 +497,15 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
@media (max-width: 600px) {
:host {
--column-gap: var(--ha-view-sections-narrow-column-gap, var(--row-gap));
--column-gap: var(--narrow-column-gap);
}
}
.wrapper {
display: flex;
flex-direction: column;
min-height: calc(100% - 2 * var(--row-gap));
padding: var(--row-gap) var(--column-gap);
min-height: 100%;
padding: 0 var(--column-gap);
box-sizing: content-box;
margin: 0 auto;
max-width: calc(

9
src/panels/lovelace/views/hui-view-header.ts
View File

@@ -334,10 +334,6 @@ export class HuiViewHeader extends LitElement {
--spacing: 8px;
}
.layout.has-heading {
margin-top: var(--spacing);
}
.heading {
position: relative;
flex: 1;
@@ -438,15 +434,10 @@ export class HuiViewHeader extends LitElement {
flex-direction: column-reverse;
}
.layout.badges-top.has-badges {
margin-top: 0;
}
@media (min-width: 768px) {
.layout.responsive.badges-top.has-heading {
flex-direction: row;
align-items: flex-start;
margin-top: var(--spacing);
}
}