diff --git a/apps/builder/__tests__/app-tab.test.tsx b/apps/builder/__tests__/app-tab.test.tsx
new file mode 100644
index 000000000..9b75eb347
--- /dev/null
+++ b/apps/builder/__tests__/app-tab.test.tsx
@@ -0,0 +1,131 @@
+import type { ComponentProps, ReactNode } from "react"
+import { act } from "react"
+import { createRoot, type Root } from "react-dom/client"
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest"
+
+vi.mock("next/link", () => ({
+  default: ({
+    children,
+    href,
+    ...rest
+  }: {
+    children: ReactNode
+    href: string
+    className?: string
+  }) => (
+    <a href={href} {...rest}>
+      {children}
+    </a>
+  ),
+}))
+
+const { AppTab } = await import("@/components/app-tab")
+
+type Tab = ComponentProps<typeof AppTab>["tabs"][number]
+
+const TABS: Tab[] = [
+  { label: "General", href: "/settings/general", isActive: true },
+  { label: "Channels", href: "/settings/channels", isActive: false },
+  { label: "Integrations", href: "/settings/integrations", isActive: false },
+  { label: "Admins", href: "/settings/admins", isActive: false },
+  { label: "Inbox teams", href: "/settings/inbox-teams", isActive: false },
+]
+
+describe("AppTab", () => {
+  let container: HTMLDivElement
+  let root: Root
+
+  const render = (tabs: Tab[]) => {
+    act(() => {
+      root.render(<AppTab tabs={tabs} />)
+    })
+  }
+
+  const strip = () => {
+    const anchor = container.querySelector("a")
+    return anchor?.parentElement ?? null
+  }
+
+  beforeEach(() => {
+    Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+    container = document.createElement("div")
+    document.body.append(container)
+    root = createRoot(container)
+  })
+
+  afterEach(() => {
+    act(() => {
+      root.unmount()
+    })
+    container.remove()
+  })
+
+  test("renders every tab", () => {
+    render(TABS)
+
+    const labels = Array.from(container.querySelectorAll("a")).map(
+      (anchor) => anchor.textContent,
+    )
+    expect(labels).toEqual([
+      "General",
+      "Channels",
+      "Integrations",
+      "Admins",
+      "Inbox teams",
+    ])
+  })
+
+  test("scrolls the strip instead of overflowing the page", () => {
+    render(TABS)
+
+    const className = strip()?.className ?? ""
+    expect(className).toContain("overflow-x-auto")
+    expect(className).toContain("flex-nowrap")
+  })
+
+  test("keeps each tab at its natural width so labels never squeeze", () => {
+    render(TABS)
+
+    for (const anchor of Array.from(container.querySelectorAll("a"))) {
+      expect(anchor.className).toContain("shrink-0")
+      expect(anchor.className).toContain("whitespace-nowrap")
+    }
+  })
+
+  test("tightens padding on small screens and restores it from md up", () => {
+    render(TABS)
+
+    const className = strip()?.className ?? ""
+    expect(className).toContain("px-4")
+    expect(className).toContain("md:px-8")
+    expect(className).toContain("gap-4")
+    expect(className).toContain("md:gap-8")
+  })
+
+  test("marks the active tab", () => {
+    render(TABS)
+
+    const active = Array.from(container.querySelectorAll("a")).find((anchor) =>
+      anchor.className.includes("border-neutral-700"),
+    )
+    expect(active?.textContent).toBe("General")
+  })
+
+  test("renders a disabled tab as a non-link", () => {
+    render([
+      { label: "General", href: "/settings/general", isActive: true },
+      {
+        label: "Locked",
+        href: "/settings/locked",
+        isActive: false,
+        disabled: true,
+      },
+    ])
+
+    const anchors = Array.from(container.querySelectorAll("a")).map(
+      (anchor) => anchor.textContent,
+    )
+    expect(anchors).toEqual(["General"])
+    expect(container.textContent).toContain("Locked")
+  })
+})
diff --git a/apps/builder/__tests__/chat-layout-mobile.test.tsx b/apps/builder/__tests__/chat-layout-mobile.test.tsx
new file mode 100644
index 000000000..d379a4802
--- /dev/null
+++ b/apps/builder/__tests__/chat-layout-mobile.test.tsx
@@ -0,0 +1,158 @@
+import { setViewportWidth } from "@chatbotx.io/vitest-config/setup-dom"
+import { act } from "react"
+import { createRoot, type Root } from "react-dom/client"
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest"
+
+vi.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => key,
+}))
+
+vi.mock("@/features/chat/chat-realtime", () => ({
+  ChatRealtime: () => <div data-testid="realtime" />,
+}))
+
+vi.mock("@/features/chat/chat-panes", () => ({
+  ConversationListPane: () => <div data-testid="list-pane" />,
+  MessageThreadPane: ({
+    onBack,
+    onOpenContact,
+  }: {
+    onBack?: () => void
+    onOpenContact?: () => void
+  }) => (
+    <div data-testid="thread-pane">
+      {onBack && (
+        <button data-testid="back" onClick={onBack} type="button">
+          back
+        </button>
+      )}
+      {onOpenContact && (
+        <button
+          data-testid="open-contact"
+          onClick={onOpenContact}
+          type="button"
+        >
+          contact
+        </button>
+      )}
+    </div>
+  ),
+  ContactDetailPane: () => <div data-testid="contact-pane" />,
+}))
+
+const storeState = {
+  conversations: [] as unknown[],
+  isFirstLoadConversation: false,
+  isLoadingConversation: false,
+  isBootstrappingUrlConversation: false,
+  activeConversationId: null as string | null,
+  setActiveConversationId: vi.fn((id: string | null) => {
+    storeState.activeConversationId = id
+  }),
+}
+
+vi.mock("@/features/chat/store/chat-store-provider", () => ({
+  useChatStore: (selector: (state: typeof storeState) => unknown) =>
+    selector(storeState),
+}))
+
+const { ChatLayout } = await import("@/features/chat/chat-layout")
+
+describe("ChatLayout", () => {
+  let container: HTMLDivElement
+  let root: Root
+
+  const render = () => {
+    act(() => {
+      root.render(<ChatLayout workspaceId="w1" />)
+    })
+  }
+
+  const find = (id: string) =>
+    container.querySelector<HTMLElement>(`[data-testid="${id}"]`)
+
+  beforeEach(() => {
+    Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+    storeState.activeConversationId = null
+    storeState.setActiveConversationId.mockClear()
+    container = document.createElement("div")
+    document.body.append(container)
+    root = createRoot(container)
+  })
+
+  afterEach(() => {
+    act(() => {
+      root.unmount()
+    })
+    container.remove()
+    setViewportWidth(1024)
+  })
+
+  test("shows only the conversation list on mobile with nothing selected", () => {
+    setViewportWidth(375)
+    render()
+
+    expect(find("list-pane")).not.toBeNull()
+    expect(find("thread-pane")).toBeNull()
+    // The three-column group must not mount on a phone.
+    expect(container.querySelector("[data-panel-group]")).toBeNull()
+  })
+
+  test("shows the thread with a back control once a conversation is active", () => {
+    storeState.activeConversationId = "c1"
+    setViewportWidth(375)
+    render()
+
+    expect(find("thread-pane")).not.toBeNull()
+    expect(find("list-pane")).toBeNull()
+    expect(find("back")).not.toBeNull()
+  })
+
+  test("back clears the active conversation, returning to the list", () => {
+    storeState.activeConversationId = "c1"
+    setViewportWidth(375)
+    render()
+
+    act(() => {
+      find("back")?.dispatchEvent(
+        new MouseEvent("click", { bubbles: true, cancelable: true }),
+      )
+    })
+
+    expect(storeState.setActiveConversationId).toHaveBeenCalledWith(null)
+  })
+
+  test("offers the contact panel behind a control instead of a third column", () => {
+    storeState.activeConversationId = "c1"
+    setViewportWidth(375)
+    render()
+
+    expect(find("open-contact")).not.toBeNull()
+    // The sheet is closed until asked for, so the panel is not mounted yet.
+    expect(find("contact-pane")).toBeNull()
+  })
+
+  test("renders all three panes side by side from md up", () => {
+    storeState.activeConversationId = "c1"
+    setViewportWidth(1440)
+    render()
+
+    expect(find("list-pane")).not.toBeNull()
+    expect(find("thread-pane")).not.toBeNull()
+    expect(find("contact-pane")).not.toBeNull()
+    // No mobile-only affordances leak into the desktop layout.
+    expect(find("back")).toBeNull()
+    expect(find("open-contact")).toBeNull()
+  })
+
+  test("keeps the realtime socket mounted in every layout", () => {
+    setViewportWidth(375)
+    render()
+    expect(find("realtime")).not.toBeNull()
+
+    act(() => {
+      setViewportWidth(1440)
+    })
+    expect(find("realtime")).not.toBeNull()
+  })
+})
diff --git a/apps/builder/__tests__/nav-main-mobile.test.tsx b/apps/builder/__tests__/nav-main-mobile.test.tsx
new file mode 100644
index 000000000..3e245e2b6
--- /dev/null
+++ b/apps/builder/__tests__/nav-main-mobile.test.tsx
@@ -0,0 +1,145 @@
+import {
+  SidebarProvider,
+  useSidebar,
+} from "@chatbotx.io/ui/components/ui/sidebar"
+import { setViewportWidth } from "@chatbotx.io/vitest-config/setup-dom"
+import type { ComponentProps, ReactNode } from "react"
+import { act } from "react"
+import { createRoot, type Root } from "react-dom/client"
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest"
+
+vi.mock("next/navigation", () => ({
+  usePathname: () => "/space/w1/inbox",
+}))
+
+vi.mock("next/link", () => ({
+  default: ({ children, href, ...rest }: ComponentProps<"a">) => (
+    <a href={href} {...rest}>
+      {children}
+    </a>
+  ),
+}))
+
+const { NavMain } = await import("@/components/nav-main")
+
+type SidebarState = { openMobile: boolean; isMobile: boolean }
+
+function SidebarStateProbe({
+  onReady,
+  onRead,
+}: {
+  onReady: (open: (value: boolean) => void) => void
+  onRead: (state: SidebarState) => void
+}) {
+  const { openMobile, isMobile, setOpenMobile } = useSidebar()
+  onRead({ openMobile, isMobile })
+  onReady(setOpenMobile)
+  return null
+}
+
+const ITEMS = [
+  { title: "Inbox", url: "/space/w1/inbox" },
+  { title: "Contacts", url: "/space/w1/contacts" },
+]
+
+describe("NavMain on a mobile viewport", () => {
+  let container: HTMLDivElement
+  let root: Root
+  let state: SidebarState | undefined
+  let setOpenMobile: ((value: boolean) => void) | undefined
+
+  const swallowNavigation = (event: Event) => event.preventDefault()
+
+  const renderNav = (children: ReactNode) => {
+    act(() => {
+      root.render(
+        <SidebarProvider>
+          {children}
+          <SidebarStateProbe
+            onRead={(next) => {
+              state = next
+            }}
+            onReady={(setter) => {
+              setOpenMobile = setter
+            }}
+          />
+        </SidebarProvider>,
+      )
+    })
+  }
+
+  const clickLink = (label: string) => {
+    const link = Array.from(container.querySelectorAll("a")).find((anchor) =>
+      anchor.textContent?.includes(label),
+    )
+    if (!link) {
+      throw new Error(`no nav link labelled ${label}`)
+    }
+    act(() => {
+      link.dispatchEvent(
+        new MouseEvent("click", { bubbles: true, cancelable: true }),
+      )
+    })
+  }
+
+  beforeEach(() => {
+    Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+    state = undefined
+    setOpenMobile = undefined
+    container = document.createElement("div")
+    document.body.append(container)
+    root = createRoot(container)
+    // jsdom cannot navigate; without this every link click logs a "Not
+    // implemented" error that has nothing to do with the behaviour under test.
+    document.addEventListener("click", swallowNavigation)
+  })
+
+  afterEach(() => {
+    document.removeEventListener("click", swallowNavigation)
+    act(() => {
+      root.unmount()
+    })
+    container.remove()
+  })
+
+  test("closes the sidebar sheet when a nav link is tapped", () => {
+    setViewportWidth(375)
+    renderNav(<NavMain items={ITEMS} />)
+    expect(state?.isMobile).toBe(true)
+
+    act(() => {
+      setOpenMobile?.(true)
+    })
+    expect(state?.openMobile).toBe(true)
+
+    clickLink("Contacts")
+
+    expect(state?.openMobile).toBe(false)
+  })
+
+  test("closes the sheet for cross-zone links too", () => {
+    setViewportWidth(375)
+    renderNav(<NavMain crossZone items={ITEMS} />)
+
+    act(() => {
+      setOpenMobile?.(true)
+    })
+    expect(state?.openMobile).toBe(true)
+
+    clickLink("Inbox")
+
+    expect(state?.openMobile).toBe(false)
+  })
+
+  test("leaves the desktop sidebar untouched", () => {
+    setViewportWidth(1440)
+    renderNav(<NavMain items={ITEMS} />)
+    expect(state?.isMobile).toBe(false)
+
+    clickLink("Contacts")
+
+    // `openMobile` is not read on desktop; the important part is that the click
+    // handler runs without disturbing the expanded/collapsed rail state.
+    expect(state?.openMobile).toBe(false)
+  })
+})
diff --git a/apps/builder/src/app/layout.tsx b/apps/builder/src/app/layout.tsx
index b5fa321f6..ce534a794 100644
--- a/apps/builder/src/app/layout.tsx
+++ b/apps/builder/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import { UiProvider } from "@chatbotx.io/ui"
-import type { Metadata } from "next"
+import type { Metadata, Viewport } from "next"
 import { NextIntlClientProvider } from "next-intl"
 import { getLocale } from "next-intl/server"
 import type { ReactNode } from "react"
