From 603663e0ccea772c0590934b525d8fd3d6c83ae8 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Wed, 7 May 2025 12:39:25 +0200
Subject: [PATCH] Fix badge overlay in scrolling mode (#25352)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
---
 src/panels/lovelace/badges/hui-view-badges.ts | 25 ++++++++++++++++---
 src/panels/lovelace/views/hui-view-header.ts  | 15 ++++++-----
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/panels/lovelace/badges/hui-view-badges.ts b/src/panels/lovelace/badges/hui-view-badges.ts
index f04d33a59c..68d708fa2a 100644
--- a/src/panels/lovelace/badges/hui-view-badges.ts
+++ b/src/panels/lovelace/badges/hui-view-badges.ts
@@ -206,12 +206,29 @@ export class HuiViewBadges extends LitElement {
       margin: 0;
     }
 
-    .badges > * {
-      min-width: fit-content;
+    /* Use before and after because padding doesn't work well with scrolling */
+    .badges::before,
+    .badges::after {
+      content: "";
+      position: relative;
+      display: block;
+      min-width: var(--badge-padding, 0px);
+      height: 16px;
+      background-color: transparent;
+    }
+    .badges::before {
+      margin-left: -8px;
+      margin-inline-start: -8px;
+      margin-inline-end: 0;
+    }
+    .badges::after {
+      margin-right: -8px;
+      margin-inline-end: -8px;
+      margin-inline-start: 0;
     }
 
-    .badges > *:last-child:not(.add) {
-      padding-right: var(--badges-padding-right, 0);
+    .badges > * {
+      min-width: fit-content;
     }
 
     hui-badge-edit-mode {
diff --git a/src/panels/lovelace/views/hui-view-header.ts b/src/panels/lovelace/views/hui-view-header.ts
index 27e08b88de..6bf3b6445a 100644
--- a/src/panels/lovelace/views/hui-view-header.ts
+++ b/src/panels/lovelace/views/hui-view-header.ts
@@ -202,6 +202,9 @@ export class HuiViewHeader extends LitElement {
       this.config?.badges_position ?? DEFAULT_VIEW_HEADER_BADGES_POSITION;
     const badgesWrap =
       this.config?.badges_wrap ?? DEFAULT_VIEW_HEADER_BADGES_WRAP;
+    const badgeDragging = this._dragScrollController.scrolling
+      ? "dragging"
+      : "";
 
     const hasHeading = card !== undefined;
     const hasBadges = this.badges.length > 0;
@@ -264,10 +267,7 @@ export class HuiViewHeader extends LitElement {
           ${this.lovelace && (editMode || this.badges.length > 0)
             ? html`
                 <div
-                  class="badges ${badgesPosition} ${badgesWrap} ${this
-                    ._dragScrollController.scrolling
-                    ? "dragging"
-                    : ""}"
+                  class="badges ${badgesPosition} ${badgesWrap} ${badgeDragging}"
                 >
                   <hui-view-badges
                     .badges=${this.badges}
@@ -356,7 +356,7 @@ export class HuiViewHeader extends LitElement {
 
     .container:not(.edit-mode) .badges.scroll {
       overflow: auto;
-      max-width: calc(100% - 16px);
+      max-width: 100%;
       scrollbar-color: var(--scrollbar-thumb-color) transparent;
       scrollbar-width: none;
       mask-image: linear-gradient(
@@ -366,7 +366,6 @@ export class HuiViewHeader extends LitElement {
         black calc(100% - 16px),
         transparent 100%
       );
-      padding-left: 16px;
     }
 
     hui-view-badges {
@@ -404,7 +403,7 @@ export class HuiViewHeader extends LitElement {
     .container:not(.edit-mode) .layout.badges-scroll hui-view-badges {
       --badges-wrap: nowrap;
       --badges-aligmnent: flex-start;
-      --badges-padding-right: 16px;
+      --badge-padding: 16px;
     }
 
     .container:not(.edit-mode) .layout.center.badges-scroll hui-view-badges {
@@ -425,7 +424,7 @@ export class HuiViewHeader extends LitElement {
         hui-view-badges {
         --badges-wrap: wrap;
         --badges-aligmnent: flex-end;
-        --badges-padding-right: 0;
+        --badge-padding: 0;
       }
       .layout.responsive.has-heading hui-view-badges {
         --badges-aligmnent: flex-end;