alla-tms/plans/responsive-datatable-review.md

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:

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

2. Every Card containing tables:

overflow - hidden;

3. Every table wrapper:

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

4. Table:

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

Do not allow page-level overflow.

5. Pagination

Must stay inside container.

Recommended:

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

6. Search section

Use

w-full max-w-sm

instead of fixed widths.

7. Certificate column

Use fixed width.

Image

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.