Implement **Sprint 6.12.1 – Global DataTable Responsive Fix**

Goal:
Fix all DataTable layouts so they never overflow outside the content area.

Problem:
Training Records page currently overflows horizontally.
Pagination is partially outside the viewport.
Some table columns push the layout beyond the available width.

This fix must apply to ALL DataTable pages, including:

- Training Records
- Pending Review
- Employee Directory
- Users
- Reports
- Any reusable DataTable component

Requirements:

1. Every page container must use:

```tsx
className = "flex-1 min-w-0";
```

2. Every Card containing tables:

```tsx
overflow - hidden;
```

3. Every table wrapper:

```tsx
<div className="w-full overflow-x-auto">
```

4. Table:

```tsx
<Table className="min-w-full">
```

Do not allow page-level overflow.

5. Pagination

Must stay inside container.

Recommended:

```tsx
flex;
flex - wrap;
justify - between;
items - center;
gap - 4;
```

6. Search section

Use

```tsx
w-full max-w-sm
```

instead of fixed widths.

7. Certificate column

Use fixed width.

Image

```tsx
w - 20;
h - 20;
object - cover;
```

8. Mobile

Only table scrolls.

Entire page must never scroll horizontally.

9. Desktop

Table fits inside content container.

10. Audit all pages using reusable DataTable components.

Files likely involved:

- src/components/data-table/\*
- src/components/ui/table.tsx
- src/features/training-records/\*
- src/features/pending-review/\*
- src/features/users/\*
- src/features/employee-directory/\*
- src/features/reports/\*
- src/components/layout/page-container.tsx

Output Review:

docs/sprint-6-12-1-responsive-datatable-review.md

Include:

- Pages checked
- Files changed
- Responsive fixes
- Overflow fixes
- Manual regression checklist

Return complete code changes.