diff --git a/src/panels/lovelace/views/hui-masonry-view.ts b/src/panels/lovelace/views/hui-masonry-view.ts index 500bc441cf..09ccfe4d57 100644 --- a/src/panels/lovelace/views/hui-masonry-view.ts +++ b/src/panels/lovelace/views/hui-masonry-view.ts @@ -296,7 +296,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement { hui-view-badges { display: block; - margin: 12px 8px 20px 8px; + margin: 4px 8px 4px 8px; font-size: 85%; } diff --git a/src/panels/lovelace/views/hui-sections-view.ts b/src/panels/lovelace/views/hui-sections-view.ts index a4b3c0d18d..351ee8f2ee 100644 --- a/src/panels/lovelace/views/hui-sections-view.ts +++ b/src/panels/lovelace/views/hui-sections-view.ts @@ -142,6 +142,9 @@ export class SectionsView extends LitElement implements LovelaceViewElement { .badges=${this.badges} .lovelace=${this.lovelace} .viewIndex=${this.index} + style=${styleMap({ + "--max-column-count": maxColumnCount, + })} > * { position: relative; width: 100%; @@ -362,12 +371,6 @@ export class SectionsView extends LitElement implements LovelaceViewElement { grid-auto-flow: row dense; } - @media (max-width: 600px) { - .container { - --column-gap: var(--row-gap); - } - } - .handle { cursor: grab; padding: 8px; @@ -399,8 +402,14 @@ export class SectionsView extends LitElement implements LovelaceViewElement { hui-view-badges { display: block; - margin: 16px 8px; text-align: center; + padding: 0 var(--column-gap); + padding-top: var(--row-gap); + margin: auto; + max-width: calc( + var(--max-column-count) * var(--column-max-width) + + (var(--max-column-count) - 1) * var(--column-gap) + ); } .section-header { diff --git a/src/panels/lovelace/views/hui-sidebar-view.ts b/src/panels/lovelace/views/hui-sidebar-view.ts index e2aacaa40a..4852b06dd6 100644 --- a/src/panels/lovelace/views/hui-sidebar-view.ts +++ b/src/panels/lovelace/views/hui-sidebar-view.ts @@ -203,7 +203,7 @@ export class SideBarView extends LitElement implements LovelaceViewElement { hui-view-badges { display: block; - margin: 12px 8px 20px 8px; + margin: 4px 8px 4px 8px; font-size: 85%; }