scope styled scrollbar to only select elements (#11247)

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 }"
   >

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));
     }

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"