[joesmart]

改了什么

接着 #111（#94）的右栏抽屉做，没有另起一套：

• 左侧栏在窄窗口下改成抽屉：顶上一个「打开侧栏」按钮，选完群或换页就自己收起，点遮罩、按 Esc 也能收；开着时被盖住的部分设 inert，Tab 走不进去。PanelScrim 泛化成 Scrim，左右两个抽屉共用。
• 对话区占满宽度：网格改成单列，整页没有横向滚动，输入框贴底。
• 触控目标不矮于 40px：今天页的行按钮、模板、审批卡的批准/拒绝、发送按钮、Bot 名片上的按钮、侧栏各项、设置关闭按钮。Bot 名片的按钮在手机上换到名片下面一行，不然描述会被挤成一字一行。
• 设置窗口在 700px 以下铺满屏幕（100vw × 100dvh，不留圆角），关闭按钮 40px。
• 1152 以上、以及 窄窗口下右栏改成抽屉，对话区不再被挤 (#94) #111 的右栏抽屉行为都不变。

为什么断点取 752

和 #111 用的是同一条规则：对话区不窄于 480px。右栏抽屉的断点是 --sidebar-w + --panel-w + 480 = 1152，侧栏抽屉照着算就是 --sidebar-w + 480 = 752。两个断点都从 spacing.css 的 token 读，CSS 里只认 JS 打上的 .is-narrow / .is-nav-open，不写死数字。

实测 768 宽时侧栏常驻，对话区还有 496px，今天页能正常排开，所以平板竖屏保留常驻侧栏；390 走抽屉。

Esc 归属

同一时刻只挂一个 Esc 监听：侧栏抽屉开着时 Esc 只关它；有浮层（设置、新建项目）时遮罩不挂监听；右栏抽屉开着时顶栏也设 inert，键盘摸不到「打开侧栏」，两个抽屉不会同时开着。

怎么验证的

export E2E_API_PORT=3911 E2E_WEB_PORT=5911
pnpm format:check      → All matched files use Prettier code style!
pnpm typecheck         → 退出码 0
pnpm lint              → 退出码 0（警告都在没改的文件里）
pnpm --filter @baize/web test
  → Test Files  49 passed (49) / Tests  358 passed (358)
  → Playwright 529 passed (8.1m)

新加 packages/web/e2e/mobile-web.spec.ts，共 11 条：390×844 亮暗两套各三条（抽屉选群后收起、对话区占满、发消息、无横向滚动；今天页审批按钮可见可点；设置全屏能关），390 宽另有群里审批卡、遮罩/Esc/Tab、任务详情、跨断点不回弹四条，768 宽一条，1280 宽回归一条。

e2e/fixtures.ts 的 openSettings 在有「打开侧栏」按钮时先拉开抽屉，否则 375px 下那三条老用例（04-settings、10-usage、p3-mcp-local-only）点不到账号按钮。

Closes #34

🤖 Generated with Claude Code

https://claude.ai/code/session_01Fn9pJBaFXzt4R575ecQeRi