fix(web-demo): 修正 RAG 匯出按鈕換列

[doggy8088]

摘要

修正 Browser Lab 切換至 RAG 模式後，Export 區域的右側按鈕超出控制欄並遭到裁切的問題。

問題原因

Export 區域使用 Flexbox 排列按鈕，但 .command-row-stack 未啟用 flex-wrap。RAG 模式會同時顯示 5 個匯出按鈕，所有按鈕被迫維持在同一列，因而超出控制欄的可用寬度。

修正內容

• 為 .command-row-stack 啟用 flex-wrap: wrap，讓按鈕依可用寬度自動流到下一列。
• 將 Export 按鈕的彈性基準設為 140px，維持桌面版與行動版的可讀寬度。
• 保留既有按鈕的 DOM 順序與操作行為，不改變任何匯出資料格式。
• 新增回歸測試，檢查 RAG 模式的 5 個按鈕確實分列，且按鈕與容器均沒有水平溢位。

影響範圍

• web-demo/public/styles.css：修正 Export 按鈕群組的 Flexbox 換列規則。
• web-demo/tests/browser.spec.mjs：加入桌面版與行動版的 RAG Export 版面測試。
• Rust 核心程式碼、RAG 匯出邏輯與既有下載流程均未變更。

驗證

• npm ci：通過。
• npm run build：通過。
• npm run test:e2e：16 項通過、4 項依既有桌面／行動版測試篩選條件跳過。
• RAG 換列窄測試：桌面版與行動版共 2 項通過。
• Playwright 版面檢查：1280px 桌面版與 390px 行動版均顯示 3 列按鈕。
• Playwright 邊界檢查：按鈕最右界未超出 Export 容器，頁面沒有水平溢位。
• Playwright 主控台檢查：沒有警告或錯誤。

審查重點

• RAG 模式下 Export 區域的 5 個按鈕應依序排成多列。
• 桌面版與行動版均應能完整看見 Manifest JSON 按鈕。

[coderabbitai]

Warning

Review limit reached

Next included review available in 54 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

This review ran on the open-source allowance, not this organization's plan, because the pull request author doesn't have an assigned seat. Waiting won't change this — ask an organization admin to assign them a seat, or add seats in Billing if every seat is already assigned, then retry.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: fd7ac16a-2acd-454b-afa2-29d437b4f243

📥 Commits

Reviewing files that changed from the base of the PR and between be4cf17 and a184714.

📒 Files selected for processing (2)

• web-demo/public/styles.css
• web-demo/tests/browser.spec.mjs

---

_{Comment @coderabbitai help to get the list of available commands.}

[Copilot]

🟢 Approval recommended

No unresolved issues were identified.

Pull request overview

Fixes RAG Export button wrapping in Browser Lab to prevent clipping on desktop and mobile.

Changes:

• Enables flex wrapping with a 140px button basis.
• Adds Playwright regression coverage for wrapping and overflow.

File summaries

File	Summary
web-demo/tests/browser.spec.mjs	Adds RAG layout regression coverage.
web-demo/public/styles.css	Updates Export button flex layout.

Review details

• Files reviewed: 2/2 changed files
• Comments generated: 0
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[shps951023]

AI Check :

已完成 review，沒有發現需要修改的問題。CSS 影響範圍只限於 Export 按鈕群組，新增的 Playwright 測試也確實同時涵蓋 desktop 與 mobile。
pm run build、RAG 精準測試（2 passed）及完整 
pm run test:e2e（16 passed、4 skipped）皆通過；另以 1280px 與 390px 實際檢查，五個按鈕均正常分成三列、沒有水平溢位，console 也沒有警告或錯誤。核准合併。