<!-- source-hash: 51f59ce973c05b3bf63e194d662e8fdd -->
Renders the header row for a query report table, displaying column names with overflow-aware tooltips for truncated labels.

## Key Components

- **`QueryReportTableHeader`** — Main exported component that renders a row of column header cells, supporting `default` and `compact` layout variants
- **`TruncatedHeaderCell`** — Internal component that detects text overflow on hover and conditionally shows a tooltip with the full column name

## Props (`QueryReportTableHeaderProps`)

| Prop | Type | Description |
|------|------|-------------|
| `columns` | `string[]` | List of column names to render |
| `columnWidth` | `number` | Fixed pixel width applied to each header cell |
| `variant` | `'default' \| 'compact'` | Layout variant; `compact` adds vertical padding and a bottom border |
| `className` | `string` | Optional additional CSS classes |

## Usage Example

```typescript
import { QueryReportTableHeader } from './query-report-table-header'

<QueryReportTableHeader
  columns={['hostname', 'ip_address', 'os_version', 'last_seen']}
  columnWidth={160}
  variant="compact"
  className="bg-ods-surface"
/>
```

## Behavior Notes

- Column widths are fixed (`shrink-0`) to align with table body cells
- Truncation is detected lazily on `mouseEnter` by comparing `scrollWidth` vs `clientWidth`, avoiding unnecessary DOM reads on render
- Tooltips are suppressed (`open={false}`) when the text is not truncated, preventing empty tooltip flashes
- Column labels are styled in uppercase monospace with secondary text color (`text-ods-text-secondary`)