Fix scrollbars

src-web/components/sidebar/Sidebar.tsx

@@ -360,7 +360,7 @@ export function Sidebar({ className }: Props) {
         'h-full grid grid-rows-[minmax(0,1fr)_auto]',
       )}
     >
-      <div className="pb-3 overflow-x-visible overflow-y-scroll pt-2">
+      <div className="pb-3 overflow-x-visible overflow-y-scroll hide-scrollbars pt-2">
         <ContextMenu
           triggerPosition={showMainContextMenu}
           items={mainContextMenuItems}

src-web/main.css

@@ -55,6 +55,30 @@
     @apply text-left;
   }
 
+  ::-webkit-scrollbar,
+  ::-webkit-scrollbar-corner {
+    @apply w-[8px] h-[8px] bg-transparent;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-text-subtlest rounded-[4px] opacity-20;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply opacity-40 !important;
+  }
+
+  iframe {
+    &::-webkit-scrollbar-corner,
+    &::-webkit-scrollbar {
+      @apply bg-surface-highlight !important;
+    }
+  }
+
   .hide-scrollbars {
     &::-webkit-scrollbar-corner,
     &::-webkit-scrollbar {
@@ -62,35 +86,6 @@
     }
   }
 
-  html {
-    * {
-      ::-webkit-scrollbar-corner,
-      ::-webkit-scrollbar {
-        @apply w-[10px] h-[10px];
-      }
-
-      .scrollbar-track,
-      ::-webkit-scrollbar-corner,
-      ::-webkit-scrollbar {
-        @apply bg-transparent;
-      }
-
-      &:hover {
-        &.scrollbar-thumb,
-        &::-webkit-scrollbar-thumb {
-          @apply bg-text-subtlest hover:bg-text-subtle rounded-[2px];
-        }
-      }
-    }
-
-    iframe {
-      &::-webkit-scrollbar-corner,
-      &::-webkit-scrollbar {
-        @apply bg-surface-highlight !important;
-      }
-    }
-  }
-
   .rtl {
     direction: rtl;
   }