From d4531db14ec4d94eeeec56d66c1086cb3181a884 Mon Sep 17 00:00:00 2001
From: Nick Krantz <125900171+nick-livefront@users.noreply.github.com>
Date: Mon, 30 Sep 2024 16:27:18 -0500
Subject: [PATCH] scope styled scrollbar to only select elements (#11247)

---
 .../popup/layout/popup-page.component.html         |  2 +-
 apps/browser/src/popup/scss/tailwind.css           | 14 +++++++-------
 .../popup/components/vault/vault-v2.component.html |  6 +++++-
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/apps/browser/src/platform/popup/layout/popup-page.component.html b/apps/browser/src/platform/popup/layout/popup-page.component.html
index 8a7bedf0882..a7d4725d25d 100644
--- a/apps/browser/src/platform/popup/layout/popup-page.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-page.component.html
@@ -12,7 +12,7 @@
     <ng-content select="[slot=above-scroll-area]"></ng-content>
   </div>
   <div
-    class="tw-max-w-screen-sm tw-mx-auto tw-overflow-y-auto tw-flex tw-flex-col tw-w-full tw-h-full"
+    class="tw-max-w-screen-sm tw-mx-auto tw-overflow-y-auto tw-flex tw-flex-col tw-w-full tw-h-full tw-styled-scrollbar"
     (scroll)="handleScroll($event)"
     [ngClass]="{ 'tw-invisible': loading }"
   >
diff --git a/apps/browser/src/popup/scss/tailwind.css b/apps/browser/src/popup/scss/tailwind.css
index f465e0b77c1..9a865c3b0a2 100644
--- a/apps/browser/src/popup/scss/tailwind.css
+++ b/apps/browser/src/popup/scss/tailwind.css
@@ -4,23 +4,23 @@
 
 @import "../../../../../libs/components/src/tw-theme.css";
 
-@layer base {
-  /* Chrome & Safari support */
-  ::-webkit-scrollbar {
+@layer components {
+  /* Chrome / Safari support */
+  .tw-styled-scrollbar::-webkit-scrollbar {
     @apply tw-overflow-auto;
   }
-  ::-webkit-scrollbar-thumb {
+  .tw-styled-scrollbar::-webkit-scrollbar-thumb {
     @apply tw-bg-secondary-500 tw-rounded-lg tw-border-4 tw-border-solid tw-border-transparent tw-bg-clip-content;
   }
-  ::-webkit-scrollbar-track {
+  .tw-styled-scrollbar::-webkit-scrollbar-track {
     @apply tw-bg-background-alt;
   }
-  ::-webkit-scrollbar-thumb:hover {
+  .tw-styled-scrollbar::-webkit-scrollbar-thumb:hover {
     @apply tw-bg-secondary-600;
   }
 
   /* FireFox support */
-  * {
+  .tw-styled-scrollbar {
     @supports (-moz-appearance: none) {
       scrollbar-color: rgb(var(--color-secondary-500)) rgb(var(--color-background-alt));
     }
diff --git a/apps/browser/src/vault/popup/components/vault/vault-v2.component.html b/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
index e402e131436..62f0d240d1d 100644
--- a/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
+++ b/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
@@ -54,7 +54,11 @@
       </div>
     </div>
 
-    <div *ngIf="vaultState === null" cdkVirtualScrollingElement class="tw-h-full tw-p-3">
+    <div
+      *ngIf="vaultState === null"
+      cdkVirtualScrollingElement
+      class="tw-h-full tw-p-3 tw-styled-scrollbar"
+    >
       <app-autofill-vault-list-items></app-autofill-vault-list-items>
       <app-vault-list-items-container
         [title]="'favorites' | i18n"