feat(web-shell): add mobile responsive view for TodoPanel - #5948
Conversation
- Desktop (>=600px): show full text 'Step 3 / 8' or '第 3 / 8 步' - Mobile (<600px): show compact text '3 / 8' with progress ring only - Add todo.stepFraction i18n key for both EN and ZH - Reduce summary padding on mobile for better space usage
|
Thanks for the PR! Template looks good ✓ — all required sections present, bilingual body, tested-on table filled, risk & scope filled in. On direction: this is a tight, well-scoped mobile UX fix for the web-shell TodoPanel — the summary pill wraps/overflows on narrow viewports because the On approach: the scope feels right — three files, ~30 lines, one concern. Media-query toggle between a full-text span and a compact fraction span is the simplest path; no JS resize observers, no new abstractions, no build-time machinery. Diff carries no drive-by refactors and no scope creep. One small question for the contributor to think about: the breakpoint Moving on to code review. 🔍 中文说明感谢贡献！ 模板完整 ✓ —— 所有必填项齐全，中英双语正文，tested-on 表格已填写，风险与范围已说明。 方向：这是一个针对 web-shell TodoPanel 的紧凑、聚焦的移动端 UX 修复 —— 摘要胶囊条在窄屏上会换行/溢出，因为 方案：范围合理 —— 三个文件、约 30 行、只解决一个问题。用媒体查询在全量文本 span 和紧凑分数 span 之间切换，是最简路径；没有 JS resize observer，没有新抽象，没有构建期魔法。diff 没有顺手重构，也没有范围蔓延。一个值得贡献者思考的小问题：断点 进入代码审查 🔍 — Qwen Code · qwen3.7-max |
|
Code review. My independent proposal before reading the diff: a CSS media query at ~600px that hides the A couple of small observations, none blocking:
Reuse check: no new utility, no parallel helper, no duplicated logic — the change uses the existing Testing — tmux not applicable. This is a CSS Reviewer test plan in the PR is solid — open web-shell, resize across 600px, confirm both viewports render correctly and the hover/focus tooltip still works. That's the right test, and it has to be run by a human in a browser. 中文说明代码审查。 在查看 diff 前，我的独立方案：在 ~600px 处加 CSS 媒体查询，隐藏 几个非阻塞的小观察：
复用性检查： 没有新工具函数、没有平行辅助代码、没有重复逻辑 —— 改动使用现有的 测试 —— tmux 不适用。 这是 CSS PR 中的 reviewer test plan 合理 —— 打开 web-shell，跨 600px 调整大小，确认两种视口渲染正确且 hover/focus tooltip 仍工作。这是正确的测试方式，必须由人工在浏览器里执行。 — Qwen Code · qwen3.7-max |
|
Stepping back: the PR matches my independent proposal almost exactly, the diff is minimal and focused on a single user-visible concern, and the implementation doesn't try to be clever. No new abstraction, no scope creep, no drive-by refactors — just a media query, two i18n keys, and two JSX spans. The kind of PR you wish every mobile tweak looked like. The one soft concern — a nonstandard Net: ships the fix cleanly, solves a real narrow-viewport annoyance in the TodoPanel, low risk to merge. Approving. ✅ 中文说明退一步看：PR 与我的独立方案几乎一致，diff 最小化且聚焦于单一用户可见问题，实现没有炫技。没有新抽象、没有范围蔓延、没有顺手重构 —— 就是一个媒体查询、两个 i18n key、两个 JSX span。希望每个移动端微调都能长这样。 唯一的柔性顾虑 —— 非标准的 结论：干净地交付了修复，解决了 TodoPanel 在窄视口下的真实烦恼，合并风险低。批准。✅ — Qwen Code · qwen3.7-max |
qwen-code-ci-bot
left a comment
qwen-code-ci-bot
left a comment
There was a problem hiding this comment.
LGTM, looks ready to ship. ✅
wenshao
left a comment
wenshao
left a comment
There was a problem hiding this comment.
No review findings. Downgraded from Approve to Comment: CI still running.
Clean, minimal responsive CSS change (3 files, +31/-1). The media query toggle between full text and compact fraction is the simplest correct approach. Accessibility is well-handled via the parent aria-label. Build passes, all 538 web-shell tests green.
— qwen3.7-max via Qwen Code /review
✅ Real-browser verification — TodoPanel responsive toggle works in EN & ZHThis is a viewport-driven CSS change, so jsdom/vitest can't see it — I rendered the actual Verdict: PASS — every breakpoint, both languages, plus a mutation A/B proving the behavior is this PR's.
What I observed (real Chromium, computed styles)
The breakpoint is exactly where the CSS says: ≥600px → full text, ≤599px → compact Mutation A/B (proves it's this PR)Reverting the 3 files to base and re-running: at 400px the base panel still renders the full Notes for the reviewer
🇨🇳 中文版本✅ 真实浏览器验证 —— TodoPanel 响应式切换在中英文下均正常这是依赖视口宽度的 CSS 改动，jsdom/vitest 看不到，所以我用 真实 Chromium（Playwright） 通过 web-shell 的 Vite 服务渲染了真实的 结论：PASS —— 每个断点、两种语言全部正确，并用变异 A/B 证明该行为来自本 PR。
观察结果（真实 Chromium，计算样式）
断点正好在 CSS 规定处：≥600px → 完整文本，≤599px → 紧凑 变异 A/B（证明来自本 PR）把 3 个文件 revert 到 base 后重跑：在 400px 下 base 面板仍渲染完整 给 reviewer 的说明
|
| font-variant-numeric: tabular-nums; | ||
| } | ||
|
|
||
| @media (max-width: 599px) { |
There was a problem hiding this comment.
[Suggestion] The 599px breakpoint is unique to this file. Every other responsive breakpoint in web-shell/client/components/ uses one of four values: 560px (DialogShell), 700px (StreamingStatus, StatusBar, Editor), 720px (StatusMessage, ContextUsageMessage, HelpDialog), or 760px (WebShellSidebar, WelcomeHeader, ToolApproval). At viewport widths 600–699px, the rest of the web-shell UI has already collapsed into its mobile layout, but TodoPanel still renders the full "Step 3 / 5" text — making it the last component to adapt.
Consider aligning with an existing breakpoint (e.g., 560px from DialogShell, which also handles narrow panel widths), or adding a brief comment explaining why 599px was chosen intentionally.
| @media (max-width: 599px) { | |
| @media (max-width: 560px) { |
— qwen3.7-max via Qwen Code /review
qwen-code-ci-bot
left a comment
qwen-code-ci-bot
left a comment
There was a problem hiding this comment.
No review findings. Downgraded from Approve to Comment: CI still running.
Clean, minimal responsive CSS change (3 files, +31/-1). The dual-span full/compact toggle via CSS media query is the simplest correct approach. Both EN and ZH locales covered. Accessibility preserved — the pre-existing aria-label on .summary gives screen readers the full text regardless of which visual variant is shown. Build and all 538 tests pass.
— qwen3.7-max via Qwen Code /review
3 participants
What this PR does
Adds responsive behavior to the TodoPanel's progress summary. On desktop (≥600px viewport width), the panel shows the full text like
Step 3 / 8(EN) or第 3 / 8 步(ZH). On mobile (<600px), it switches to a compact format showing only the fraction3 / 8alongside the progress ring, reducing horizontal space usage.Why it's needed
The TodoPanel summary text (
Step 3 / 8or第 3 / 8 步) is too long for narrow mobile viewports, causing the pill to wrap or overflow. The label (Step/步) is redundant on small screens where space is limited — the progress ring plus fraction already conveys the same information clearly.Reviewer Test Plan
How to verify
npm run build◐ Step 3 / 8(EN) or◐ 第 3 / 8 步(ZH), same as before◐ 3 / 8, with smaller paddingEvidence (Before & After)
N/A — responsive CSS change, behavior depends on viewport width.
Tested on
Environment (optional)
npm run buildon macOS.Risk & Scope
Linked Issues
N/A
中文说明
本 PR 做了什么
为 TodoPanel 的进度摘要添加响应式行为。桌面端（视口宽度 ≥600px）显示完整文本，如
Step 3 / 8（英文）或第 3 / 8 步（中文）。移动端（<600px）切换为紧凑格式，仅显示进度圆环和分数3 / 8，减少水平空间占用。为什么需要这个改动
TodoPanel 的摘要文本（
Step 3 / 8或第 3 / 8 步）在窄屏移动设备上过长，导致胶囊条换行或溢出。标签（Step/步）在空间有限的小屏幕上属于冗余信息——进度圆环加分数已经足够清晰地传达相同信息。风险与范围