<!-- source-hash: e2dcd0d341956fecb4817f070e40d10a -->
Compact React component for displaying device name and organization in a stacked layout, optimized for use within table cells.

## Key Components

### `DeviceCardCompactProps`
Extends `React.HTMLAttributes<HTMLDivElement>` with two optional fields:

| Prop | Type | Description |
|------|------|-------------|
| `deviceName` | `string \| null` | Primary label shown in larger text |
| `organization` | `string \| null` | Secondary label shown in smaller muted text |

### `DeviceCardCompact`
A display-only component that renders device info in a vertical flex column. Performs null-safety checks against `null`, `undefined`, `'-'`, and the string `'null'`. Returns an empty fragment when both values are absent.

## Usage Example

```typescript
// Basic usage in a table cell
<DeviceCardCompact
  deviceName="DESKTOP-ABC123"
  organization="Acme Corp"
/>

// Handles missing/invalid values gracefully - renders nothing
<DeviceCardCompact
  deviceName={null}
  organization="-"
/>

// With custom className
<DeviceCardCompact
  deviceName="SERVER-01"
  organization={null}
  className="max-w-[200px]"
/>
```

## Behavior Notes

- **Empty state**: Returns `<></>` when both props are falsy, `'-'`, or `'null'`
- **Partial render**: Renders only the available field when one value is missing
- **Overflow**: Both labels use `truncate` with a `title` attribute for full text on hover
- **Typography**: Device name renders at `16px` (`ods-text-primary`); organization at `14px` (`ods-text-secondary`)