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>