Remove padding from scroll badges

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;
 

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

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