# CRM Responsive Report

**Date:** 2026-07-26

## Breakpoints tested (design intent)

| Breakpoint | Layout behavior |
|------------|-----------------|
| Desktop (≥1024px) | Fixed sidebar 256px, full table, multi-column dashboards |
| Tablet (768–1023px) | Collapsible nav groups, horizontal scroll tables, 2-col stat grid |
| Mobile (<768px) | Hamburger → drawer sidebar, stacked forms, single-col stats |

## Component responsiveness

| Component | Desktop | Tablet | Mobile |
|-----------|---------|--------|--------|
| `CrmPortalShell` | Sidebar visible | Sidebar visible | Drawer overlay |
| `CrmTablePage` | Full table | `overflow-x-auto` min-width 640px | Horizontal scroll + compact toolbar |
| `CrmStatGrid` | 4 columns (`xl:grid-cols-4`) | 2 columns | 1–2 columns |
| Kanban board | Multi-column row | Horizontal scroll columns | Swipe scroll columns |
| Dialog / Drawer | Center dialog / side drawer | Full-width dialog | Full-screen friendly padding |
| Customers split view | 2-column grid | 2-column | Stacked sections |

## RTL

- All layouts use logical RTL flow (Persian copy, right-aligned nav)
- Search icon positioned `right-3` for RTL input padding
- Breadcrumbs and sidebar labels right-aligned

## Dark mode

- Uses global `ColorModeProvider` toggle in shell
- CRM tokens defined in `:root` and `.dark` in `globals.css`
- Surfaces: `--surface`, `--canvas`, `--border` from platform DS

## Accessibility

- Dialog: `role="dialog"`, `aria-modal`, Escape to close
- Loading: `LoadingState` with visible label
- Tables: semantic `<table>` via `DataTable`
- Icon buttons: `aria-label` on edit/delete/complete actions
- Sort select: `aria-label="مرتب‌سازی"`

## Touch targets

- Mobile menu button 44px (`size="icon"`)
- Kanban stage move buttons padded for touch
- Pagination buttons min height ~36px

## Performance notes

- Lists fetch up to 500 rows per resource (backend max page_size)
- Dashboard parallel `Promise.all` for counts
- TanStack Query caching per `["crm", tenantId, resource]`

## Gaps / follow-ups

1. Kanban drag-and-drop not implemented — uses button stage move (touch-friendly alternative)
2. Calendar dashboard is list view, not full calendar grid (no calendar API)
3. Virtualized tables not added — acceptable for ≤500 row client cap