Mobile Responsiveness (v8.2.8)

Steps

1. Set viewport to 375px (iPhone SE)
2. Test all pages listed below
3. Repeat at 430px (iPhone Pro Max)
4. Repeat at 768px (iPad portrait)
5. Repeat at 1024px (iPad landscape / laptop)
6. Repeat at 1440px (desktop)

Verify (15 checks)

• 375px — Login: form centered, no horizontal scroll, inputs full-width
• 375px — Dashboard: document rows tappable (full-row tap target), action icons visible without hover
• 375px — Dashboard: stat carousel scrolls horizontally (overflow-x-auto), no clipping
• 375px — PDF Viewer: auto-fits to width, mobile toolbar sidebar visible, no horizontal overflow
• 375px — Share Modal: stacks to single column, all fields accessible without zooming
• 375px — Settings: sidebar hidden, content full-width, tabs or accordion for sections
• 375px — Contracts: table columns hidden (only name + status visible), signer form single-column, timeline overflow-x-auto
• 375px — Data Room detail: AppNavbar visible, document list stacks correctly
• 375px — Sign portal: grid collapses to single column, signature canvas full-width
• 375px — NDA gate: form fields full-width, signature area tappable
• 768px — Dashboard: two-column stat grid, document table shows all columns
• 768px — Settings: sidebar may appear or remain as top tabs
• 1024px — Full sidebar visible (w-64), bottom nav hidden
• 1024px — All table columns visible (no hidden columns on desktop)
• 1440px — Layout max-width container centered, no over-stretched content

Steps

1. Tap through key workflows: login, upload, view document, share
2. Check touch target sizes
3. Test swipe/scroll gestures

Verify (7 checks)

• All interactive elements have minimum 44x44px tap target
• Bottom nav tap targets are at least 44px tall
• PDF page scroll is smooth and does not conflict with swipe navigation
• Modals (ShareModal, NDAModal) can be scrolled on small screens
• Dropdowns open correctly and are dismissible via tap outside
• No accidental double-tap zoom on buttons or inputs (fast-tap works)
• Signature canvas on mobile is large enough to sign with finger

Steps

1. Navigate to /settings
2. Open each settings section

Verify (8 checks)

• Settings layout switches to flex-col on mobile (sidebar stacks above content)
• Settings navigation visible and scrollable on mobile
• Profile form fields full-width
• Branding color pickers usable on mobile
• NDA template list readable in single-column
• API keys table has overflow-x-auto (no layout break)
• Integrations cards stack vertically
• SMS notification toggles accessible and tappable

Steps

1. Navigate to /admin
2. Check user table and audit log tables

Verify (4 checks)

• Admin tables wrapped in overflow-x-auto (no horizontal page overflow)
• User rows tappable or have visible action buttons
• Audit log table readable (may hide non-essential columns)
• Admin page header and nav accessible on mobile

Steps

1. Navigate to Contracts page
2. Open a contract to view its signing timeline

Verify (5 checks)

• Contracts table: only name and status columns visible on mobile
• Action icons still accessible (not clipped off-screen)
• Signer form on contract creation collapses to single-column
• Signing timeline in contract detail uses overflow-x-auto (not broken layout)
• Contract status badges (Pending/Signed/Cancelled) styled correctly at 375px