<!-- source-hash: 18d5b9d31dbc725bcee2ec71984e3fd7 -->
Renders a single data row in a query report table, supporting `default` and `compact` visual variants with automatic tooltip display for truncated cell content.

## Key Components

- **`QueryReportTableRow`** — Main row component that maps over `columns` to render each cell with consistent width, spacing, and typography based on the active `variant`.
- **`TruncatedCell`** — Internal component that detects text overflow on mouse enter and conditionally shows a tooltip with the full value when the content is truncated.

## Usage Example

```typescript
import { QueryReportTableRow } from './query-report-table-row'

const columns = ['name', 'status', 'ticket']
const row = { name: 'Workstation backup failed', status: 'Open', ticket: 'TKT-4821' }

// Default (card-style) variant
<QueryReportTableRow
  row={row}
  columns={columns}
  columnWidth="200px"
  variant="default"
/>

// Compact (table-row-style) variant
<QueryReportTableRow
  row={row}
  columns={columns}
  columnWidth="200px"
  variant="compact"
  className="my-custom-class"
/>
```

## Behavior Notes

- `null` or `undefined` cell values render as `"-"`.
- Truncation detection is lazy — checked only on `mouseEnter` to avoid unnecessary DOM reads on render.
- Tooltip is suppressed entirely when text fits within its container (`open={false}`), preventing empty tooltip flashes.
- Column widths are applied via inline `style` to support dynamic values from parent layout logic.