Improve shadow scrollbar behavior

app/scripts/components/common/dropdown-scrollable.tsx

@@ -8,7 +8,8 @@ import {
   DropMenu,
   DropTitle
 } from '@devseed-ui/dropdown';
-import { ShadowScrollbar } from '@devseed-ui/shadow-scrollbar';
+
+import { ShadowScrollbarImproved as ShadowScrollbar } from '$components/common/shadow-scrollbar-improved';
 
 /**
  * Override Dropdown styles to play well with the shadow scrollbar.

app/scripts/components/common/mapbox/layer-legend.tsx

@@ -10,7 +10,6 @@ import {
 } from '@devseed-ui/theme-provider';
 import { CollecticonCircleInformation } from '@devseed-ui/collecticons';
 import { Toolbar, ToolbarIconButton } from '@devseed-ui/toolbar';
-import { ShadowScrollbar } from '@devseed-ui/shadow-scrollbar';
 import { followCursor } from 'tippy.js';
 import { scaleLinear } from 'd3';
 
@@ -28,6 +27,8 @@ import {
   WidgetItemHGroup
 } from '$styles/panel';
 
+import { ShadowScrollbarImproved as ShadowScrollbar } from '$components/common/shadow-scrollbar-improved';
+
 interface LayerLegendCommonProps {
   id: string;
   title: string;

app/scripts/components/common/mapbox/map-options/index.tsx

@@ -10,7 +10,6 @@ import {
 } from '@devseed-ui/dropdown';
 import { Button, createButtonStyles } from '@devseed-ui/button';
 import { FormSwitch } from '@devseed-ui/form';
-import { ShadowScrollbar } from '@devseed-ui/shadow-scrollbar';
 import { Subtitle } from '@devseed-ui/typography';
 
 import {
@@ -22,6 +21,8 @@ import { MapOptionsProps } from './types';
 import { projectionsList } from './utils';
 import { BASEMAP_STYLES } from './basemaps';
 
+import { ShadowScrollbarImproved as ShadowScrollbar } from '$components/common/shadow-scrollbar-improved';
+
 const DropHeader = styled.div`
   padding: ${glsp()};
   box-shadow: inset 0 -1px 0 0 ${themeVal('color.base-100a')};

app/scripts/components/common/shadow-scrollbar-improved.tsx

@@ -0,0 +1,41 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { ShadowScrollbar } from '@devseed-ui/shadow-scrollbar';
+
+export const ShadowScrollbarImproved = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof ShadowScrollbar>
+>(function ShadowScrollbarImprovedCmp(props, ref) {
+  // eslint-disable-next-line react/prop-types
+  const { scrollbarsProps, ...rest } = props;
+  const [autoHide, setAutoHide] = useState(true);
+
+  const mouseEnter = useCallback(() => setAutoHide(false), []);
+
+  useEffect(() => {
+    setAutoHide(false);
+  }, []);
+
+  useEffect(() => {
+    if (autoHide) return;
+
+    const timer = setTimeout(() => {
+      setAutoHide(true);
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, [autoHide]);
+
+  const shadowScrollbarProps = {
+    ...(scrollbarsProps ?? {}),
+    autoHide
+  };
+
+  return (
+    <ShadowScrollbar
+      ref={ref}
+      onMouseEnter={mouseEnter}
+      scrollbarsProps={shadowScrollbarProps}
+      {...rest}
+    />
+  );
+});

app/scripts/styles/panel.tsx

@@ -7,11 +7,12 @@ import {
 } from '@devseed-ui/theme-provider';
 import { Overline } from '@devseed-ui/typography';
 import { Button } from '@devseed-ui/button';
-import { ShadowScrollbar } from '@devseed-ui/shadow-scrollbar';
 
 import { variableGlsp } from './variable-utils';
 import { VarProse } from './variable-components';
 
+import { ShadowScrollbarImproved as ShadowScrollbar } from '$components/common/shadow-scrollbar-improved';
+
 const panelWidth = {
   xsmall: '20rem',
   small: '22rem',