fix(web): the shell works at phone width with an overlay sidebar and full-width drawer (CL-9590)

apps/web/src/bench/bench-drawer.tsx

@@ -1,4 +1,5 @@
 import { Button } from "@corbits/react-ui";
+import "./drawer-narrow.css";
 import { X } from "@/lib/icons";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 

apps/web/src/bench/drawer-narrow.css

@@ -0,0 +1,20 @@
+/* Phone width: the drawer is a full-width overlay above its scrim. */
+@media (max-width: 860px) {
+  .wb .drawer {
+    inset: 0;
+    width: auto;
+    border-radius: 0;
+    transform: translateX(100%);
+    opacity: 1;
+    transition: transform 300ms var(--ease-drawer);
+  }
+  .wb[data-drawer="open"] .drawer {
+    transform: none;
+  }
+  .wb:not([data-drawer="open"]) .drawer {
+    visibility: hidden;
+    transition:
+      transform 300ms var(--ease-drawer),
+      visibility 0s 300ms;
+  }
+}

apps/web/src/lib/icons/index.tsx

@@ -15,6 +15,7 @@ export {
   ArrowUp,
   ArrowUpDown as ArrowsDownUp,
   Bell,
+  PanelLeft,
   BookMarked as BookBookmark,
   Bot as Robot,
   Captions,

apps/web/src/shell/app-shell.tsx

@@ -1,7 +1,9 @@
 // Canvas state is NOT owned here — see `shell-chrome-provider.tsx` for why
 // it has to be visible to the command palette too.
 
-import { lazy, Suspense, useRef, useState, type ReactNode, type RefObject } from "react";
+import { lazy, Suspense, useEffect, useRef, useState, type ReactNode, type RefObject } from "react";
+import { Button } from "@corbits/react-ui";
+import { PanelLeft } from "@/lib/icons";
 import type { ArtifactSaveState } from "@/library";
 
 import { WorkbenchLoadingState } from "@/chat";
@@ -26,6 +28,7 @@ import {
 import { Sidebar } from "./sidebar";
 import { ShellContextMenu } from "./context-menu/shell-context-menu";
 import { FirstRunTour } from "./first-run-tour";
+import "./shell-narrow.css";
 
 const CanvasColumn = lazy(async () => ({
   default: (await import("./canvas-column")).CanvasColumn,
@@ -120,6 +123,17 @@ export function AppShell({
   const closeCanvas = useCloseCanvas();
   const toggleCanvasFocus = useToggleCanvasFocus();
   const mainRef = useRef<HTMLDivElement>(null);
+  // Keyed by path so any navigation closes the phone-width sidebar.
+  const [sidebarOpenFor, setSidebarOpenFor] = useState<string | null>(null);
+  const sidebarOpen = sidebarOpenFor === path;
+  useEffect(() => {
+    if (!sidebarOpen) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setSidebarOpenFor(null);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [sidebarOpen]);
   const pendingCount = usePendingApprovalCount(tenantId);
   const pendingChip =
     pendingCount === null
@@ -132,7 +146,22 @@ export function AppShell({
         : { tone: "ok" as const, label: "All caught up" };
 
   return (
-    <div className="shell-frame">
+    <div className="shell-frame" data-sidebar-open={sidebarOpen}>
+      <Button
+        variant="ghost"
+        size="sm"
+        className="shell-sidebar-toggle"
+        aria-label="Toggle sidebar"
+        aria-expanded={sidebarOpen}
+        onClick={() => setSidebarOpenFor(sidebarOpen ? null : path)}
+      >
+        <PanelLeft />
+      </Button>
+      <div
+        className="shell-sidebar-scrim"
+        onClick={() => setSidebarOpenFor(null)}
+        aria-hidden="true"
+      />
       <Sidebar path={path} onNavigate={navigate} />
       <div className="shell-main" ref={mainRef}>
         <ScrollToTop key={path} containerRef={mainRef} />

apps/web/src/shell/shell-narrow.css

@@ -0,0 +1,59 @@
+/* Phone width: the sidebar is an off-canvas overlay, opened by the toggle. */
+.shell-sidebar-toggle,
+.shell-sidebar-scrim {
+  display: none;
+}
+
+@media (max-width: 860px) {
+  .shell-sidebar-toggle {
+    display: inline-flex;
+    position: fixed;
+    top: 0.5rem;
+    left: 0.5rem;
+    z-index: 30;
+  }
+  .shell-frame .stage-top-bar {
+    padding-left: 3rem;
+  }
+  .shell-frame .shell-sidebar {
+    position: fixed;
+    inset: 0 auto 0 0;
+    z-index: 45;
+    width: min(17.5rem, 85vw);
+    min-width: 0;
+    box-shadow: var(--overlay);
+    transition:
+      transform 300ms var(--ease-drawer),
+      visibility 0s 300ms;
+    transform: translateX(-100%);
+    visibility: hidden;
+  }
+  .shell-frame[data-sidebar-open="true"] .shell-sidebar {
+    transform: none;
+    visibility: visible;
+    transition: transform 300ms var(--ease-drawer);
+  }
+  .shell-frame[data-sidebar-open="true"] .shell-sidebar-toggle {
+    visibility: hidden;
+  }
+  .shell-sidebar-scrim {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 44;
+    background: rgb(0 0 0 / 24%);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 200ms ease-out;
+  }
+  .shell-frame[data-sidebar-open="true"] .shell-sidebar-scrim {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .shell-frame .shell-sidebar {
+    transition: none;
+  }
+}