import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';

/**
 * Tablet-safe wrapper for dense `.data-table.stack` tables: rows stack under 768 px (the table's own behaviour) and the table
 * scrolls horizontally from 768 px up when its columns are wider than the pane, instead of widening the page.
 * (A scroll container offsets `position: sticky` headers, so tables inside it keep a static header.)
 */
export function ScrollX({ children, className }: { children: ReactNode; className?: string }) {
  // `relative`: absolutely positioned descendants (sr-only captions, quality bars) must take the wrapper as containing block, or they escape its clip and widen the page.
  return <div className={cn('relative md:overflow-x-auto md:scrollbar-thin', className)}>{children}</div>;
}