mega-plant/components/ScrollFade.tsx

// Right-edge fade telling you a wide table scrolls sideways.
// pointer-events-none so it never swallows a tap on the row underneath.
export function ScrollFade({ className = "" }: { className?: string }) {
  return (
    <div
      aria-hidden="true"
      className={`pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-white to-transparent dark:from-surface ${className}`}
    />
  );
}