Sidebar becomes unusable at phone widths — needs a mobile overlay mode, not just "squeeze the center"

[ThomasNil]

The sidebar becomes unusable at real phone widths, not just cramped

@deepseek-ai/dsh-client-ui-layout's AppFrame has one responsive breakpoint, SIDEBAR_AUTO_COLLAPSE = 1024px. Below it the sidebar auto-collapses to the icon rail, and the code's own comment describes the intended behavior of manually re-expanding it: it "re-expands over the squeezed center" — i.e. the center column shrinks to make room, down to a 640px floor in computeColumns.

That's a reasonable tradeoff at tablet/narrow-laptop widths. At an actual phone width it isn't — I tested live at 375px (iPhone-ish) and got:

• Center column squeezed to ~95px (there's no lower bound protecting it once computeColumns falls through its third tier).
• The page title text wraps one character per line down the entire screen.
• The whole frame needs horizontal scroll to see the squeezed content, which shouldn't happen on a mobile page.
• The sidebar toggle itself became difficult to interact with reliably in this squeezed state.

Screenshots/measurements available if useful — happy to attach.

Rough fix I tried locally: a second, lower breakpoint (~640px) at which expanding the sidebar switches strategy entirely — render it as a fixed-position drawer over the content (with a dismiss-on-tap backdrop) instead of sharing grid columns with it, so the center column keeps the full viewport underneath. The component already has the pieces for this (an overlayLayer/shell.overlay slot sits right next to the sidebar column) — they're just not used for the sidebar's own mobile presentation.

I kept my version deliberately minimal (no slide animation, no swipe-to-dismiss, no accessibility focus-trap) since I don't have the real source/build pipeline set up to do this properly — posting as a Discussion rather than a PR for the same reason as my other one (#5057): this feels like something worth a proper implementation from the team (motion, gesture support, focus management) rather than freezing on a rough patch against the compiled bundle.

[liyangbing]

这个报告准确指出了 phone width 下的交互问题不是“把 sidebar 再挤窄一点”就能解决：一旦内容列降到约 95px，title wrapping、horizontal overflow 和 toggle 可操作性会同时失真。

我维护的独立 DeepSeek Harness 社区手册，其中 multi-Session presentation contract 对类似 overlay/slot 设计建议把布局与 Host 语义分开验收。对这个修复，我建议至少保留以下矩阵：

• 375 / 412 / 640 / 1024 px，portrait 与 landscape 分开测量；
• drawer 打开、关闭、遮罩点击、Escape、浏览器返回，以及焦点回到触发按钮；
• sidebar 展开时中心列不发生横向滚动，标题/Session 列表仍可键盘和屏幕阅读器访问；
• resize、重连和 Session 切换不重复注册 overlay，也不把当前 Session 选择状态丢给 drawer；
• 关闭实现后冷启动，对比默认 sidebar、Session 列表和无插件基线。

如果实现仍依赖现有 shell.overlay slot，请明确它是 Client plugin presentation seam，不等于新的 Host-owned sidebar API；这样后续版本升级和回滚边界会更清楚。该手册是社区整理，不代表官方 DeepSeek AI 项目。