feat(webapp): fade the side menu scrollbar in on hover

The scroll body's thumb is transparent until the pointer is inside the
scroll area, then fades in (200ms) and back out on leave. It is styled via
::-webkit-scrollbar (not scrollbar-width) so Chrome keeps a classic,
always-present bar to reveal instead of the auto-hiding overlay, and the
thumb color is a registered @Property so it can transition. The thumb is a
thin rounded pill (transparent border + padding-box clip) inset within an
invisible reserved channel, so there is no layout shift.

Author: samejr

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -197,10 +197,10 @@ const DRAG_CLICK_THRESHOLD = 4;
 const SIDE_MENU_PAD_X = `calc(0.625rem - 0.375rem * var(--sm-collapse, 0))`;
 /**
  * Scroll-body right padding DURING a transition (settled-open uses the reserved gutter instead).
- * Interpolates from the measured gutter width (seamless handoff) to 4px collapsed; the 12px fallback
+ * Interpolates from the measured gutter width (seamless handoff) to 4px collapsed; the 8px fallback
  * is only for the first paint before `--sm-sb-gutter` is measured.
  */
-const SIDE_MENU_SCROLL_PAD_RIGHT = `calc(var(--sm-sb-gutter, 12px) - (var(--sm-sb-gutter, 12px) - 0.25rem) * var(--sm-collapse, 0))`;
+const SIDE_MENU_SCROLL_PAD_RIGHT = `calc(var(--sm-sb-gutter, 8px) - (var(--sm-sb-gutter, 8px) - 0.25rem) * var(--sm-collapse, 0))`;
 /**
  * Hover chevron: its 16px width follows --sm-label-opacity so an invisible chevron never holds width
  * mid-drag and pushes the row's clip edge into the icon. Opacity stays class-driven (hover-only).
@@ -431,7 +431,7 @@ export function SideMenu({
     const el = rootRef.current;
     if (!el) return;
     const probe = document.createElement("div");
-    probe.className = "scrollbar-gutter-stable scrollbar-thin";
+    probe.className = "scrollbar-gutter-stable scrollbar-thumb-on-hover";
     probe.style.cssText =
       "position:absolute;top:-9999px;left:-9999px;width:100px;height:100px;overflow-y:auto;visibility:hidden;";
     document.body.appendChild(probe);
@@ -736,7 +736,7 @@ export function SideMenu({
             // Reserve the gutter only when settled open; during transitions it's dropped so the
             // right padding below can animate the spacing seamlessly (see SIDE_MENU_SCROLL_PAD_RIGHT).
             showReservedGutter
-              ? "scrollbar-gutter-stable scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
+              ? "scrollbar-gutter-stable scrollbar-thumb-on-hover"
               : "scrollbar-none"
           )}
         >

apps/webapp/app/tailwind.css

@@ -353,6 +353,44 @@
   scrollbar-gutter: stable;
 }
 
+/* Fade the thumb in only while the pointer is in the scroll area. Uses
+   ::-webkit-scrollbar (no scrollbar-width) so Chrome keeps a classic always-present
+   bar to reveal, not the auto-hiding overlay; Firefox falls back to standard props.
+   Thumb color is a registered @property so it can transition. */
+@property --sm-sb-thumb {
+  syntax: "<color>";
+  initial-value: transparent;
+  inherits: true;
+}
+
+@utility scrollbar-thumb-on-hover {
+  transition: --sm-sb-thumb 200ms ease;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--sm-sb-thumb);
+    /* transparent border + padding-box clip = thinner thumb, inset from the channel edges */
+    border: 2px solid transparent;
+    border-radius: 9999px;
+    background-clip: padding-box;
+  }
+
+  @supports (-moz-appearance: none) {
+    scrollbar-width: thin;
+    scrollbar-color: var(--sm-sb-thumb) transparent;
+  }
+
+  &:hover {
+    --sm-sb-thumb: var(--color-surface-control);
+  }
+}
+
 /* Shared stop list for the animated glow utilities below. The gradient itself
    is assembled per-element so the animated --gradient-angle resolves there. */
 :root {