From 59beb324b4ff1773fa50cf023bd441f3d22d61cf Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Wed, 29 Apr 2026 01:00:42 +0200
Subject: [PATCH] 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                      | 34 +++++++++++++++++++
 .../all-channels-view.component.html          |  2 +-
 .../groups-view/groups-view.component.html    |  2 +-
 .../src/lib/epg-list/epg-list.component.html  |  2 +-
 .../src/lib/epg-list/epg-list.component.scss  | 29 ----------------
 5 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/apps/web/src/styles.scss b/apps/web/src/styles.scss
index 5c9724c0a..f6c6cd73a 100644
--- a/apps/web/src/styles.scss
+++ b/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;
 }
diff --git a/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.html b/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.html
index 91c49a695..71820f84e 100644
--- a/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.html
+++ b/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="
diff --git a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.html b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.html
index ea0971fad..f3a820742 100644
--- a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.html
+++ b/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="
diff --git a/libs/ui/epg/src/lib/epg-list/epg-list.component.html b/libs/ui/epg/src/lib/epg-list/epg-list.component.html
index 00d6cee08..c076bddbe 100644
--- a/libs/ui/epg/src/lib/epg-list/epg-list.component.html
+++ b/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)) {
diff --git a/libs/ui/epg/src/lib/epg-list/epg-list.component.scss b/libs/ui/epg/src/lib/epg-list/epg-list.component.scss
index 25a9efde1..35ed5805c 100644
--- a/libs/ui/epg/src/lib/epg-list/epg-list.component.scss
+++ b/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 {