Add auto-hide scrollbars into revision selector

public/index.css

@@ -22,19 +22,6 @@ body {
   background-color: var(--color-background-default);
 }
 
-:root {
-  .os-theme-radicle {
-    --os-size: 16px;
-    --os-handle-border-radius: 4px;
-    --os-padding-perpendicular: 4px;
-    --os-padding-axis: 2px;
-    --os-track-bg: var(--color-background-default);
-    --os-handle-bg: var(--color-fill-ghost);
-    --os-handle-bg-hover: var(--color-fill-ghost);
-    --os-handle-bg-active: var(--color-fill-ghost);
-  }
-}
-
 ::selection {
   background: var(--color-fill-yellow);
   color: var(--color-foreground-black);
@@ -99,6 +86,19 @@ body {
   text-underline-offset: 2px;
 }
 
+:root {
+  .global-os-theme-radicle {
+    --os-size: 16px;
+    --os-handle-border-radius: 4px;
+    --os-padding-perpendicular: 4px;
+    --os-padding-axis: 2px;
+    --os-handle-bg: var(--color-border-default);
+    --os-handle-bg-hover: var(--color-border-default);
+    --os-handle-bg-active: var(--color-border-default);
+    --os-track-bg: transparent;
+  }
+}
+
 :root {
   --elevation-low: 0 0 48px 0 #000000ee;
 }

src/components/DropdownList.svelte

@@ -1,6 +1,8 @@
 <script lang="ts" generics="T">
   import type { Snippet } from "svelte";
 
+  import { useOverlayScrollbars } from "overlayscrollbars-svelte";
+
   interface Props {
     item: Snippet<[T]>;
     empty?: Snippet;
@@ -9,6 +11,24 @@
   }
 
   const { item, empty, items, styleDropdownMinWidth }: Props = $props();
+
+  let dropdownElement: HTMLDivElement | undefined = undefined;
+
+  $effect(() => {
+    if (dropdownElement) {
+      const [initialize] = useOverlayScrollbars({
+        options: () => ({
+          scrollbars: {
+            theme: "global-os-theme-radicle",
+            autoHide: "scroll",
+          },
+        }),
+        defer: true,
+      });
+
+      initialize({ target: dropdownElement });
+    }
+  });
 </script>
 
 <style>
@@ -23,7 +43,10 @@
   }
 </style>
 
-<div class="dropdown" style:min-width={styleDropdownMinWidth}>
+<div
+  class="dropdown"
+  bind:this={dropdownElement}
+  style:min-width={styleDropdownMinWidth}>
   {#each items as i}
     <div class="dropdown-item">
       {@render item(i)}

src/components/InboxButton.svelte

@@ -35,7 +35,7 @@
     if (borderComponent) {
       const [initialize] = useOverlayScrollbars({
         options: () => ({
-          scrollbars: { theme: "os-theme-radicle", autoHide: "scroll" },
+          scrollbars: { theme: "global-os-theme-radicle", autoHide: "scroll" },
         }),
         defer: true,
       });

src/views/repo/Layout.svelte

@@ -131,7 +131,7 @@
     options={{
       overflow: { x: "visible" },
       scrollbars: {
-        theme: "os-theme-radicle",
+        theme: "global-os-theme-radicle",
         autoHide: "scroll",
       },
     }}
@@ -158,7 +158,7 @@
     style="grid-column: 3/4; width: 100%;"
     options={{
       scrollbars: {
-        theme: "os-theme-radicle",
+        theme: "global-os-theme-radicle",
         autoHide: "scroll",
       },
     }}