# AI interface is responsive across device sizes

- **Pattern:** `ab-000349` (`ai-ux-patterns.advanced-patterns.responsive-ai-ui`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-000349
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-000349)

## Why it matters

Mobile traffic to SaaS and AI products routinely exceeds 40% of sessions. An AI chat interface with a fixed-width sidebar, clipped input area, or sub-44px touch targets fails WCAG 2.2 SC 1.4.10 (Reflow) — content must reflow at 320px without horizontal scrolling. Beyond compliance, a chat UI that is not usable on mobile excludes users on lower-powered devices who rely on it most. Fixed sidebars that overlap the conversation area on small screens are the single most common failure mode and are trivially fixable with a single conditional CSS class.

## Severity rationale

High because an unusable mobile layout blocks a substantial portion of real users from the product's core function, not merely a degraded experience.

## Remediation

Implement sidebar collapse for viewports under 768px using a toggle button in the mobile header. Verify the chat input area and message list are scrollable without horizontal overflow. All action buttons (copy, regenerate, stop) must be at least 44×44px to meet WCAG touch target requirements.

```tsx
// src/components/chat/ChatLayout.tsx
const [sidebarOpen, setSidebarOpen] = useState(false)

<div className="flex h-screen overflow-hidden">
  <aside className={[
    'fixed inset-y-0 left-0 z-50 w-64 bg-background border-r transition-transform',
    sidebarOpen ? 'translate-x-0' : '-translate-x-full',
    'md:relative md:translate-x-0',
  ].join(' ')}>
    <ConversationList />
  </aside>

  <main className="flex-1 flex flex-col min-w-0 overflow-hidden">
    <header className="md:hidden flex items-center gap-2 p-3 border-b">
      <button
        onClick={() => setSidebarOpen(true)}
        className="p-2" /* 44px touch target via padding */
      >
        <MenuIcon className="w-5 h-5" />
      </button>
    </header>
    <MessageList className="flex-1 overflow-y-auto" />
    <ChatInput className="shrink-0" />
  </main>
</div>
```

## Detection

- **ID:** `responsive-ai-ui`
- **Severity:** `high`
- **What to look for:** Count all AI-specific UI components (chat input, message list, sidebar, action buttons). For each, enumerate the responsive breakpoints used: `sm:`, `md:`, `lg:` classes or CSS media queries. Check at least 3 areas: (1) chat input area usability on mobile, (2) sidebar collapse behavior, (3) message bubble overflow handling. Verify action buttons (regenerate, copy, feedback) remain touch-accessible at minimum 44x44px tap targets.
- **Pass criteria:** The AI chat interface is usable on mobile: the input area is accessible, the conversation renders without overflow, and the sidebar collapses appropriately on screens under 768px. At least 3 responsive adaptations must be present. Report even on pass: "X of Y AI components have responsive breakpoints."
- **Fail criteria:** The chat interface assumes desktop viewport — fixed-width sidebars overlap content on mobile, the input area is not scrollable or is clipped on small screens, or action buttons on messages are not touch-accessible.
- **Skip (N/A) when:** Never — responsiveness applies to all web-based AI interfaces.
- **Detail on fail:** `"AI chat sidebar has fixed width with no mobile collapse — overlaps main conversation area on screens <768px. Chat input area not tested for mobile keyboard interaction."`.
- **Remediation:** Mobile AI usage is significant. The chat interface must work on phones.

  ```tsx
  // Responsive sidebar pattern
  const [sidebarOpen, setSidebarOpen] = useState(false)

  <div className="flex h-screen">
    {/* Sidebar — hidden on mobile, visible on desktop */}
    <aside className={`
      fixed inset-y-0 left-0 z-50 w-64 bg-background border-r
      transform transition-transform duration-200
      ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
      md:relative md:translate-x-0
    `}>
      {/* Conversation list */}
    </aside>

    {/* Main chat area */}
    <main className="flex-1 flex flex-col min-w-0">
      {/* Mobile header with sidebar toggle */}
      <header className="md:hidden flex items-center p-3 border-b">
        <button onClick={() => setSidebarOpen(true)}>
          <MenuIcon className="w-5 h-5" />
        </button>
      </header>
      {/* Chat messages and input */}
    </main>
  </div>
  ```

- **Cross-reference:** Full mobile responsiveness testing across all application components is covered in the Mobile Responsiveness Audit.

---

## External references

- wcag 1.4.10

Taxons: user-experience, accessibility

HTML version: https://auditbuffet.com/patterns/ab-000349