refactor(styles): extract .app-scrollbar utility, apply to channel lists

Move the always-visible themed scrollbar from epg-list into a global
.app-scrollbar utility class in styles.scss. Apply it to the All
channels and Groups view virtual-scroll viewports so the channel list
gets the same persistent gutter and themed thumb as the EPG list.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Entire-Checkpoint: c470abf78379

apps/web/src/styles.scss

@@ -27,6 +27,40 @@
 
 // ─── Shared Components ────────────────────────────────────────────────────────
 
+// Always-visible themed scrollbar. Apply to scroll containers that should
+// reserve gutter and not rely on macOS overlay scrollbars (which auto-fade).
+.app-scrollbar {
+    scrollbar-gutter: stable;
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--app-muted-color) 55%, transparent)
+        transparent;
+
+    &::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: color-mix(
+            in srgb,
+            var(--app-muted-color) 55%,
+            transparent
+        );
+        border-radius: 999px;
+        border: 2px solid transparent;
+        background-clip: content-box;
+
+        &:hover {
+            background-color: var(--app-muted-color);
+            background-clip: content-box;
+        }
+    }
+}
+
 app-root.macos-platform .current-playlist {
     padding-top: 30px;
 }

libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.html

@@ -12,7 +12,7 @@
     } @else {
         <cdk-virtual-scroll-viewport
             [itemSize]="itemSize()"
-            class="scroll-viewport"
+            class="scroll-viewport app-scrollbar"
         >
             <app-channel-list-item
                 *cdkVirtualFor="

libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.html

@@ -206,7 +206,7 @@
 
                 <cdk-virtual-scroll-viewport
                     [itemSize]="itemSize()"
-                    class="groups-channels-viewport"
+                    class="groups-channels-viewport app-scrollbar"
                 >
                     <app-channel-list-item
                         *cdkVirtualFor="

libs/ui/epg/src/lib/epg-list/epg-list.component.html

@@ -33,7 +33,7 @@
 
 @if (timeshiftLimit) {
     <!-- program list -->
-    <div id="program-list" #programList>
+    <div id="program-list" class="app-scrollbar" #programList>
         @if (items.length > 0) {
             @for (program of items; track $index) {
                 @if (!canActivateProgram(program)) {

libs/ui/epg/src/lib/epg-list/epg-list.component.scss

@@ -53,35 +53,6 @@
     display: flex;
     flex-direction: column;
     gap: 0;
-    scrollbar-gutter: stable;
-    scrollbar-width: thin;
-    scrollbar-color: color-mix(in srgb, var(--app-muted-color) 55%, transparent)
-        transparent;
-
-    &::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background-color: color-mix(
-            in srgb,
-            var(--app-muted-color) 55%,
-            transparent
-        );
-        border-radius: 999px;
-        border: 2px solid transparent;
-        background-clip: content-box;
-
-        &:hover {
-            background-color: var(--app-muted-color);
-            background-clip: content-box;
-        }
-    }
 }
 
 .program-item {