From 465fdbfb80ef7510d35ecde8149442719e9d096d Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Wed, 29 Apr 2026 00:55:48 +0200
Subject: [PATCH] fix(epg): always-visible scrollbar in program list

Switch to overflow-y: scroll with scrollbar-gutter: stable so the gutter
is reserved (no layout shift between scrollable and non-scrollable
days). Locally style the thumb with --app-muted-color so it's clearly
visible across themes and platforms, overriding the global 6px
near-transparent style which was being hidden by the macOS overlay
auto-fade.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Entire-Checkpoint: 918ee7ade2f3
---
 .../src/lib/epg-list/epg-list.component.scss  | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

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 9fd1e8dc1..25a9efde1 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
@@ -47,12 +47,41 @@
 
 #program-list {
     flex: 1;
-    overflow-y: auto;
+    overflow-y: scroll;
     overflow-x: hidden;
     padding: 4px 8px 12px;
     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 {