@@ -14,6 +14,15 @@ import "./globals.css"
 import "./themes.css"
 import { DirectionProvider } from "@chatbotx.io/ui/components/ui/direction"
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  // `cover` lets the page paint under the notch/home indicator so
+  // `env(safe-area-inset-*)` reports real values. Sticky mobile chrome
+  // (the workspace header, the inbox composer) relies on those insets.
+  viewportFit: "cover",
+}
+
 export async function generateMetadata(): Promise<Metadata> {
   const { name, faviconUrl } = await getTenantSettings()
 
diff --git a/apps/builder/src/app/space/[workspaceId]/inbox/page.tsx b/apps/builder/src/app/space/[workspaceId]/inbox/page.tsx
index ec4d40865..d52c5ec62 100644
--- a/apps/builder/src/app/space/[workspaceId]/inbox/page.tsx
+++ b/apps/builder/src/app/space/[workspaceId]/inbox/page.tsx
@@ -1,6 +1,7 @@
 import { getIdFromParams } from "@chatbotx.io/utils"
 import { cookies } from "next/headers"
 import { notFound } from "next/navigation"
+import { FullBleed } from "@/components/full-bleed"
 import { ChatLayout } from "@/features/chat/chat-layout"
 import { ChatStoreProvider } from "@/features/chat/store/chat-store-provider"
 import { canViewContactEmailAndPhone } from "@/features/contacts/permissions"
@@ -34,7 +35,7 @@ export default async function InboxPage({ params }: InboxPageProps) {
   )
 
   return (
-    <div className="-m-6">
+    <FullBleed>
       <ChatStoreProvider>
         <InboxStoreProvider workspaceId={workspaceId}>
           <UserStoreProvider workspaceId={workspaceId}>
@@ -59,6 +60,6 @@ export default async function InboxPage({ params }: InboxPageProps) {
           </UserStoreProvider>
         </InboxStoreProvider>
       </ChatStoreProvider>
-    </div>
+    </FullBleed>
   )
 }
diff --git a/apps/builder/src/app/space/[workspaceId]/layout.tsx b/apps/builder/src/app/space/[workspaceId]/layout.tsx
index e65f214b4..fbfb76823 100644
--- a/apps/builder/src/app/space/[workspaceId]/layout.tsx
+++ b/apps/builder/src/app/space/[workspaceId]/layout.tsx
@@ -8,6 +8,7 @@ import {
 } from "@chatbotx.io/business"
 import {
   SidebarInset,
+  SidebarMobileTrigger,
   SidebarProvider,
   SidebarTrigger,
 } from "@chatbotx.io/ui/components/ui/sidebar"
@@ -121,7 +122,20 @@ export default async function WorkspaceLayout({
         workspaceId={workspaceId}
       />
       <SidebarInset>
-        <main className="flex min-w-0 flex-1 flex-col gap-4 p-6">
+        {/*
+          Below `md` the sidebar collapses into a Sheet, and `SidebarTrigger`
+          below is positioned off the inset's inline edge — where nothing can
+          reach it. This bar is the only way in on a phone, so it stays pinned
+          while the page scrolls (the body is the scroll container: the sidebar
+          wrapper is `min-h-svh` with no overflow of its own).
+        */}
+        <header className="sticky top-0 z-20 flex h-12 shrink-0 items-center gap-2 border-b bg-background px-2 pt-[env(safe-area-inset-top)] md:hidden">
+          <SidebarMobileTrigger />
+          <span className="truncate font-medium text-sm">
+            {targetWorkspaceMember.workspace.name}
+          </span>
+        </header>
+        <main className="flex min-w-0 flex-1 flex-col gap-4 p-4 md:p-6">
           <WorkspaceDeletionTabSync
             scheduledForDeletion={scheduledForDeletion}
             workspaceId={workspaceId}
@@ -142,7 +156,7 @@ export default async function WorkspaceLayout({
             {children}
           </CouponTopicStoreProvider>
         </main>
-        <SidebarTrigger className="absolute -inset-s-2 top-3 z-10 border" />
+        <SidebarTrigger className="absolute -inset-s-2 top-3 z-10 hidden border md:inline-flex" />
       </SidebarInset>
     </SidebarProvider>
   )
diff --git a/apps/builder/src/components/app-tab.tsx b/apps/builder/src/components/app-tab.tsx
index d91bf481b..cfb00e167 100644
--- a/apps/builder/src/components/app-tab.tsx
+++ b/apps/builder/src/components/app-tab.tsx
@@ -20,7 +20,9 @@ type AppTabProps = {
 }
 
 function getTabClassName(tab: AppTabProps["tabs"][number]) {
-  const base = "border-b-2 py-6 text-sm"
+  // `shrink-0` + `whitespace-nowrap` keep each tab at its natural width so
+  // the strip overflows (and scrolls) instead of squeezing labels.
+  const base = "shrink-0 whitespace-nowrap border-b-2 py-4 text-sm md:py-6"
   if (tab.disabled) {
     const disabledPresentation =
       tab.disabledPresentation === "normal"
@@ -37,7 +39,14 @@ function getTabClassName(tab: AppTabProps["tabs"][number]) {
 export function AppTab({ tabs }: AppTabProps) {
   return (
     <Card className="py-0">
-      <CardContent className="flex items-center gap-8 px-8">
+      {/*
+        Several surfaces render 5-6 tabs, which cannot fit a phone. Scrolling
+        the strip keeps every tab reachable without pushing the page itself
+        into horizontal overflow. The scrollbar is hidden because the strip
+        sits directly under a card edge, where a persistent bar reads as a
+        rendering artefact; touch scrolling needs no visible track.
+      */}
+      <CardContent className="flex flex-nowrap items-center gap-4 overflow-x-auto px-4 [-ms-overflow-style:none] [scrollbar-width:none] md:gap-8 md:px-8 [&::-webkit-scrollbar]:hidden">
         {tabs.map((tab) =>
           tab.disabled ? (
             <Tooltip key={tab.href}>
diff --git a/apps/builder/src/components/full-bleed.tsx b/apps/builder/src/components/full-bleed.tsx
new file mode 100644
index 000000000..1805dd9c3
--- /dev/null
+++ b/apps/builder/src/components/full-bleed.tsx
@@ -0,0 +1,23 @@
+import { cn } from "@chatbotx.io/ui/lib/utils"
+import type { ReactNode } from "react"
+
+type FullBleedProps = {
+  children: ReactNode
+  className?: string
+}
+
+/**
+ * Cancels the workspace shell's content padding so a page can run edge to edge.
+ *
+ * The shell (`app/space/[workspaceId]/layout.tsx`) pads its `<main>` with
+ * `p-4 md:p-6`. Surfaces that own the whole viewport — the inbox, primarily —
+ * need that padding gone. Doing it inline with a bare negative margin couples
+ * the page to a spacing value it cannot see: change the shell's padding and the
+ * page silently gains or loses a gutter, with nothing to grep for.
+ *
+ * Keeping the mirror here makes the pair greppable and gives it one place to
+ * change. **The margins below must stay the negation of the shell's padding.**
+ */
+export function FullBleed({ children, className }: FullBleedProps) {
+  return <div className={cn("-m-4 md:-m-6", className)}>{children}</div>
+}
diff --git a/apps/builder/src/components/nav-main.tsx b/apps/builder/src/components/nav-main.tsx
index 895aa9b52..a7258217b 100644
--- a/apps/builder/src/components/nav-main.tsx
+++ b/apps/builder/src/components/nav-main.tsx
@@ -6,6 +6,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
+  useSidebar,
 } from "@chatbotx.io/ui/components/ui/sidebar"
 import type { LucideIcon } from "lucide-react"
 import Link from "next/link"
@@ -26,11 +27,13 @@ function NavItemContent({
   className,
   isDisabled,
   isCrossZone,
+  onNavigate,
 }: {
   item: NavItem
   className: string
   isDisabled: boolean
   isCrossZone: boolean
+  onNavigate: () => void
 }) {
   const label = (
     <>
@@ -49,6 +52,7 @@ function NavItemContent({
       <a
         className={className}
         href={item.url}
+        onClick={onNavigate}
         rel="noopener noreferrer"
         target="_blank"
       >
@@ -58,7 +62,7 @@ function NavItemContent({
   }
 
   return (
-    <Link className={className} href={item.url}>
+    <Link className={className} href={item.url} onClick={onNavigate}>
       {label}
     </Link>
   )
@@ -76,6 +80,12 @@ export function NavMain({
   disabledTooltip?: string
 }) {
   const pathname = usePathname()
+  const { setOpenMobile } = useSidebar()
+
+  // On mobile the sidebar is a Sheet rendered over the page. Navigating leaves
+  // it open on top of the destination, so close it as the link is followed.
+  // No-op on desktop, where `openMobile` is not read.
+  const closeMobileSidebar = () => setOpenMobile(false)
 
   return (
     <SidebarGroup>
@@ -98,6 +108,7 @@ export function NavMain({
                   isCrossZone={crossZone || Boolean(item.crossZone)}
                   isDisabled={isDisabled}
                   item={item}
+                  onNavigate={closeMobileSidebar}
                 />
               </SidebarMenuButton>
             </SidebarMenuItem>
diff --git a/apps/builder/src/components/setting-row.tsx b/apps/builder/src/components/setting-row.tsx
index 98c3f9872..7fed14a54 100644
--- a/apps/builder/src/components/setting-row.tsx
+++ b/apps/builder/src/components/setting-row.tsx
@@ -11,13 +11,16 @@ type SettingRowProps = {
 export const SettingRow = (props: SettingRowProps) => {
   const { label, description, children } = props
   return (
-    <div className="grid grid-cols-4 items-start gap-4">
+    // A four-column split is unreadable on a phone: label, control and
+    // description each end up a sliver wide. Stack them instead, and restore
+    // the desktop split from `md` up.
+    <div className="grid grid-cols-1 items-start gap-4 md:grid-cols-4">
       <div className="mt-2 flex flex-col gap-1.5">
         <Label>{label}</Label>
       </div>
       <div>{children}</div>
       {description && (
-        <p className="wrap-break-words col-span-2 mt-1.5 text-muted-foreground text-sm">
+        <p className="wrap-break-words mt-1.5 text-muted-foreground text-sm md:col-span-2">
           {description}
         </p>
       )}
diff --git a/apps/builder/src/features/analytics/components/analytics-nav.tsx b/apps/builder/src/features/analytics/components/analytics-nav.tsx
index da176cf7f..baa3da96e 100644
--- a/apps/builder/src/features/analytics/components/analytics-nav.tsx
+++ b/apps/builder/src/features/analytics/components/analytics-nav.tsx
@@ -29,16 +29,21 @@ export function AnalyticsNav({ showAds }: { showAds: boolean }) {
   ]
 
   return (
-    <nav aria-label={t("fields.analytics.label")} className="w-56 shrink-0">
-      <ul className="flex flex-col gap-1">
+    // Below `md` the dashboard stacks, so the rail becomes a scrollable strip
+    // above the charts instead of eating 224px of a phone's width.
+    <nav
+      aria-label={t("fields.analytics.label")}
+      className="w-full md:w-56 md:shrink-0"
+    >
+      <ul className="flex flex-row gap-1 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] md:flex-col md:overflow-visible [&::-webkit-scrollbar]:hidden">
         {links.map((link) => {
           const href = `${base}/${link.segment}`
           const isActive = pathname.startsWith(href)
           return (
-            <li key={link.segment}>
+            <li className="shrink-0" key={link.segment}>
               <Link
                 className={cn(
-                  "block rounded-md px-3 py-2 text-sm transition-colors",
+                  "block whitespace-nowrap rounded-md px-3 py-2 text-sm transition-colors",
                   isActive
                     ? "bg-accent font-medium text-accent-foreground"
                     : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
diff --git a/apps/builder/src/features/broadcasts/broadcasts-table.tsx b/apps/builder/src/features/broadcasts/broadcasts-table.tsx
index 5600df5b3..0e7535a80 100644
--- a/apps/builder/src/features/broadcasts/broadcasts-table.tsx
+++ b/apps/builder/src/features/broadcasts/broadcasts-table.tsx
@@ -2,6 +2,7 @@
 
 import { DataTable } from "@chatbotx.io/ui/components/data-table/data-table"
 import { DataTableColumnHeader } from "@chatbotx.io/ui/components/data-table/data-table-column-header"
+import { DataTableRowCard } from "@chatbotx.io/ui/components/data-table/data-table-row-card"
 import { DataTableToolbar } from "@chatbotx.io/ui/components/data-table/data-table-toolbar"
 import { Badge } from "@chatbotx.io/ui/components/ui/badge"
 import { Button, buttonVariants } from "@chatbotx.io/ui/components/ui/button"
@@ -347,7 +348,10 @@ export function BroadcastsTable({ promises }: BroadcastsTableProps) {
       broadcastIds={broadcastIds}
       workspaceId={workspaceId}
     >
-      <DataTable table={table}>
+      <DataTable
+        mobileCard={(row) => <DataTableRowCard row={row} />}
+        table={table}
+      >
         <DataTableToolbar table={table}>
           <div className="flex justify-end">
             <Link
diff --git a/apps/builder/src/features/chat/chat-layout.tsx b/apps/builder/src/features/chat/chat-layout.tsx
index 7fd523b04..277b18cdf 100644
--- a/apps/builder/src/features/chat/chat-layout.tsx
+++ b/apps/builder/src/features/chat/chat-layout.tsx
@@ -1,33 +1,28 @@
 "use client"
 
 import type { ConversationAttributes } from "@chatbotx.io/database/partials"
-import { Button } from "@chatbotx.io/ui/components/ui/button"
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
 } from "@chatbotx.io/ui/components/ui/resizable"
 import {
-  BotIcon,
-  Loader2Icon,
-  MessagesSquareIcon,
-  UserRoundIcon,
-} from "lucide-react"
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@chatbotx.io/ui/components/ui/sheet"
+import { useIsMobileState } from "@chatbotx.io/ui/hooks/use-mobile"
+import { Loader2Icon } from "lucide-react"
 import { useTranslations } from "next-intl"
-import { useAction } from "next-safe-action/hooks"
 import { useEffect, useState } from "react"
-import { toast } from "sonner"
-import { ContactInboxPanel } from "../contacts/contact-inbox-panel"
-import { disableBotAction } from "../conversations/actions/disable-bot.action"
-import ConversationList from "../conversations/conversation-list"
 import type { ConversationResource } from "../conversations/schema/resource"
 import {
-  BOT_DISABLE_DURATION_MS,
-  isConversationActive,
-} from "../conversations/utils/bot-state"
-import { MessageInput } from "../messages/components/message-input"
-import MessageHead from "../messages/message-head"
-import { MessageList } from "../messages/message-list"
+  ContactDetailPane,
+  ConversationListPane,
+  MessageThreadPane,
+} from "./chat-panes"
 import { ChatRealtime } from "./chat-realtime"
 import { useChatStore } from "./store/chat-store-provider"
 
@@ -37,6 +32,9 @@ type ChatLayoutProps = {
   layout?: [number, number, number]
 }
 
+/** Height of the shell's mobile header (`h-12`), which sits above this view. */
+const MOBILE_SHELL_HEADER = "3rem"
+
 export const ChatLayout = (props: ChatLayoutProps) => {
   const t = useTranslations()
   const {
@@ -51,11 +49,19 @@ export const ChatLayout = (props: ChatLayoutProps) => {
     isLoadingConversation,
     isBootstrappingUrlConversation,
     activeConversationId,
-    updateConversation,
+    setActiveConversationId,
   } = useChatStore((state) => state)
 
   const [activeConversation, setActiveConversation] =
     useState<ConversationResource | null>(null)
+  const [isContactSheetOpen, setIsContactSheetOpen] = useState(false)
+
+  // The inbox mounts three heavy, self-fetching panes. Choosing the layout in
+  // CSS would mount all of them in both arrangements, so the choice is made in
+  // JS — and rendering waits for the first measurement rather than guessing
+  // desktop and remounting everything a frame later.
+  const isMobile = useIsMobileState()
+
   const isResolvingConversation =
     (isFirstLoadConversation && isLoadingConversation) ||
     isBootstrappingUrlConversation
@@ -65,25 +71,6 @@ export const ChatLayout = (props: ChatLayoutProps) => {
     isBootstrappingUrlConversation
   )
 
-  const { execute: disableBot, isExecuting: isDisablingBot } = useAction(
-    disableBotAction.bind(null, workspaceId),
-    {
-      onSuccess: () => {
-        if (activeConversation) {
-          updateConversation(activeConversation.id, {
-            botEnabled: false,
-            botResumeAt: new Date(Date.now() + BOT_DISABLE_DURATION_MS),
-          })
-        }
-      },
-      onError: ({ error }) => {
-        if (error.serverError) {
-          toast.error(error.serverError)
-        }
-      },
-    },
-  )
-
   useEffect(() => {
     const selectedConversation = conversations.find(
       (c) => c.id === activeConversationId,
@@ -99,108 +86,99 @@ export const ChatLayout = (props: ChatLayoutProps) => {
     }
   }, [activeConversationId, conversations])
 
+  const paneState = {
+    activeConversation,
+    isResolvingConversation,
+    shouldShowEmptyState,
+  }
+
   return (
-    <ResizablePanelGroup className="h-full items-stretch">
-      {/* CONVERSATION LIST */}
-      <ResizablePanel
-        className="p-3"
-        defaultSize={`${layout[0] ?? 25}%`}
-        maxSize={"30%"}
-        minSize={"20%"}
-      >
-        <ConversationList
-          canViewEmailAndPhone={canViewEmailAndPhone}
-          workspaceId={workspaceId}
-        />
-      </ResizablePanel>
-
-      <ResizableHandle withHandle />
-
-      {/* MESSAGE LIST */}
-      <ResizablePanel className="pt-3" defaultSize={`${layout[1] ?? 50}%`}>
-        {isResolvingConversation && (
-          <Loader2Icon className="mx-auto my-4 animate-spin" />
-        )}
-        {activeConversation && (
-          <div className="flex h-full w-full flex-col">
-            <MessageHead />
-            {isConversationActive(activeConversation) && (
-              <Button
-                className="rounded-none"
-                disabled={isDisablingBot}
-                onClick={() => {
-                  disableBot({ ids: [activeConversation.id] })
-                }}
-                variant="secondary"
-              >
-                <BotIcon />
-                {t("messages.botIsActive")}
-              </Button>
-            )}
-            <MessageList />
-            <MessageInput />
-          </div>
-        )}
-        {shouldShowEmptyState && (
-          <div
-            aria-live="polite"
-            className="flex h-full w-full flex-col items-center justify-center px-6 text-center"
-          >
-            <div className="mb-4 flex size-14 items-center justify-center rounded-full bg-muted">
-              <MessagesSquareIcon
-                aria-hidden="true"
-                className="size-7 text-muted-foreground"
+    <>
+      {/*
+        Kept outside the panes: on mobile the message pane unmounts whenever the
+        user goes back to the list, and the realtime socket must not go with it.
+      */}
+      <ChatRealtime />
+      {isMobile === undefined && (
+        <div className="flex h-64 items-center justify-center">
+          <Loader2Icon className="animate-spin" />
+        </div>
+      )}
+      {isMobile === true && (
+        <div
+          className="flex flex-col"
+          style={{ height: `calc(100dvh - ${MOBILE_SHELL_HEADER})` }}
+        >
+          {activeConversationId ? (
+            <MessageThreadPane
+              {...paneState}
+              onBack={() => setActiveConversationId(null)}
+              onOpenContact={() => setIsContactSheetOpen(true)}
+              workspaceId={workspaceId}
+            />
+          ) : (
+            <div className="min-h-0 flex-1 overflow-y-auto p-3">
+              <ConversationListPane
+                canViewEmailAndPhone={canViewEmailAndPhone}
+                workspaceId={workspaceId}
               />
             </div>
-            <h3 className="font-semibold text-base">
-              {t("messages.selectConversationTitle")}
-            </h3>
-            <p className="mt-1 max-w-sm text-muted-foreground text-sm">
-              {t("messages.selectConversationDescription")}
-            </p>
-          </div>
-        )}
-        <ChatRealtime />
-      </ResizablePanel>
-
-      <ResizableHandle withHandle />
-
-      {/* CONTACT DETAIL */}
-      <ResizablePanel
-        className="overflow-y-auto! h-screen px-4 py-3"
-        defaultSize={`${layout[2] ?? 25}%`}
-        maxSize={"30%"}
-        minSize={"20%"}
-      >
-        {isResolvingConversation && (
-          <Loader2Icon className="mx-auto my-4 animate-spin" />
-        )}
-        {activeConversation && (
-          <ContactInboxPanel
-            activeConversationId={activeConversation.id}
-            workspaceId={workspaceId}
-          />
-        )}
-        {shouldShowEmptyState && (
-          <div
-            aria-live="polite"
-            className="flex h-full w-full flex-col items-center justify-center px-6 text-center"
+          )}
+
+          <Sheet onOpenChange={setIsContactSheetOpen} open={isContactSheetOpen}>
+            <SheetContent
+              className="w-[85vw] overflow-y-auto px-4 py-3 sm:max-w-sm"
+              side="right"
+            >
+              <SheetHeader className="sr-only">
+                <SheetTitle>{t("fields.contact.label")}</SheetTitle>
+                <SheetDescription>
+                  {t("messages.selectConversationContactDescription")}
+                </SheetDescription>
+              </SheetHeader>
+              <ContactDetailPane {...paneState} workspaceId={workspaceId} />
+            </SheetContent>
+          </Sheet>
+        </div>
+      )}
+      {isMobile === false && (
+        // `dvh` rather than `vh`: the panel group is the page's full-height
+        // element, and `vh` overshoots the visible area while mobile browser
+        // chrome is showing.
+        <ResizablePanelGroup className="h-[100dvh] items-stretch">
+          {/* CONVERSATION LIST */}
+          <ResizablePanel
+            className="p-3"
+            defaultSize={`${layout[0] ?? 25}%`}
+            maxSize={"30%"}
+            minSize={"20%"}
           >
-            <div className="mb-4 flex size-14 items-center justify-center rounded-full bg-muted">
-              <UserRoundIcon
-                aria-hidden="true"
-                className="size-7 text-muted-foreground"
-              />
-            </div>
-            <h3 className="font-semibold text-base">
-              {t("messages.selectConversationContactTitle")}
-            </h3>
-            <p className="mt-1 max-w-sm text-muted-foreground text-sm">
-              {t("messages.selectConversationContactDescription")}
-            </p>
-          </div>
-        )}
-      </ResizablePanel>
-    </ResizablePanelGroup>
+            <ConversationListPane
+              canViewEmailAndPhone={canViewEmailAndPhone}
+              workspaceId={workspaceId}
+            />
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* MESSAGE LIST */}
+          <ResizablePanel className="pt-3" defaultSize={`${layout[1] ?? 50}%`}>
+            <MessageThreadPane {...paneState} workspaceId={workspaceId} />
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* CONTACT DETAIL */}
+          <ResizablePanel
+            className="overflow-y-auto! h-full min-h-0 px-4 py-3"
+            defaultSize={`${layout[2] ?? 25}%`}
+            maxSize={"30%"}
+            minSize={"20%"}
+          >
+            <ContactDetailPane {...paneState} workspaceId={workspaceId} />
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      )}
+    </>
   )
 }
diff --git a/apps/builder/src/features/chat/chat-panes.tsx b/apps/builder/src/features/chat/chat-panes.tsx
new file mode 100644
index 000000000..c74ab9620
--- /dev/null
+++ b/apps/builder/src/features/chat/chat-panes.tsx
@@ -0,0 +1,188 @@
+"use client"
+
+import { Button } from "@chatbotx.io/ui/components/ui/button"
+import {
+  BotIcon,
+  Loader2Icon,
+  MessagesSquareIcon,
+  UserRoundIcon,
+} from "lucide-react"
+import { useTranslations } from "next-intl"
+import { useAction } from "next-safe-action/hooks"
+import type { ReactNode } from "react"
+import { toast } from "sonner"
+import { ContactInboxPanel } from "../contacts/contact-inbox-panel"
+import { disableBotAction } from "../conversations/actions/disable-bot.action"
+import ConversationList from "../conversations/conversation-list"
+import type { ConversationResource } from "../conversations/schema/resource"
+import {
+  BOT_DISABLE_DURATION_MS,
+  isConversationActive,
+} from "../conversations/utils/bot-state"
+import { MessageInput } from "../messages/components/message-input"
+import MessageHead from "../messages/message-head"
+import { MessageList } from "../messages/message-list"
+import { useChatStore } from "./store/chat-store-provider"
+
+/**
+ * The inbox's three panes, split out of `chat-layout` so the layout file only
+ * decides *where* they go. `chat-layout` renders one pane at a time below the
+ * mobile breakpoint and all three side by side above it; the panes themselves
+ * know nothing about which arrangement they are in.
+ */
+
+type PaneState = {
+  activeConversation: ConversationResource | null
+  isResolvingConversation: boolean
+  shouldShowEmptyState: boolean
+}
+
+function PaneEmptyState({
+  description,
+  icon,
+  title,
+}: {
+  description: string
+  icon: ReactNode
+  title: string
+}) {
+  return (
+    <div
+      aria-live="polite"
+      className="flex h-full w-full flex-col items-center justify-center px-6 text-center"
+    >
+      <div className="mb-4 flex size-14 items-center justify-center rounded-full bg-muted">
+        {icon}
+      </div>
+      <h3 className="font-semibold text-base">{title}</h3>
+      <p className="mt-1 max-w-sm text-muted-foreground text-sm">
+        {description}
+      </p>
+    </div>
+  )
+}
+
+export function ConversationListPane({
+  canViewEmailAndPhone,
+  workspaceId,
+}: {
+  canViewEmailAndPhone: boolean
+  workspaceId: string
+}) {
+  return (
+    <ConversationList
+      canViewEmailAndPhone={canViewEmailAndPhone}
+      workspaceId={workspaceId}
+    />
+  )
+}
+
+export function MessageThreadPane({
+  activeConversation,
+  isResolvingConversation,
+  onBack,
+  onOpenContact,
+  shouldShowEmptyState,
+  workspaceId,
+}: PaneState & {
+  onBack?: () => void
+  onOpenContact?: () => void
+  workspaceId: string
+}) {
+  const t = useTranslations()
+  const updateConversation = useChatStore((state) => state.updateConversation)
+
+  const { execute: disableBot, isExecuting: isDisablingBot } = useAction(
+    disableBotAction.bind(null, workspaceId),
+    {
+      onSuccess: () => {
+        if (activeConversation) {
+          updateConversation(activeConversation.id, {
+            botEnabled: false,
+            botResumeAt: new Date(Date.now() + BOT_DISABLE_DURATION_MS),
+          })
+        }
+      },
+      onError: ({ error }) => {
+        if (error.serverError) {
+          toast.error(error.serverError)
+        }
+      },
+    },
+  )
+
+  return (
+    <>
+      {isResolvingConversation && (
+        <Loader2Icon className="mx-auto my-4 animate-spin" />
+      )}
+      {activeConversation && (
+        <div className="flex h-full min-h-0 w-full flex-col">
+          <MessageHead onBack={onBack} onOpenContact={onOpenContact} />
+          {isConversationActive(activeConversation) && (
+            <Button
+              className="rounded-none"
+              disabled={isDisablingBot}
+              onClick={() => {
+                disableBot({ ids: [activeConversation.id] })
+              }}
+              variant="secondary"
+            >
+              <BotIcon />
+              {t("messages.botIsActive")}
+            </Button>
+          )}
+          <MessageList />
+          <MessageInput />
+        </div>
+      )}
+      {shouldShowEmptyState && (
+        <PaneEmptyState
+          description={t("messages.selectConversationDescription")}
+          icon={
+            <MessagesSquareIcon
+              aria-hidden="true"
+              className="size-7 text-muted-foreground"
+            />
+          }
+          title={t("messages.selectConversationTitle")}
+        />
+      )}
+    </>
+  )
+}
+
+export function ContactDetailPane({
+  activeConversation,
+  isResolvingConversation,
+  shouldShowEmptyState,
+  workspaceId,
+}: PaneState & { workspaceId: string }) {
+  const t = useTranslations()
+
+  return (
+    <>
+      {isResolvingConversation && (
+        <Loader2Icon className="mx-auto my-4 animate-spin" />
+      )}
+      {activeConversation && (
+        <ContactInboxPanel
+          activeConversationId={activeConversation.id}
+          workspaceId={workspaceId}
+        />
+      )}
+      {shouldShowEmptyState && (
+        <PaneEmptyState
+          description={t("messages.selectConversationContactDescription")}
+          icon={
+            <UserRoundIcon
+              aria-hidden="true"
+              className="size-7 text-muted-foreground"
+            />
+          }
+          title={t("messages.selectConversationContactTitle")}
+        />
+      )}
+    </>
+  )
+}
diff --git a/apps/builder/src/features/contacts/contacts-table.tsx b/apps/builder/src/features/contacts/contacts-table.tsx
index 635c04229..afdb9ecf6 100644
--- a/apps/builder/src/features/contacts/contacts-table.tsx
+++ b/apps/builder/src/features/contacts/contacts-table.tsx
@@ -16,7 +16,7 @@ import {
   TooltipTrigger,
 } from "@chatbotx.io/ui/components/ui/tooltip"
 import { useDataTable } from "@chatbotx.io/ui/hooks/use-data-table"
-import type { Column, ColumnDef } from "@tanstack/react-table"
+import type { Column, ColumnDef, Row } from "@tanstack/react-table"
 import { format, formatDistanceToNow } from "date-fns"
 import Link from "next/link"
 import { useSearchParams } from "next/navigation"
@@ -41,6 +41,56 @@ import type { ListContactsResponse } from "./schemas/query"
 import type { ContactResource } from "./schemas/resource"
 import { getLatestContactLastReadAt, useAvatarUrl } from "./utils"
 
+/**
+ * One contact rendered as a card, for the narrow-viewport view of the table.
+ *
+ * Only the fields worth a phone's width survive: identity, who owns the
+ * conversation, and when the contact arrived. Source and last-read stay in the
+ * table, which takes over from `md` up. Every label is a key the table columns
+ * already use, so the card adds no translation surface.
+ */
+function ContactCard({
+  row,
+  workspaceId,
+}: {
+  row: Row<ListContactsResponse["data"][number]>
+  workspaceId: string
+}) {
+  const t = useTranslations()
+  const contact = row.original
+
+  return (
+    <div className="flex items-start gap-3 rounded-md border p-3">
+      <Checkbox
+        aria-label={t("actions.selectRow")}
+        checked={row.getIsSelected()}
+        className="mt-1 shrink-0"
+        onCheckedChange={(value) => row.toggleSelected(Boolean(value))}
+      />
+      <div className="flex min-w-0 flex-1 flex-col gap-2">
+        <NameCell contact={contact} workspaceId={workspaceId} />
+        <dl className="flex flex-col gap-1 text-muted-foreground text-xs">
+          <div className="flex items-baseline justify-between gap-3">
+            <dt>{t("fields.assignee.label")}</dt>
+            <dd className="truncate text-foreground">
+              {getUserName(
+                contact.conversation?.assignedUser,
+                t("assignAdmin.unAssigned"),
+              )}
+            </dd>
+          </div>
+          <div className="flex items-baseline justify-between gap-3">
+            <dt>{t("fields.createdAt.label")}</dt>
+            <dd className="text-foreground">
+              {format(contact.createdAt, "yyyy/MM/dd")}
+            </dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+  )
+}
+
 const parseSortParam = (value: string | null) => {
   if (!value) {
     return []
@@ -448,6 +498,7 @@ export function ContactsTable({
   return (
     <DataTable
       className="[&_tbody_td]:py-3 [&_tbody_td]:text-[15px] [&_tbody_tr]:h-16"
+      mobileCard={(row) => <ContactCard row={row} workspaceId={workspaceId} />}
       table={table}
     >
       {showContactFilterPanel && (
diff --git a/apps/builder/src/features/flows/flows-table.tsx b/apps/builder/src/features/flows/flows-table.tsx
index cd82fbfbc..00c4f7f3a 100644
--- a/apps/builder/src/features/flows/flows-table.tsx
+++ b/apps/builder/src/features/flows/flows-table.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import { DataTable } from "@chatbotx.io/ui/components/data-table/data-table"
+import { DataTableRowCard } from "@chatbotx.io/ui/components/data-table/data-table-row-card"
 import { DataTableToolbar } from "@chatbotx.io/ui/components/data-table/data-table-toolbar"
 import { buttonVariants } from "@chatbotx.io/ui/components/ui/button"
 import {
@@ -70,7 +71,10 @@ export function FlowsTable({
         <CardTitle className="font-bold text-xl">{t("flows.title")}</CardTitle>
       </CardHeader>
       <CardContent>
-        <DataTable table={table}>
+        <DataTable
+          mobileCard={(row) => <DataTableRowCard row={row} />}
+          table={table}
+        >
           <DataTableToolbar table={table}>
             <FlowsTableToolbarActions
               setRowAction={setRowAction}
diff --git a/apps/builder/src/features/manage/manage-layout.tsx b/apps/builder/src/features/manage/manage-layout.tsx
index 8a77bc95a..f93100295 100644
--- a/apps/builder/src/features/manage/manage-layout.tsx
+++ b/apps/builder/src/features/manage/manage-layout.tsx
@@ -2,6 +2,7 @@
 
 import {
   SidebarInset,
+  SidebarMobileTrigger,
   SidebarProvider,
   SidebarTrigger,
 } from "@chatbotx.io/ui/components/ui/sidebar"
@@ -49,7 +50,15 @@ export function ManageLayout({ children, sidebar }: ManageLayoutProps) {
     >
       {sidebar}
       <SidebarInset>
-        <SidebarTrigger className="absolute -inset-s-2 top-3 z-10 border" />
+        {/*
+          Mirrors the workspace shell: below `md` the sidebar is a Sheet and the
+          absolutely positioned trigger below sits off the inset's inline edge,
+          out of reach. See `app/space/[workspaceId]/layout.tsx`.
+        */}
+        <header className="sticky top-0 z-20 flex h-12 shrink-0 items-center border-b bg-background px-2 pt-[env(safe-area-inset-top)] md:hidden">
+          <SidebarMobileTrigger />
+        </header>
+        <SidebarTrigger className="absolute -inset-s-2 top-3 z-10 hidden border md:inline-flex" />
         <main className="p-4 pb-24 sm:px-6 sm:pt-6">{children}</main>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/builder/src/features/messages/components/message-input.tsx b/apps/builder/src/features/messages/components/message-input.tsx
index 4b91cb570..cdfd6106d 100644
--- a/apps/builder/src/features/messages/components/message-input.tsx
+++ b/apps/builder/src/features/messages/components/message-input.tsx
@@ -488,7 +488,7 @@ export const MessageInput = () => {
               <FileUploadPreview ref={fileUploadRef} />
             </div>
           )}
-          <div className="flex w-full items-center ps-2.5">
+          <div className="flex w-full items-center gap-2 overflow-x-auto ps-2.5 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
             <div className="min-w-0 flex-1">
               <InboxIcon
                 channel={
@@ -498,7 +498,7 @@ export const MessageInput = () => {
               />
             </div>
 
-            <div className="message-toolbar flex items-center gap-2">
+            <div className="message-toolbar flex shrink-0 items-center gap-2">
               {!hasFiles && <InputMenu setContent={setContent} />}
               {!isInstagramPostComment && (
                 <Button
diff --git a/apps/builder/src/features/messages/components/message-item.tsx b/apps/builder/src/features/messages/components/message-item.tsx
index c319b1557..117b6aaed 100644
--- a/apps/builder/src/features/messages/components/message-item.tsx
+++ b/apps/builder/src/features/messages/components/message-item.tsx
@@ -317,7 +317,7 @@ const RenderAttachmentItem = (props: { attachment: AttachmentResource }) => {
       if (!(attachment.width && attachment.height)) {
         return (
           <div
-            className="relative max-w-80 overflow-hidden rounded-xl"
+            className="relative max-w-full overflow-hidden rounded-xl sm:max-w-80"
             style={{ aspectRatio: "4/3" }}
           >
             <Image
@@ -332,7 +332,7 @@ const RenderAttachmentItem = (props: { attachment: AttachmentResource }) => {
       return (
         <Image
           alt={attachmentLabel}
-          className="max-w-80 rounded-xl"
+          className="max-w-full rounded-xl sm:max-w-80"
           height={attachment.height}
           src={attachmentUrl}
           width={attachment.width}
@@ -439,7 +439,7 @@ const RenderContentAttributes = (props: MessageItemProps) => {
               }
               return (
                 <Button
-                  className="min-w-60 bg-secondary text-secondary-foreground disabled:bg-muted disabled:text-muted-foreground dark:bg-secondary dark:text-secondary-foreground dark:disabled:bg-muted dark:disabled:text-muted-foreground"
+                  className="w-full bg-secondary text-secondary-foreground disabled:bg-muted disabled:text-muted-foreground sm:w-auto sm:min-w-60 dark:bg-secondary dark:text-secondary-foreground dark:disabled:bg-muted dark:disabled:text-muted-foreground"
                   disabled={!onPostback}
                   key={button.id}
                   onClick={() => {
diff --git a/apps/builder/src/features/messages/message-head.tsx b/apps/builder/src/features/messages/message-head.tsx
index a4f7126e6..7e20e2d85 100644
--- a/apps/builder/src/features/messages/message-head.tsx
+++ b/apps/builder/src/features/messages/message-head.tsx
@@ -6,7 +6,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@chatbotx.io/ui/components/ui/tooltip"
-import { BotIcon } from "lucide-react"
+import { ArrowLeftIcon, BotIcon, UserRoundIcon } from "lucide-react"
 import { useTranslations } from "next-intl"
 import { useAction } from "next-safe-action/hooks"
 import { toast } from "sonner"
@@ -17,7 +17,18 @@ import { UpdateConversationAssignee } from "../conversations/components/update-c
 import { ConversationAction } from "../conversations/conversation-action"
 import { isConversationActive } from "../conversations/utils/bot-state"
 
-export default function MessageHead() {
+/**
+ * `onBack` and `onOpenContact` are supplied only by the mobile inbox layout,
+ * where the conversation list and the contact panel are separate views rather
+ * than adjacent columns. On desktop both are omitted and nothing extra renders.
+ */
+export default function MessageHead({
+  onBack,
+  onOpenContact,
+}: {
+  onBack?: () => void
+  onOpenContact?: () => void
+} = {}) {
   const t = useTranslations()
   const workspaceId = useWorkspaceId()
 
@@ -54,7 +65,18 @@ export default function MessageHead() {
   return (
     activeConversation && (
       <div className="flex items-center gap-2 border-b px-3 pb-3">
-        <div className="flex flex-1 flex-col">
+        {onBack && (
+          <Button
+            aria-label={t("actions.back")}
+            className="shrink-0"
+            onClick={onBack}
+            size="icon"
+            variant="ghost"
+          >
+            <ArrowLeftIcon className="rtl:rotate-180" />
+          </Button>
+        )}
+        <div className="flex min-w-0 flex-1 flex-col">
           <div className="truncate font-medium text-semibold">
             {activeConversation?.contact?.fullName}
           </div>
@@ -83,6 +105,17 @@ export default function MessageHead() {
             </TooltipContent>
           </Tooltip>
         )}
+        {onOpenContact && (
+          <Button
+            aria-label={t("fields.contact.label")}
+            className="shrink-0"
+            onClick={onOpenContact}
+            size="icon"
+            variant="ghost"
+          >
+            <UserRoundIcon />
+          </Button>
+        )}
         <ConversationAction conversation={activeConversation} />
       </div>
     )
diff --git a/apps/builder/src/features/saved-replies/quick-replies-popover.tsx b/apps/builder/src/features/saved-replies/quick-replies-popover.tsx
index d6f17324c..37a085d4d 100644
--- a/apps/builder/src/features/saved-replies/quick-replies-popover.tsx
+++ b/apps/builder/src/features/saved-replies/quick-replies-popover.tsx
@@ -145,7 +145,7 @@ export const QuickRepliesPopover = ({
         <PopoverTrigger render={children} />
         <PopoverContent
           align="start"
-          className="max-h-75 w-100 overflow-y-auto p-0"
+          className="max-h-75 w-[min(100vw-2rem,25rem)] overflow-y-auto p-0"
           initialFocus={false}
           side="top"
         >
diff --git a/apps/builder/src/features/saved-replies/saved-reply-manage.tsx b/apps/builder/src/features/saved-replies/saved-reply-manage.tsx
index 8d4969e55..3c277a511 100644
--- a/apps/builder/src/features/saved-replies/saved-reply-manage.tsx
+++ b/apps/builder/src/features/saved-replies/saved-reply-manage.tsx
@@ -69,7 +69,7 @@ const SavedReplyManage = (props: { onSelect: (text: string) => void }) => {
           </Button>
         }
       />
-      <PopoverContent align="end" className="w-100 p-0">
+      <PopoverContent align="end" className="w-[min(100vw-2rem,25rem)] p-0">
         {view.type === "create" ? (
           <SavedReplyCreateForm
             onCancel={() => setView({ type: "list" })}
diff --git a/packages/analytics-nextjs/src/components/charts/admins-analysis.tsx b/packages/analytics-nextjs/src/components/charts/admins-analysis.tsx
index 15db7acec..fa079ef16 100644
--- a/packages/analytics-nextjs/src/components/charts/admins-analysis.tsx
+++ b/packages/analytics-nextjs/src/components/charts/admins-analysis.tsx
@@ -122,7 +122,7 @@ export function AdminsAnalysis() {
   })
 
   return (
-    <Card className="col-span-2 w-full">
+    <Card className="w-full md:col-span-2">
       <CardHeader>
         <CardTitle>{t("analytics.admins")}</CardTitle>
       </CardHeader>
diff --git a/packages/analytics-nextjs/src/components/contacts-dashboard.tsx b/packages/analytics-nextjs/src/components/contacts-dashboard.tsx
index 34a538c93..39a316eb4 100644
--- a/packages/analytics-nextjs/src/components/contacts-dashboard.tsx
+++ b/packages/analytics-nextjs/src/components/contacts-dashboard.tsx
@@ -27,12 +27,12 @@ export function ContactsDashboard({
         workspaceCreatedAt={workspaceCreatedAt}
       />
 
-      <div className="flex gap-6">
+      <div className="flex flex-col gap-4 md:flex-row md:gap-6">
         {nav}
         <div className="flex min-w-0 flex-1 flex-col gap-4">
           <InboxStatsList />
 
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <ContactCountsChart />
             <NewContactCountsChart />
             <AllContactsByChannelChart />
diff --git a/packages/analytics-nextjs/src/components/conversations-dashboard.tsx b/packages/analytics-nextjs/src/components/conversations-dashboard.tsx
index c1066f207..dca7dd33c 100644
--- a/packages/analytics-nextjs/src/components/conversations-dashboard.tsx
+++ b/packages/analytics-nextjs/src/components/conversations-dashboard.tsx
@@ -29,9 +29,9 @@ export function ConversationsDashboard({
         workspaceCreatedAt={workspaceCreatedAt}
       />
 
-      <div className="flex gap-6">
+      <div className="flex flex-col gap-4 md:flex-row md:gap-6">
         {nav}
-        <div className="grid min-w-0 flex-1 grid-cols-2 gap-4">
+        <div className="grid min-w-0 flex-1 grid-cols-1 gap-4 md:grid-cols-2">
           {/* <AvgResponseMinutesChart /> */}
           {/* <AvgFirstResponseMinutesByAdminChart /> */}
           {/* <AvgResponseMinutesByAdminChart /> */}
diff --git a/packages/analytics-nextjs/src/components/filter-form.tsx b/packages/analytics-nextjs/src/components/filter-form.tsx
index 52637bf2c..73fb28284 100644
--- a/packages/analytics-nextjs/src/components/filter-form.tsx
+++ b/packages/analytics-nextjs/src/components/filter-form.tsx
@@ -230,7 +230,7 @@ export default function AnalysisFilterForm({
 
   return (
     <Form {...form}>
-      <form className="flex items-end justify-end gap-3">
+      <form className="flex flex-wrap items-end justify-end gap-2 sm:gap-3">
         <Button
           onClick={() => handlePresetChange("last7")}
           type="button"
diff --git a/packages/ui/__tests__/data-table-row-card.test.tsx b/packages/ui/__tests__/data-table-row-card.test.tsx
new file mode 100644
index 000000000..1f6b54164
--- /dev/null
+++ b/packages/ui/__tests__/data-table-row-card.test.tsx
@@ -0,0 +1,94 @@
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { act } from "react"
+import { createRoot, type Root } from "react-dom/client"
+import { afterEach, beforeEach, describe, expect, test } from "vitest"
+import { DataTableRowCard } from "../src/components/data-table/data-table-row-card"
+
+type Flow = { id: string; name: string; status: string }
+
+const helper = createColumnHelper<Flow>()
+const COLUMNS = [
+  helper.display({
+    id: "select",
+    cell: () => <input aria-label="Select row" type="checkbox" />,
+  }),
+  helper.accessor("name", {
+    header: "Name",
+    cell: (info) => <span data-testid="name-cell">{info.getValue()}</span>,
+    meta: { label: "Name" },
+  }),
+  helper.accessor("status", {
+    header: "Status",
+    cell: (info) => info.getValue(),
+    meta: { label: "Status" },
+  }),
+  helper.display({
+    id: "actions",
+    cell: () => <button type="button">Menu</button>,
+  }),
+]
+
+function Harness() {
+  const table = useReactTable({
+    data: [{ id: "1", name: "Welcome flow", status: "active" }],
+    columns: COLUMNS,
+    getCoreRowModel: getCoreRowModel(),
+  })
+  const row = table.getRowModel().rows[0]
+  if (!row) {
+    throw new Error("fixture produced no row")
+  }
+  return <DataTableRowCard row={row} />
+}
+
+describe("DataTableRowCard", () => {
+  let container: HTMLDivElement
+  let root: Root
+
+  beforeEach(() => {
+    Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+    container = document.createElement("div")
+    document.body.append(container)
+    root = createRoot(container)
+    act(() => {
+      root.render(<Harness />)
+    })
+  })
+
+  afterEach(() => {
+    act(() => {
+      root.unmount()
+    })
+    container.remove()
+  })
+
+  test("reuses each column's own cell renderer", () => {
+    // The card must not carry a second copy of a cell that could drift from
+    // the table's.
+    expect(
+      container.querySelector('[data-testid="name-cell"]')?.textContent,
+    ).toBe("Welcome flow")
+  })
+
+  test("labels fields from column meta", () => {
+    const labels = Array.from(container.querySelectorAll("dt")).map(
+      (node) => node.textContent,
+    )
+    expect(labels).toEqual(["Name", "Status"])
+  })
+
+  test("lifts select and actions out of the field list", () => {
+    const values = Array.from(container.querySelectorAll("dd")).map(
+      (node) => node.textContent,
+    )
+    expect(values).toEqual(["Welcome flow", "active"])
+
+    // Both still render, just as chrome above the fields.
+    expect(container.querySelector('input[type="checkbox"]')).not.toBeNull()
+    expect(container.querySelector("button")?.textContent).toBe("Menu")
+  })
+})
diff --git a/packages/ui/__tests__/data-table.test.tsx b/packages/ui/__tests__/data-table.test.tsx
new file mode 100644
index 000000000..dc0069749
--- /dev/null
+++ b/packages/ui/__tests__/data-table.test.tsx
@@ -0,0 +1,134 @@
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { act } from "react"
+import { createRoot, type Root } from "react-dom/client"
+import { afterEach, beforeEach, describe, expect, test } from "vitest"
+import { DataTable } from "../src/components/data-table/data-table"
+
+type Contact = { id: string; name: string; email: string }
+
+const ROWS: Contact[] = [
+  { id: "1", name: "Ada", email: "ada@example.com" },
+  { id: "2", name: "Grace", email: "grace@example.com" },
+]
+
+const helper = createColumnHelper<Contact>()
+const COLUMNS = [
+  helper.accessor("name", { header: "Name" }),
+  helper.accessor("email", { header: "Email" }),
+]
+
+function Harness({
+  data = ROWS,
+  scrollable,
+  withCards = false,
+}: {
+  data?: Contact[]
+  scrollable?: boolean
+  withCards?: boolean
+}) {
+  const table = useReactTable({
+    data,
+    columns: COLUMNS,
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  return (
+    <DataTable
+      labels={{ noResults: "Nothing here" }}
+      mobileCard={
+        withCards
+          ? (row) => <span data-testid="card">{row.original.name}</span>
+          : undefined
+      }
+      scrollable={scrollable}
+      table={table}
+    />
+  )
+}
+
+describe("DataTable", () => {
+  let container: HTMLDivElement
+  let root: Root
+
+  const render = (props: Parameters<typeof Harness>[0] = {}) => {
+    act(() => {
+      root.render(<Harness {...props} />)
+    })
+  }
+
+  const tableRegion = () =>
+    container.querySelector<HTMLDivElement>("div.rounded-md.border")
+
+  const cardList = () =>
+    container.querySelector<HTMLDivElement>('[data-slot="data-table-cards"]')
+
+  beforeEach(() => {
+    Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+    container = document.createElement("div")
+    document.body.append(container)
+    root = createRoot(container)
+  })
+
+  afterEach(() => {
+    act(() => {
+      root.unmount()
+    })
+    container.remove()
+  })
+
+  test("scrolls horizontally by default instead of clipping columns", () => {
+    render()
+
+    expect(tableRegion()?.className).toContain("overflow-x-auto")
+    expect(tableRegion()?.className).not.toContain("overflow-hidden")
+  })
+
+  test("still allows a caller to opt into clipping", () => {
+    render({ scrollable: false })
+
+    expect(tableRegion()?.className).toContain("overflow-hidden")
+    expect(tableRegion()?.className).not.toContain("overflow-x-auto")
+  })
+
+  test("renders only the table when no mobileCard is supplied", () => {
+    render()
+
+    expect(cardList()).toBeNull()
+    expect(container.querySelector("table")).not.toBeNull()
+    // Nothing hides the table, so existing consumers are untouched.
+    expect(tableRegion()?.className).not.toContain("hidden")
+  })
+
+  test("renders a card per row and hides the table below md when supplied", () => {
+    render({ withCards: true })
+
+    const cards = Array.from(
+      container.querySelectorAll('[data-testid="card"]'),
+    ).map((node) => node.textContent)
+    expect(cards).toEqual(["Ada", "Grace"])
+
+    expect(cardList()?.className).toContain("md:hidden")
+    expect(tableRegion()?.className).toContain("hidden")
+    expect(tableRegion()?.className).toContain("md:block")
+  })
+
+  test("keeps the table rendered so it takes over from md up", () => {
+    render({ withCards: true })
+
+    const cells = Array.from(container.querySelectorAll("td")).map(
+      (node) => node.textContent,
+    )
+    expect(cells).toContain("Ada")
+  })
+
+  test("shows the empty label in both views", () => {
+    render({ data: [], withCards: true })
+
+    expect(cardList()?.textContent).toBe("Nothing here")
+    expect(container.querySelector("tbody")?.textContent).toBe("Nothing here")
+  })
+})
diff --git a/packages/ui/__tests__/dialog-mobile-width.test.tsx b/packages/ui/__tests__/dialog-mobile-width.test.tsx
new file mode 100644
index 000000000..66d279490
--- /dev/null
+++ b/packages/ui/__tests__/dialog-mobile-width.test.tsx
@@ -0,0 +1,78 @@
+import { act } from "react"
+import { createRoot, type Root } from "react-dom/client"
+import { afterEach, beforeEach, describe, expect, test } from "vitest"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "../src/components/ui/dialog"
+
+/**
+ * ~60 dialogs across the app pass an unprefixed `max-w-*`. tailwind-merge
+ * resolves `max-w` by group, so those replace the base `max-w-[calc(100%-2rem)]`
+ * guard and used to leave the dialog edge-to-edge on a phone. The width is a
+ * separate group, so it survives — that is what these tests pin.
+ */
+const FULL_WIDTH_CLASS = /(^|\s)w-full(\s|$)/
+
+describe("DialogContent mobile width", () => {
+  let container: HTMLDivElement
+  let root: Root
+
+  const render = (className?: string) => {
+    act(() => {
+      root.render(
+        <Dialog open>
+          <DialogContent className={className}>
+            <DialogTitle>Title</DialogTitle>
+            <DialogDescription>Description</DialogDescription>
+          </DialogContent>
+        </Dialog>,
+      )
+    })
+  }
+
+  const popup = () =>
+    document.querySelector<HTMLElement>('[data-slot="dialog-content"]')
+
+  beforeEach(() => {
+    Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+    container = document.createElement("div")
+    document.body.append(container)
+    root = createRoot(container)
+  })
+
+  afterEach(() => {
+    act(() => {
+      root.unmount()
+    })
+    container.remove()
+  })
+
+  test("keeps a viewport gutter by default", () => {
+    render()
+
+    expect(popup()?.className).toContain("w-[calc(100%-2rem)]")
+    expect(popup()?.className).toContain("max-w-[calc(100%-2rem)]")
+  })
+
+  test("keeps the gutter when a caller overrides max-width", () => {
+    render("max-w-lg")
+
+    const className = popup()?.className ?? ""
+    // The caller's max-width wins, as intended for wide viewports...
+    expect(className).toContain("max-w-lg")
+    expect(className).not.toContain("max-w-[calc(100%-2rem)]")
+    // ...but the width still caps the dialog short of the screen edges.
+    expect(className).toContain("w-[calc(100%-2rem)]")
+  })
+
+  test("never falls back to a full-bleed w-full", () => {
+    render("max-h-screen max-w-5xl overflow-y-scroll")
+
+    const className = popup()?.className ?? ""
+    expect(className).toContain("w-[calc(100%-2rem)]")
+    expect(className).not.toMatch(FULL_WIDTH_CLASS)
+  })
+})
diff --git a/packages/ui/__tests__/sidebar-mobile-trigger.test.tsx b/packages/ui/__tests__/sidebar-mobile-trigger.test.tsx
new file mode 100644
index 000000000..9e00c650d
--- /dev/null
+++ b/packages/ui/__tests__/sidebar-mobile-trigger.test.tsx
@@ -0,0 +1,117 @@
+import { setViewportWidth } from "@chatbotx.io/vitest-config/setup-dom"
+import { act } from "react"
+import { createRoot, type Root } from "react-dom/client"
+import { afterEach, beforeEach, describe, expect, test } from "vitest"
+import {
+  SidebarMobileTrigger,
+  SidebarProvider,
+  useSidebar,
+} from "../src/components/ui/sidebar"
+
+function SidebarStateProbe({
+  onRead,
+}: {
+  onRead: (state: { openMobile: boolean; isMobile: boolean }) => void
+}) {
+  const { openMobile, isMobile } = useSidebar()
+  onRead({ openMobile, isMobile })
+  return null
+}
+
+describe("SidebarMobileTrigger", () => {
+  let container: HTMLDivElement
+  let root: Root
+  let state: { openMobile: boolean; isMobile: boolean } | undefined
+
+  const renderShell = () => {
+    act(() => {
+      root.render(
+        <SidebarProvider>
+          <SidebarMobileTrigger />
+          <SidebarStateProbe
+            onRead={(next) => {
+              state = next
+            }}
+          />
+        </SidebarProvider>,
+      )
+    })
+  }
+
+  const trigger = () =>
+    container.querySelector<HTMLButtonElement>(
+      '[data-slot="sidebar-mobile-trigger"]',
+    )
+
+  const click = (element: HTMLElement) => {
+    act(() => {
+      element.dispatchEvent(
+        new MouseEvent("click", { bubbles: true, cancelable: true }),
+      )
+    })
+  }
+
+  beforeEach(() => {
+    globalThis.IS_REACT_ACT_ENVIRONMENT = true
+    state = undefined
+    container = document.createElement("div")
+    document.body.append(container)
+    root = createRoot(container)
+  })
+
+  afterEach(() => {
+    act(() => {
+      root.unmount()
+    })
+    container.remove()
+  })
+
+  test("renders a labelled button", () => {
+    setViewportWidth(375)
+    renderShell()
+
+    const button = trigger()
+    expect(button).not.toBeNull()
+    expect(button?.textContent).toContain("Toggle Sidebar")
+  })
+
+  test("opens the sidebar sheet on a mobile viewport", () => {
+    setViewportWidth(375)
+    renderShell()
+    expect(state?.isMobile).toBe(true)
+    expect(state?.openMobile).toBe(false)
+
+    const button = trigger()
+    if (!button) {
+      throw new Error("mobile trigger did not render")
+    }
+    click(button)
+
+    expect(state?.openMobile).toBe(true)
+  })
+
+  test("closes the sheet when tapped again", () => {
+    setViewportWidth(375)
+    renderShell()
+
+    const button = trigger()
+    if (!button) {
+      throw new Error("mobile trigger did not render")
+    }
+    click(button)
+    expect(state?.openMobile).toBe(true)
+
+    click(button)
+    expect(state?.openMobile).toBe(false)
+  })
+
+  test("still renders above the breakpoint so callers control visibility", () => {
+    // The button hides itself nowhere — the shell wraps it in an `md:hidden`
+    // container. A caller with an always-mobile shell can render it unwrapped.
+    setViewportWidth(1440)
+    renderShell()
+
+    expect(trigger()).not.toBeNull()
+    expect(state?.isMobile).toBe(false)
+  })
+})
diff --git a/packages/ui/__tests__/use-mobile.test.tsx b/packages/ui/__tests__/use-mobile.test.tsx
new file mode 100644
index 000000000..0312ec4fd
--- /dev/null
+++ b/packages/ui/__tests__/use-mobile.test.tsx
@@ -0,0 +1,87 @@
+import { setViewportWidth } from "@chatbotx.io/vitest-config/setup-dom"
+import { act } from "react"
+import { createRoot, type Root } from "react-dom/client"
+import { afterEach, beforeEach, describe, expect, test } from "vitest"
+import { MOBILE_BREAKPOINT, useIsMobile } from "../src/hooks/use-mobile"
+
+function Probe({ onRead }: { onRead: (value: boolean) => void }) {
+  onRead(useIsMobile())
+  return null
+}
+
+describe("useIsMobile", () => {
+  let container: HTMLDivElement
+  let root: Root
+  let latest: boolean | undefined
+
+  const render = () => {
+    act(() => {
+      root.render(
+        <Probe
+          onRead={(value) => {
+            latest = value
+          }}
+        />,
+      )
+    })
+  }
+
+  beforeEach(() => {
+    globalThis.IS_REACT_ACT_ENVIRONMENT = true
+    latest = undefined
+    container = document.createElement("div")
+    document.body.append(container)
+    root = createRoot(container)
+  })
+
+  afterEach(() => {
+    act(() => {
+      root.unmount()
+    })
+    container.remove()
+  })
+
+  test("reports mobile one pixel below the breakpoint", () => {
+    setViewportWidth(MOBILE_BREAKPOINT - 1)
+    render()
+
+    expect(latest).toBe(true)
+  })
+
+  test("reports desktop exactly at the breakpoint", () => {
+    setViewportWidth(MOBILE_BREAKPOINT)
+    render()
+
+    expect(latest).toBe(false)
+  })
+
+  test("reports desktop well above the breakpoint", () => {
+    setViewportWidth(1440)
+    render()
+
+    expect(latest).toBe(false)
+  })
+
+  test("follows the viewport when it crosses the breakpoint", () => {
+    setViewportWidth(1440)
+    render()
+    expect(latest).toBe(false)
+
+    act(() => {
+      setViewportWidth(375)
+    })
+    expect(latest).toBe(true)
+
+    act(() => {
+      setViewportWidth(1024)
+    })
+    expect(latest).toBe(false)
+  })
+
+  test("stays paired with Tailwind's md breakpoint", () => {
+    // The hook's JS branch and every `md:` CSS branch must agree about which
+    // layout is showing. Tailwind v4's stock `md` is 48rem = 768px and this
+    // repo defines no `--breakpoint-*` override.
+    expect(MOBILE_BREAKPOINT).toBe(768)
+  })
+})
diff --git a/packages/ui/src/components/data-table/data-table-row-card.tsx b/packages/ui/src/components/data-table/data-table-row-card.tsx
new file mode 100644
index 000000000..fb469928f
--- /dev/null
+++ b/packages/ui/src/components/data-table/data-table-row-card.tsx
@@ -0,0 +1,69 @@
+import { cn } from "@chatbotx.io/ui/lib/utils"
+import { flexRender, type Row } from "@tanstack/react-table"
+
+/**
+ * Generic mobile card for one table row, for use as `DataTable`'s `mobileCard`.
+ *
+ * It renders the row's own cells through `flexRender`, so every cell keeps the
+ * renderer, formatting, and interactivity the table column already defines —
+ * there is no second copy of a cell to drift, and no new translation keys: the
+ * field names come from each column's `meta.label`.
+ *
+ * The `select` and `actions` columns are lifted into a header strip, since a
+ * checkbox and a row menu read as chrome rather than as fields. Any column
+ * without a `meta.label` still renders, just without a label.
+ *
+ * Tables whose card view should show *fewer* fields, or a bespoke arrangement,
+ * should pass their own `mobileCard` instead of this.
+ */
+
+const CHROME_COLUMN_IDS = new Set(["select", "actions"])
+
+export function DataTableRowCard<TData>({
+  row,
+  className,
+}: {
+  row: Row<TData>
+  className?: string
+}) {
+  const cells = row.getVisibleCells()
+  const chrome = cells.filter((cell) => CHROME_COLUMN_IDS.has(cell.column.id))
+  const fields = cells.filter((cell) => !CHROME_COLUMN_IDS.has(cell.column.id))
+
+  return (
+    <div
+      className={cn("flex flex-col gap-2 rounded-md border p-3", className)}
+      data-state={row.getIsSelected() && "selected"}
+    >
+      {chrome.length > 0 && (
+        <div className="flex items-center justify-between gap-2">
+          {chrome.map((cell) => (
+            <div key={cell.id}>
+              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+            </div>
+          ))}
+        </div>
+      )}
+      <dl className="flex flex-col gap-1.5">
+        {fields.map((cell) => {
+          const label = cell.column.columnDef.meta?.label
+          return (
+            <div
+              className="flex items-baseline justify-between gap-3"
+              key={cell.id}
+            >
+              {label ? (
+                <dt className="shrink-0 text-muted-foreground text-xs">
+                  {label}
+                </dt>
+              ) : null}
+              <dd className="min-w-0 text-sm ltr:text-right rtl:text-left">
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </dd>
+            </div>
+          )
+        })}
+      </dl>
+    </div>
+  )
+}
diff --git a/packages/ui/src/components/data-table/data-table-toolbar.tsx b/packages/ui/src/components/data-table/data-table-toolbar.tsx
index 51903c92b..f4af9bde3 100644
--- a/packages/ui/src/components/data-table/data-table-toolbar.tsx
+++ b/packages/ui/src/components/data-table/data-table-toolbar.tsx
@@ -41,7 +41,9 @@ export function DataTableToolbar<TData>({
       role="toolbar"
       aria-orientation="horizontal"
       className={cn(
-        "flex w-full items-start justify-between gap-2 p-1",
+        // Stacked on a phone: the filter row and the action row cannot share a
+        // line once a filter grows to the full width.
+        "flex w-full flex-col items-stretch justify-between gap-2 p-1 sm:flex-row sm:items-start",
         className,
       )}
       {...props}
@@ -67,9 +69,7 @@ export function DataTableToolbar<TData>({
           </Button>
         )}
       </div>
-      <div className="flex items-center gap-2">
-        {children}
-      </div>
+      <div className="flex items-center justify-end gap-2">{children}</div>
     </div>
   )
 }
@@ -95,20 +95,23 @@ function DataTableToolbarFilter<TData>({
               placeholder={columnMeta.placeholder ?? columnMeta.label}
               value={(column.getFilterValue() as string) ?? ""}
               onChange={(event) => column.setFilterValue(event.target.value)}
-              className="h-8 w-40 lg:w-56"
+              className="h-8 w-full sm:w-40 lg:w-56"
             />
           )
 
         case "number":
           return (
-            <div className="relative">
+            <div className="relative w-full sm:w-auto">
               <Input
                 type="number"
                 inputMode="numeric"
                 placeholder={columnMeta.placeholder ?? columnMeta.label}
                 value={(column.getFilterValue() as string) ?? ""}
                 onChange={(event) => column.setFilterValue(event.target.value)}
-                className={cn("h-8 w-[120px]", columnMeta.unit && "pe-8")}
+                className={cn(
+                  "h-8 w-full sm:w-[120px]",
+                  columnMeta.unit && "pe-8",
+                )}
               />
               {columnMeta.unit && (
                 <span className="absolute top-0 end-0 bottom-0 flex items-center rounded-e-md bg-accent px-2 text-muted-foreground text-sm">
diff --git a/packages/ui/src/components/data-table/data-table.tsx b/packages/ui/src/components/data-table/data-table.tsx
index 12d6eba88..c44a8d3f8 100644
--- a/packages/ui/src/components/data-table/data-table.tsx
+++ b/packages/ui/src/components/data-table/data-table.tsx
@@ -1,4 +1,8 @@
-import { flexRender, type Table as TanstackTable } from "@tanstack/react-table"
+import {
+  flexRender,
+  type Row,
+  type Table as TanstackTable,
+} from "@tanstack/react-table"
 import type * as React from "react"
 
 import { DataTablePagination } from "@chatbotx.io/ui/components/data-table/data-table-pagination"
@@ -20,28 +24,75 @@ interface DataTableProps<TData> extends React.ComponentProps<"div"> {
   labels?: DataTablePaginationLabels & {
     noResults?: string
   }
+  /**
+   * Whether the bordered table region scrolls horizontally when its columns
+   * exceed the available width.
+   *
+   * Defaults to `true`. Clipping is only ever right for a table whose columns
+   * are guaranteed to fit; every other table loses its rightmost columns with
+   * no way to reach them, which on a phone is most of the row.
+   */
   scrollable?: boolean
+  /**
+   * Renders one row as a card for narrow viewports.
+   *
+   * When supplied, the card list replaces the table below `md` and the table
+   * takes over from `md` up — a wide table reduced to horizontal scrolling is
+   * readable but miserable to work through on a phone. Toolbar and pagination
+   * are shared by both.
+   *
+   * The switch is CSS, not a media-query hook, so the correct layout is present
+   * in the first paint instead of flipping after hydration. Both trees are in
+   * the DOM, which is why this is opt-in: pay the duplication only where the
+   * card view earns it.
+   */
+  mobileCard?: (row: Row<TData>) => React.ReactNode
 }
 
 export function DataTable<TData>({
   table,
   actionBar,
   labels,
-  scrollable = false,
+  scrollable = true,
+  mobileCard,
   children,
   className,
   ...props
 }: DataTableProps<TData>) {
+  const rows = table.getRowModel().rows
+  const noResults = labels?.noResults ?? "No results."
+
   return (
     <div
       className={cn("flex w-full flex-col gap-2.5 overflow-auto", className)}
       {...props}
     >
       {children}
+      {mobileCard && (
+        <div
+          className="flex flex-col gap-2 md:hidden"
+          data-slot="data-table-cards"
+        >
+          {rows.length ? (
+            rows.map((row) => (
+              <div
+                data-slot="data-table-card"
+                data-state={row.getIsSelected() && "selected"}
+                key={row.id}
+              >
+                {mobileCard(row)}
+              </div>
+            ))
+          ) : (
+            <div className="rounded-md border p-6 text-center">{noResults}</div>
+          )}
+        </div>
+      )}
       <div
         className={cn(
           "rounded-md border",
           scrollable ? "overflow-x-auto" : "overflow-hidden",
+          mobileCard && "hidden md:block",
         )}
       >
         <Table>
@@ -72,8 +123,8 @@ export function DataTable<TData>({
             ))}
           </TableHeader>
           <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map((row) => (
+            {rows.length ? (
+              rows.map((row) => (
                 <TableRow
                   key={row.id}
                   data-state={row.getIsSelected() && "selected"}
@@ -89,10 +140,7 @@ export function DataTable<TData>({
                             : cell.column.getSize(),
                       }}
                     >
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext(),
-                      )}
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
                     </TableCell>
                   ))}
                 </TableRow>
@@ -103,7 +151,7 @@ export function DataTable<TData>({
                   colSpan={table.getAllColumns().length}
                   className="h-24 text-center"
                 >
-                  {labels?.noResults ?? "No results."}
+                  {noResults}
                 </TableCell>
               </TableRow>
             )}
diff --git a/packages/ui/src/components/ui/dialog.tsx b/packages/ui/src/components/ui/dialog.tsx
index 0957ddd37..98d80b29e 100644
--- a/packages/ui/src/components/ui/dialog.tsx
+++ b/packages/ui/src/components/ui/dialog.tsx
@@ -52,10 +52,18 @@ function DialogContent({
   return (
     <DialogPortal>
       <DialogOverlay />
+      {/*
+        Width is `w-[calc(100%-2rem)]`, not `w-full`, so the 1rem gutter
+        survives a caller's `className`. tailwind-merge resolves `max-w-*` by
+        group, so a consumer passing an unprefixed `max-w-lg` replaces the
+        `max-w-[calc(100%-2rem)]` guard below — on a phone that produced an
+        edge-to-edge dialog. The width caps it independently. On any viewport
+        wide enough for the `max-w` to bite, this is a no-op.
+      */}
       <DialogPrimitive.Popup
         data-slot="dialog-content"
         className={cn(
-          "fixed top-1/2 start-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] ltr:-translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "fixed top-1/2 start-1/2 z-50 grid w-[calc(100%-2rem)] max-w-[calc(100%-2rem)] ltr:-translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
diff --git a/packages/ui/src/components/ui/sidebar.tsx b/packages/ui/src/components/ui/sidebar.tsx
index 4bc23bad4..3e21ecb7d 100644
--- a/packages/ui/src/components/ui/sidebar.tsx
+++ b/packages/ui/src/components/ui/sidebar.tsx
@@ -8,6 +8,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
+  MenuIcon,
 } from "lucide-react"
 
 import { useIsMobile } from "@chatbotx.io/ui/hooks/use-mobile"
@@ -292,6 +293,43 @@ function SidebarTrigger({
   )
 }
 
+/**
+ * Menu button for the mobile layout, where `Sidebar` renders as a `Sheet`.
+ *
+ * `SidebarTrigger` is a rail-collapse affordance: a small chevron that only
+ * reads as "collapse this column" next to a visible sidebar. Below the mobile
+ * breakpoint there is no column to collapse, so the same control needs the
+ * conventional hamburger shape and a full touch target.
+ *
+ * Render this inside a container that is itself hidden from `md` up; the button
+ * does not hide itself, so a caller can also use it in an always-mobile shell.
+ */
+function SidebarMobileTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      className={cn("size-9", className)}
+      data-sidebar="mobile-trigger"
+      data-slot="sidebar-mobile-trigger"
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      size="icon"
+      variant="ghost"
+      {...props}
+    >
+      <MenuIcon className="size-5" />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
 function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
   const { toggleSidebar } = useSidebar()
 
@@ -739,6 +777,7 @@ export {
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
+  SidebarMobileTrigger,
   SidebarProvider,
   SidebarRail,
   SidebarSeparator,
diff --git a/packages/ui/src/hooks/use-mobile.ts b/packages/ui/src/hooks/use-mobile.ts
index 2b0fe1dfe..f5e82041c 100644
--- a/packages/ui/src/hooks/use-mobile.ts
+++ b/packages/ui/src/hooks/use-mobile.ts
@@ -1,8 +1,32 @@
 import * as React from "react"
 
-const MOBILE_BREAKPOINT = 768
+/**
+ * Viewport width, in px, below which the UI switches to its mobile layout.
+ *
+ * This is deliberately the same value as Tailwind's `md` breakpoint (48rem).
+ * The project has no `tailwind.config.*` — it is Tailwind v4 CSS-first, themed
+ * from `packages/ui/src/styles/default.css`, with no `--breakpoint-*` override
+ * — so `md` is the stock 768px. Components pair a CSS `md:` branch with this
+ * hook, and the two must agree or the JS and CSS halves of a responsive
+ * component disagree about which layout is showing.
+ *
+ * Change one, change the other.
+ */
+export const MOBILE_BREAKPOINT = 768
 
-export function useIsMobile() {
+/**
+ * Whether the viewport is narrower than {@link MOBILE_BREAKPOINT}, or
+ * `undefined` before the first client-side measurement.
+ *
+ * Prefer {@link useIsMobile} for anything a CSS `md:` branch could also express:
+ * guessing "desktop" for one frame is invisible when the swap is only styling.
+ *
+ * Reach for this hook instead when the two layouts mount *different, expensive*
+ * subtrees — the inbox, where a wrong first guess would mount the conversation
+ * list, message list, and contact panel twice and fire their fetches twice.
+ * Hold rendering until this resolves.
+ */
+export function useIsMobileState(): boolean | undefined {
   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
 
   React.useEffect(() => {
@@ -15,5 +39,9 @@ export function useIsMobile() {
     return () => mql.removeEventListener("change", onChange)
   }, [])
 
-  return !!isMobile
+  return isMobile
+}
+
+export function useIsMobile() {
+  return !!useIsMobileState()
 }
diff --git a/packages/vitest-config/package.json b/packages/vitest-config/package.json
index 6a8c765e3..1a5f2d1cb 100644
--- a/packages/vitest-config/package.json
+++ b/packages/vitest-config/package.json
@@ -10,6 +10,7 @@
     "./nextjs": "./src/nextjs.ts",
     "./msw": "./src/msw.ts",
     "./setup-env": "./src/setup-env.ts",
+    "./setup-dom": "./src/setup-dom.ts",
     "./setup-msw": "./src/setup-msw.ts"
   },
   "scripts": {
diff --git a/packages/vitest-config/src/react.ts b/packages/vitest-config/src/react.ts
index e2a8e03d8..c6942999b 100644
--- a/packages/vitest-config/src/react.ts
+++ b/packages/vitest-config/src/react.ts
@@ -1,17 +1,25 @@
+import { fileURLToPath } from "node:url"
 import nodeConfig from "@chatbotx.io/vitest-config/node"
 import react from "@vitejs/plugin-react"
 import { mergeConfig, type ViteUserConfig } from "vitest/config"
 
+const setupDomPath = fileURLToPath(new URL("./setup-dom.ts", import.meta.url))
+
 /**
  * Vitest preset for React libraries.
  *
  * Switches the environment to `jsdom` so React Testing Library and DOM APIs
  * work, and adds `@vitejs/plugin-react` for JSX transform.
+ *
+ * `setupFiles` is appended to the base preset's list (mergeConfig concatenates
+ * arrays), so the node setup still runs first and `setup-dom` only fills the
+ * DOM gaps jsdom leaves — today, `window.matchMedia`.
  */
 const config: ViteUserConfig = mergeConfig(nodeConfig, {
   plugins: [react()],
   test: {
     environment: "jsdom",
+    setupFiles: [setupDomPath],
   },
 })
 
diff --git a/packages/vitest-config/src/setup-dom.ts b/packages/vitest-config/src/setup-dom.ts
new file mode 100644
index 000000000..4765376e5
--- /dev/null
+++ b/packages/vitest-config/src/setup-dom.ts
@@ -0,0 +1,195 @@
+import { afterEach } from "vitest"
+
+/**
+ * jsdom ships no `window.matchMedia`, so anything that reads a media query —
+ * `useIsMobile`, the shadcn `Sidebar` mobile branch, and every responsive
+ * component built on them — throws on first render under the `react` and
+ * `nextjs` presets.
+ *
+ * This installs a minimal but *live* implementation. Queries are evaluated
+ * against `window.innerWidth`, and a `resize` event re-evaluates every
+ * outstanding query, firing `change` on the ones whose result flipped. Tests
+ * can therefore drive a breakpoint the way a real browser would:
+ *
+ *     setViewportWidth(375)
+ *
+ * Only width features are understood (`min-width` / `max-width`), which is the
+ * complete set this repo queries today. A query with no width feature — or one
+ * this parser does not recognise — evaluates to `false` rather than throwing,
+ * matching the "no match" behaviour a browser would report for an unsupported
+ * feature.
+ *
+ * A real `window.matchMedia` (jsdom gaining one, or a workspace providing its
+ * own) is left untouched.
+ */
+
+type ChangeListener = (event: MediaQueryListEvent) => void
+
+type TrackedQuery = {
+  readonly media: string
+  readonly listeners: Set<ChangeListener>
+  matches: boolean
+}
+
+const WIDTH_FEATURE = /\(\s*(min|max)-width\s*:\s*([\d.]+)px\s*\)/gi
+
+const DEFAULT_VIEWPORT_WIDTH = 1024
+
+const tracked = new Set<TrackedQuery>()
+
+/**
+ * Evaluate every width feature in `media` against the current viewport. All
+ * features must hold (queries in this repo join them with `and`), and a query
+ * carrying no width feature at all never matches.
+ */
+function evaluateQuery(media: string): boolean {
+  const width = window.innerWidth
+  let sawFeature = false
+
+  WIDTH_FEATURE.lastIndex = 0
+  let match = WIDTH_FEATURE.exec(media)
+
+  while (match !== null) {
+    sawFeature = true
+    const isMin = match[1]?.toLowerCase() === "min"
+    const bound = Number.parseFloat(match[2] ?? "")
+
+    if (Number.isNaN(bound)) {
+      return false
+    }
+    if (isMin ? width < bound : width > bound) {
+      return false
+    }
+
+    match = WIDTH_FEATURE.exec(media)
+  }
+
+  return sawFeature
+}
+
+function createMediaQueryList(media: string): MediaQueryList {
+  const entry: TrackedQuery = {
+    media,
+    listeners: new Set<ChangeListener>(),
+    matches: evaluateQuery(media),
+  }
+  tracked.add(entry)
+
+  const list: MediaQueryList = {
+    get matches() {
+      return entry.matches
+    },
+    get media() {
+      return entry.media
+    },
+    onchange: null,
+    addEventListener: (
+      type: string,
+      listener: EventListenerOrEventListenerObject,
+    ) => {
+      if (type === "change" && typeof listener === "function") {
+        entry.listeners.add(listener as ChangeListener)
+      }
+    },
+    removeEventListener: (
+      type: string,
+      listener: EventListenerOrEventListenerObject,
+    ) => {
+      if (type === "change" && typeof listener === "function") {
+        entry.listeners.delete(listener as ChangeListener)
+      }
+    },
+    // Deprecated Safari-era API, still called by some libraries.
+    addListener: (listener: ChangeListener | null) => {
+      if (listener) {
+        entry.listeners.add(listener)
+      }
+    },
+    removeListener: (listener: ChangeListener | null) => {
+      if (listener) {
+        entry.listeners.delete(listener)
+      }
+    },
+    dispatchEvent: () => true,
+  } as MediaQueryList
+
+  return list
+}
+
+/** Re-evaluate every live query and notify the ones that changed. */
+function refreshTrackedQueries(): void {
+  for (const entry of tracked) {
+    const next = evaluateQuery(entry.media)
+    if (next === entry.matches) {
+      continue
+    }
+    entry.matches = next
+
+    const event = { matches: next, media: entry.media } as MediaQueryListEvent
+    for (const listener of entry.listeners) {
+      listener(event)
+    }
+  }
+}
+
+/**
+ * Set the viewport width and let every outstanding media query react, exactly
+ * as a browser resize would. Returns nothing; read the effect through the
+ * component under test.
+ */
+export function setViewportWidth(width: number): void {
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    writable: true,
+    value: width,
+  })
+  refreshTrackedQueries()
+  window.dispatchEvent(new Event("resize"))
+}
+
+/**
+ * jsdom has no `ResizeObserver`. Anything that measures its own box — the
+ * resizable panel group behind the inbox, chart containers — throws on mount
+ * without it. Observation is a no-op: jsdom reports zero-size boxes anyway, so
+ * a callback would carry no information. The constructor existing is what these
+ * components actually need.
+ */
+class NoopResizeObserver implements ResizeObserver {
+  disconnect(): void {
+    // no-op
+  }
+  observe(): void {
+    // no-op
+  }
+  unobserve(): void {
+    // no-op
+  }
+}
+
+if (
+  typeof window !== "undefined" &&
+  typeof window.ResizeObserver !== "function"
+) {
+  Object.defineProperty(window, "ResizeObserver", {
+    configurable: true,
+    writable: true,
+    value: NoopResizeObserver,
+  })
+}
+
+if (typeof window !== "undefined" && typeof window.matchMedia !== "function") {
+  Object.defineProperty(window, "matchMedia", {
+    configurable: true,
+    writable: true,
+    value: (media: string) => createMediaQueryList(media),
+  })
+
+  window.addEventListener("resize", refreshTrackedQueries)
+
+  afterEach(() => {
+    // Queries registered by a finished test can never fire again; dropping them
+    // keeps the registry from growing across a long suite.
+    tracked.clear()
+    setViewportWidth(DEFAULT_VIEWPORT_WIDTH)
+  })
+}
diff --git a/packages/vitest-config/tsconfig.json b/packages/vitest-config/tsconfig.json
index c0a90ef19..3eca1d21e 100644
--- a/packages/vitest-config/tsconfig.json
+++ b/packages/vitest-config/tsconfig.json
@@ -1,5 +1,11 @@
 {
   "extends": "@chatbotx.io/typescript-config/base.json",
+  "compilerOptions": {
+    // `setup-dom.ts` runs inside the jsdom environment this package configures,
+    // so it needs the DOM lib the base config leaves out. Same override as
+    // `@chatbotx.io/typescript-config/react-library.json`.
+    "lib": ["ESNext", "DOM"]
+  },
   "include": ["src/**/*.ts"],
   "exclude": ["node_modules", "dist"]
 }