make it an option to track scrolling

src/common/controllers/drag-scroll-controller.ts

@@ -10,6 +10,7 @@ import type { LitElement } from "lit";
 export interface DragScrollControllerConfig {
   selector: string;
   enabled?: boolean;
+  trackScroll?: boolean;
 }
 
 export class DragScrollController implements ReactiveController {
@@ -23,6 +24,10 @@ export class DragScrollController implements ReactiveController {
 
   public scrollLeft = 0;
 
+  public scrolledStart = false;
+
+  public scrolledEnd = false;
+
   private _host: ReactiveControllerHost & LitElement;
 
   private _selector: string;
@@ -31,6 +36,8 @@ export class DragScrollController implements ReactiveController {
 
   private _enabled = true;
 
+  private _trackScroll = false;
+
   public get enabled(): boolean {
     return this._enabled;
   }
@@ -50,10 +57,11 @@ export class DragScrollController implements ReactiveController {
 
   constructor(
     host: ReactiveControllerHost & LitElement,
-    { selector, enabled }: DragScrollControllerConfig
+    { selector, enabled, trackScroll }: DragScrollControllerConfig
   ) {
     this._selector = selector;
     this._host = host;
+    this._trackScroll = trackScroll ?? false;
     this.enabled = enabled ?? true;
     host.addController(this);
   }
@@ -75,6 +83,14 @@ export class DragScrollController implements ReactiveController {
     );
     if (this._scrollContainer) {
       this._scrollContainer.addEventListener("mousedown", this._mouseDown);
+      if (this._trackScroll) {
+        this._scrollContainer.addEventListener("scroll", this._onScroll);
+        this.scrolledStart = this._scrollContainer.scrollLeft > 0;
+        this.scrolledEnd =
+          this._scrollContainer.scrollLeft + this._scrollContainer.offsetWidth <
+          this._scrollContainer.scrollWidth;
+        this._host.requestUpdate();
+      }
     }
   }
 
@@ -83,15 +99,34 @@ 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;
     this.scrolling = false;
+    this.scrolledStart = false;
+    this.scrolledEnd = false;
     this.mouseIsDown = false;
     this.scrollStartX = 0;
     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;
 

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;
     }

src/panels/lovelace/views/hui-view-header.ts

@@ -54,6 +54,7 @@ export class HuiViewHeader extends LitElement {
 
   private _dragScrollController = new DragScrollController(this, {
     selector: ".scroll",
+    trackScroll: true,
     enabled: false,
   });
 
@@ -202,9 +203,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 +269,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 +367,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 +426,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 +446,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;