Add faded scroll overflow to admin menu

src/admin/AdminNavClient.tsx

@@ -20,6 +20,7 @@ import { FaRegClock } from 'react-icons/fa';
 import AdminAppInfoIcon from './AdminAppInfoIcon';
 import AdminInfoNav from './AdminInfoNav';
 import LinkWithLoaderBadge from '@/components/LinkWithLoaderBadge';
+import FadedScroll from '@/components/FadedScroll';
 
 // Updates from past 5 minutes considered recent
 const areTimesRecent = (dates: Date[]) => dates
@@ -69,10 +70,11 @@ export default function AdminNavClient({
             'flex gap-2 pb-3',
             'border-b border-gray-200 dark:border-gray-800',
           )}>
-            <div className={clsx(
-              'flex gap-0.5 md:gap-1.5 -mx-1',
-              'grow overflow-x-auto',
-            )}>
+            <FadedScroll
+              className="grow -mx-1"
+              classNameContent="flex gap-0.5 md:gap-1.5"
+              direction="horizontal"
+            >
               {items.map(({ label, href, count }) =>
                 <LinkWithLoaderBadge
                   key={label}
@@ -88,7 +90,7 @@ export default function AdminNavClient({
                   {count > 0 &&
                     <span>({count})</span>}
                 </LinkWithLoaderBadge>)}
-            </div>
+            </FadedScroll>
             <LinkWithIconLoader
               href={includeInsights
                 ? PATH_ADMIN_INSIGHTS

src/components/FadedScroll.tsx

@@ -13,11 +13,12 @@ export default function FadedScroll({
   direction = 'vertical',
   fadeHeight = 24,
   hideScrollbar,
+  className,
   classNameContent,
   children,
   ...props
 }: HTMLAttributes<HTMLDivElement> & {
-  ref: RefObject<HTMLDivElement | null>
+  ref?: RefObject<HTMLDivElement | null>
   direction?: 'vertical' | 'horizontal'
   fadeHeight?: number
   classNameContent?: string
@@ -57,6 +58,12 @@ export default function FadedScroll({
   return <div
     {...props}
     ref={containerRef}
+    className={clsx(
+      isVertical
+        ? 'overflow-y-hidden'
+        : 'overflow-x-hidden',
+      className,
+    )}
     style={{ maskImage }}
   >
     <div