Responsive Design

All three client-facing apps — Dashboard, DM Portal, and Manage — must be fully responsive across mobile, tablet, and desktop. The layout adapts at two key breakpoints.

Breakpoints

Content area maximum width: 1280px, centred, full-width below that.

Shell Layout

┌─────────────────────────────────────────────────────────────┐
│  [≡] Leadmetrics      [Search]       [🔔] [Theme] [User ▾] │  ← Header (mobile + desktop)
├──────────────────────┬──────────────────────────────────────┤
│                      │                                      │
│  Sidebar             │  Content area                        │
│  (hidden on mobile;  │  max-w-[1280px], scrollable          │
│   icon-only on md;   │                                      │
│   full on lg)        │                                      │
│                      │                                      │
└──────────────────────┴──────────────────────────────────────┘

Mobile (< 768px)

• Sidebar is hidden.
• The header shows a hamburger button (☰) on the left.
• Tapping the hamburger opens a Sheet (slide-in drawer from the left) containing the full sidebar navigation.
• The Sheet closes when a nav link is tapped or the overlay is clicked.
• The content area spans the full width with px-4 horizontal padding.

Tablet (768px – 1023px)

• Sidebar is visible but collapsed to icon-only width (56px).
• Each nav item shows only the icon; a Tooltip reveals the label on hover.
• The sidebar can be expanded by clicking a toggle chevron at the bottom.

Desktop (≥ 1024px)

• Sidebar is fully visible at 240px fixed width.
• Nav items show icon + label side-by-side.
• The sidebar can be collapsed to icon-only using a toggle chevron.
• Collapse state is persisted to localStorage so it survives page refreshes.

Header

Fixed to the top of the viewport on all screen sizes. Height: 56px.

The global search bar collapses to a search icon on mobile; tapping it opens a full-screen search modal (Command Menu via cmdk).

Sidebar

Structure

┌──────────────────────┐
│  ⬡ Leadmetrics       │  ← Logo / app name
├──────────────────────┤
│  [Nav items]         │  ← Primary navigation (see per-app sections below)
│                      │
│  ── divider ──       │
│  [Secondary items]   │  ← Settings, Help
├──────────────────────┤
│  [Agent status pill] │  ← Live: N agents running (Dashboard + DM Portal only)
│  [User avatar + name]│
│  [Collapse toggle]   │
└──────────────────────┘

Dashboard nav items

DM Portal nav items

Manage nav items

Page-level Responsive Patterns

Data tables

• Desktop: Full TanStack Table with all columns visible.
• Tablet: Hide low-priority columns (e.g. created date, duration). Column visibility toggle button.
• Mobile: Collapse table rows into card list view. Each card shows the primary fields only; tap card to open detail.

Split-pane screens (e.g. approval review, activity detail)

• Desktop: True side-by-side split (flex-row). Left: content (60%). Right: metadata + actions (40%).
• Tablet: Tabs (Content | Actions) — single pane with tab switching.
• Mobile: Same as tablet (tabs).

Stat cards / KPI grid

• Desktop: 4-column grid.
• Tablet: 2-column grid.
• Mobile: Single-column stack.

Charts

• Desktop: Full Recharts render at natural size.
• Mobile: Charts use ResponsiveContainer (already default in Recharts). Simplified tooltip on touch. Legend moved below chart if horizontal space is tight.
• Donut/pie charts collapse to a horizontal bar list on screens < 480px.

Forms

• Single-column on all screen sizes (already narrow). Max width 640px, centred on desktop.
• Attachments drag-and-drop degrades gracefully to a file picker button on mobile (no drag events on touch).

Touch & Interaction

• Minimum tap target size: 44×44px (WCAG 2.5.5).
• All hover states also have focus-visible states for keyboard navigation.
• Swipe-to-close on mobile Sheet (sidebar drawer).

Scrolling

• The sidebar scrolls independently of the content area on all screen sizes.
• The content area scrolls vertically within its own container (overflow-y-auto).
• Sticky sub-headers (e.g. tab bars in Campaign Detail D4, filter bars in Approvals D5) stay fixed at the top of the content area while scrolling.
• The main header is always fixed at the top of the viewport (position: sticky top-0 z-50).