From 2db99769f9e7829cfc5cacb2a75779b6996501a5 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Wed, 29 Apr 2026 01:13:58 +0200
Subject: [PATCH] fix(scrollbar): make .app-scrollbar override component-scoped
 overflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two issues kept the scrollbar invisible on the global Favorites and
Recently viewed live-tv lists:

1. The wrong files. The visible Favorites/Recent pages render through
   <app-global-favorites-list> from portal/shared/ui (and the
   workspace-shell variant), not the channel-list-container's tabs.
   Apply .app-scrollbar to both of those components.

2. Specificity. Component CSS gets an Angular [_ngcontent-xxx]
   attribute selector, so `.nav-list { overflow-y: auto }` resolves to
   (0,2,0) — same as the doubled `.app-scrollbar.app-scrollbar` and
   wins on source order (component CSS loads after globals). Mark
   overflow-y: scroll !important on the utility so the contract holds:
   applying .app-scrollbar always reserves the gutter.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Entire-Checkpoint: 8ae011808369
---
 apps/web/src/styles.scss                        | 17 ++++++++++++-----
 .../global-favorites-list.component.html        |  2 +-
 .../global-favorites-list.component.html        |  2 +-
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/styles.scss b/apps/web/src/styles.scss
index 99875d108..a70e14cd4 100644
--- a/apps/web/src/styles.scss
+++ b/apps/web/src/styles.scss
@@ -29,16 +29,22 @@
 
 // Always-visible themed scrollbar. Apply to scroll containers that should
 // reserve gutter and not rely on macOS overlay scrollbars (which auto-fade).
-.app-scrollbar {
-    overflow-y: scroll;
+// Selector is doubled (.app-scrollbar.app-scrollbar) throughout so the rules
+// outrank both component-scoped overflow declarations and the global
+// `.dark-theme ::-webkit-scrollbar` block below.
+.app-scrollbar.app-scrollbar {
+    // !important so the utility wins over component-scoped overflow rules
+    // (Angular ViewEncapsulation adds an attribute selector that pushes
+    // host specificity above the doubled class selector).
+    overflow-y: scroll !important;
     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;
+        width: 10px;
+        height: 10px;
     }
 
     &::-webkit-scrollbar-track {
@@ -48,12 +54,13 @@
     &::-webkit-scrollbar-thumb {
         background-color: color-mix(
             in srgb,
-            var(--app-muted-color) 55%,
+            var(--app-muted-color) 70%,
             transparent
         );
         border-radius: 999px;
         border: 2px solid transparent;
         background-clip: content-box;
+        min-height: 32px;
 
         &:hover {
             background-color: var(--app-muted-color);
diff --git a/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.html b/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.html
index 675ee1fdb..81eb6b61b 100644
--- a/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.html
+++ b/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.html
@@ -1,5 +1,5 @@
 <div
-    class="nav-list"
+    class="nav-list app-scrollbar"
     cdkDropList
     [cdkDropListDisabled]="!canDragDrop()"
     (cdkDropListDropped)="onDrop($event)"
diff --git a/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.html b/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.html
index 8652f52c0..f931545d7 100644
--- a/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.html
+++ b/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.html
@@ -13,7 +13,7 @@
     </mat-form-field>
 </div>
 
-<div class="nav-list" cdkDropList (cdkDropListDropped)="onDrop($event)">
+<div class="nav-list app-scrollbar" cdkDropList (cdkDropListDropped)="onDrop($event)">
     @if (enrichedChannels().length === 0) {
         <div class="empty-state">
             <mat-icon class="empty-icon">star_border</mat-icon>