AI interface is responsive across device sizes

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.

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.

// 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>

• 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.

  // 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.