From 3804a4c7cb40a90a9d796d81a6d9df13fe41472c Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 7 May 2025 13:02:07 +0200
Subject: [PATCH] Remove padding from scroll badges

---
 .../controllers/drag-scroll-controller.ts     | 26 +++++++++++++++
 src/panels/lovelace/badges/hui-view-badges.ts | 21 ------------
 src/panels/lovelace/views/hui-view-header.ts  | 32 +++++++++++++++----
 3 files changed, 52 insertions(+), 27 deletions(-)

diff --git a/src/common/controllers/drag-scroll-controller.ts b/src/common/controllers/drag-scroll-controller.ts
index c7f5349585..9c58a32929 100644
--- a/src/common/controllers/drag-scroll-controller.ts
+++ b/src/common/controllers/drag-scroll-controller.ts
@@ -23,6 +23,10 @@ export class DragScrollController implements ReactiveController {
 
   public scrollLeft = 0;
 
+  public scrolledStart = false;
+
+  public scrolledEnd = false;
+
   private _host: ReactiveControllerHost & LitElement;
 
   private _selector: string;
@@ -75,6 +79,11 @@ export class DragScrollController implements ReactiveController {
     );
     if (this._scrollContainer) {
       this._scrollContainer.addEventListener("mousedown", this._mouseDown);
+      this._scrollContainer.addEventListener("scroll", this._onScroll);
+      this.scrolledStart = this._scrollContainer.scrollLeft > 0;
+      this.scrolledEnd =
+        this._scrollContainer.scrollLeft + this._scrollContainer.offsetWidth <
+        this._scrollContainer.scrollWidth;
     }
   }
 
@@ -83,6 +92,7 @@ export class DragScrollController implements ReactiveController {
     window.removeEventListener("mouseup", this._mouseUp);
     if (this._scrollContainer) {
       this._scrollContainer.removeEventListener("mousedown", this._mouseDown);
+      this._scrollContainer.removeEventListener("scroll", this._onScroll);
       this._scrollContainer = undefined;
     }
     this.scrolled = false;
@@ -92,6 +102,22 @@ export class DragScrollController implements ReactiveController {
     this.scrollLeft = 0;
   }
 
+  private _onScroll = (event: Event) => {
+    const oldScrolledStart = this.scrolledStart;
+    const oldScrolledEnd = this.scrolledEnd;
+
+    const container = event.currentTarget as HTMLElement;
+    this.scrolledStart = container.scrollLeft > 0;
+    this.scrolledEnd =
+      container.scrollLeft + container.offsetWidth < container.scrollWidth;
+    if (
+      this.scrolledStart !== oldScrolledStart ||
+      this.scrolledEnd !== oldScrolledEnd
+    ) {
+      this._host.requestUpdate();
+    }
+  };
+
   private _mouseDown = (event: MouseEvent) => {
     const scrollContainer = this._scrollContainer;
 
diff --git a/src/panels/lovelace/badges/hui-view-badges.ts b/src/panels/lovelace/badges/hui-view-badges.ts
index 68d708fa2a..5eb544e60d 100644
--- a/src/panels/lovelace/badges/hui-view-badges.ts
+++ b/src/panels/lovelace/badges/hui-view-badges.ts
@@ -206,27 +206,6 @@ export class HuiViewBadges extends LitElement {
       margin: 0;
     }
 
-    /* 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 > * {
       min-width: fit-content;
     }
diff --git a/src/panels/lovelace/views/hui-view-header.ts b/src/panels/lovelace/views/hui-view-header.ts
index 6bf3b6445a..f1411df7de 100644
--- a/src/panels/lovelace/views/hui-view-header.ts
+++ b/src/panels/lovelace/views/hui-view-header.ts
@@ -202,9 +202,10 @@ 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 badgeDragging = this._dragScrollController.scrolling;
+    const startScrolled = this._dragScrollController.scrolledStart;
+    const endScrolled = this._dragScrollController.scrolledEnd;
 
     const hasHeading = card !== undefined;
     const hasBadges = this.badges.length > 0;
@@ -267,7 +268,13 @@ export class HuiViewHeader extends LitElement {
           ${this.lovelace && (editMode || this.badges.length > 0)
             ? html`
                 <div
-                  class="badges ${badgesPosition} ${badgesWrap} ${badgeDragging}"
+                  class="badges ${classMap({
+                    [badgesPosition]: true,
+                    [badgesWrap]: true,
+                    dragging: badgeDragging,
+                    "start-scrolled": startScrolled,
+                    "end-scrolled": endScrolled,
+                  })}"
                 >
                   <hui-view-badges
                     .badges=${this.badges}
@@ -359,6 +366,21 @@ export class HuiViewHeader extends LitElement {
       max-width: 100%;
       scrollbar-color: var(--scrollbar-thumb-color) transparent;
       scrollbar-width: none;
+    }
+
+    .container:not(.edit-mode) .badges.scroll.start-scrolled {
+      mask-image: linear-gradient(90deg, transparent 0%, black 16px);
+    }
+
+    .container:not(.edit-mode) .badges.scroll.end-scrolled {
+      mask-image: linear-gradient(
+        90deg,
+        black calc(100% - 16px),
+        transparent 100%
+      );
+    }
+
+    .container:not(.edit-mode) .badges.scroll.start-scrolled.end-scrolled {
       mask-image: linear-gradient(
         90deg,
         transparent 0%,
@@ -403,7 +425,6 @@ export class HuiViewHeader extends LitElement {
     .container:not(.edit-mode) .layout.badges-scroll hui-view-badges {
       --badges-wrap: nowrap;
       --badges-aligmnent: flex-start;
-      --badge-padding: 16px;
     }
 
     .container:not(.edit-mode) .layout.center.badges-scroll hui-view-badges {
@@ -424,7 +445,6 @@ export class HuiViewHeader extends LitElement {
         hui-view-badges {
         --badges-wrap: wrap;
         --badges-aligmnent: flex-end;
-        --badge-padding: 0;
       }
       .layout.responsive.has-heading hui-view-badges {
         --badges-aligmnent: flex-end;