From e2a89a55b7f2c1a2fecf9e94c069f6638ed6b5f2 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Mon, 21 Oct 2024 18:18:56 +0200
Subject: [PATCH] Reduce margin between badges and cards (#22458)

---
 src/panels/lovelace/views/hui-masonry-view.ts |  2 +-
 .../lovelace/views/hui-sections-view.ts       | 23 +++++++++++++------
 src/panels/lovelace/views/hui-sidebar-view.ts |  2 +-
 3 files changed, 18 insertions(+), 9 deletions(-)

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,
+        })}
       ></hui-view-badges>
       <ha-sortable
         .disabled=${!editMode}
@@ -324,6 +327,12 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
         display: block;
       }
 
+      @media (max-width: 600px) {
+        :host {
+          --column-gap: var(--row-gap);
+        }
+      }
+
       .container > * {
         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%;
       }