export const DASHBOARD_RECORD_TOOLTIP_UI = {
  content: 'z-50 h-auto overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-none ring-0 data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
  text: 'truncate text-primary-foreground'
} as const

// `w-[calc(100vw-1rem)]` makes dialogs shrink on small screens (never overflow
// the viewport) while `max-w-*` (applied by dashboardDialogUi) caps the desktop size.
const DASHBOARD_DIALOG_CONTENT_CLASS = 'grid w-[calc(100vw-1rem)] max-h-none gap-4 divide-y-0 overflow-visible border border-border bg-background p-6 shadow-lg ring-0'

export const dashboardDialogUi = (maxWidth: 'max-w-lg' | 'max-w-2xl') => ({
  overlay: 'bg-black/80',
  content: `${DASHBOARD_DIALOG_CONTENT_CLASS} ${maxWidth}`
})

export const DASHBOARD_RECORDS_MODAL_UI = dashboardDialogUi('max-w-2xl')