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,32 +55,21 @@
     @apply text-left;
   }
 
-  .hide-scrollbars {
+  ::-webkit-scrollbar,
-    &::-webkit-scrollbar-corner,
+  ::-webkit-scrollbar-corner {
-    &::-webkit-scrollbar {
+    @apply w-[8px] h-[8px] bg-transparent;
-      @apply hidden !important;
-    }
   }
 
-  html {
+  ::-webkit-scrollbar-track {
-    * {
-      ::-webkit-scrollbar-corner,
-      ::-webkit-scrollbar {
-        @apply w-[10px] h-[10px];
-      }
-
-      .scrollbar-track,
-      ::-webkit-scrollbar-corner,
-      ::-webkit-scrollbar {
     @apply bg-transparent;
   }
 
-      &:hover {
+  ::-webkit-scrollbar-thumb {
-        &.scrollbar-thumb,
+    @apply bg-text-subtlest rounded-[4px] opacity-20;
-        &::-webkit-scrollbar-thumb {
-          @apply bg-text-subtlest hover:bg-text-subtle rounded-[2px];
-        }
   }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply opacity-40 !important;
   }
 
   iframe {
@@ -89,6 +78,12 @@
       @apply bg-surface-highlight !important;
     }
   }
+
+  .hide-scrollbars {
+    &::-webkit-scrollbar-corner,
+    &::-webkit-scrollbar {
+      @apply hidden !important;
+    }
   }
 
   .rtl {