From a184714194aa29b2b5b881854f92a1881e544d3f Mon Sep 17 00:00:00 2001
From: Will <doggy.huang@gmail.com>
Date: Sun, 13 Sep 2026 13:01:48 +0800
Subject: [PATCH] =?UTF-8?q?fix(web-demo):=20=E4=BF=AE=E6=AD=A3=20RAG=20?=
 =?UTF-8?q?=E5=8C=AF=E5=87=BA=E6=8C=89=E9=88=95=E6=8F=9B=E5=88=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修正切換至 RAG 模式後，Export 區域顯示多個按鈕時超出控制欄寬度而被右側裁切的問題。

問題原因：
- Export 按鈕容器使用 Flexbox，但未設定 flex-wrap。
- RAG 模式會額外顯示 Chunks JSONL、Chunks Markdown 與 Manifest JSON 三個按鈕。
- 所有按鈕被迫排在同一列，超出控制欄後由既有容器邊界裁切。

修正內容：
- 啟用 `.command-row-stack` 的 `flex-wrap: wrap`，讓按鈕依可用寬度自動流到下一列。
- 將 Export 按鈕的彈性基準設為 140px，在桌面版與行動版維持可讀的按鈕寬度。
- 新增 RAG Export 回歸測試，確認 5 個按鈕分成多列，且按鈕與容器均沒有水平溢位。

影響範圍：
- web-demo/public/styles.css：調整 Export 按鈕群組的 Flexbox 換列行為。
- web-demo/tests/browser.spec.mjs：新增桌面版與行動版的 RAG 按鈕版面驗證。
- 不變更 Rust 核心程式碼，也不改變任何匯出資料格式或操作流程。

驗證項目：
- npm ci
- npm run build
- npm run test:e2e：16 項通過、4 項依既有桌面／行動版測試篩選條件跳過。
- RAG 換列窄測試：桌面版與行動版共 2 項通過。
- Playwright 版面檢查：1280px 桌面版與 390px 行動版均顯示 3 列按鈕，沒有水平溢位。
- Playwright 主控台檢查：沒有警告或錯誤。
---
 web-demo/public/styles.css      |  5 +++++
 web-demo/tests/browser.spec.mjs | 29 ++++++++++++++++++++++++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/web-demo/public/styles.css b/web-demo/public/styles.css
index 620d13b..e235033 100644
--- a/web-demo/public/styles.css
+++ b/web-demo/public/styles.css
@@ -348,6 +348,11 @@ input:disabled {
 
 .command-row-stack {
   align-items: stretch;
+  flex-wrap: wrap;
+}
+
+.command-row-stack .button {
+  flex: 1 1 140px;
 }
 
 .button,
diff --git a/web-demo/tests/browser.spec.mjs b/web-demo/tests/browser.spec.mjs
index 8cad3a2..b929469 100644
--- a/web-demo/tests/browser.spec.mjs
+++ b/web-demo/tests/browser.spec.mjs
@@ -51,6 +51,33 @@ test("end cell limits the preview range", async ({ page }) => {
   await expect(page.getByRole("cell", { name: "MiniExcel", exact: true })).toBeVisible();
 });
 
+test("RAG export buttons wrap without clipping", async ({ page }) => {
+  await page.goto("/");
+  await expect(page.getByTestId("file-name")).toHaveText("miniexcel-browser-demo.xlsx");
+
+  await page.getByRole("tab", { name: "RAG", exact: true }).click();
+  await expect(page.getByRole("button", { name: "Chunks JSONL" })).toBeVisible();
+
+  const layout = await page.locator(".export-section .command-row-stack").evaluate((container) => {
+    const buttons = [...container.querySelectorAll("button:not([hidden])")];
+    const containerRect = container.getBoundingClientRect();
+    const rects = buttons.map((button) => button.getBoundingClientRect());
+    return {
+      buttonCount: buttons.length,
+      rowCount: new Set(rects.map((rect) => Math.round(rect.top))).size,
+      maxRight: Math.max(...rects.map((rect) => rect.right)),
+      containerRight: containerRect.right,
+      scrollWidth: container.scrollWidth,
+      clientWidth: container.clientWidth,
+    };
+  });
+
+  expect(layout.buttonCount).toBe(5);
+  expect(layout.rowCount).toBeGreaterThan(1);
+  expect(layout.maxRight).toBeLessThanOrEqual(layout.containerRight + 1);
+  expect(layout.scrollWidth).toBeLessThanOrEqual(layout.clientWidth + 1);
+});
+
 test("grouped analysis runs from the visual query plan", async ({ page }) => {
   await page.goto("/");
   await expect(page.getByTestId("file-name")).toHaveText("miniexcel-browser-demo.xlsx");
@@ -193,4 +220,4 @@ test("uploaded workbook shows metadata and requires hidden-sheet RAG opt-in", as
   await expect(page.locator("#previewTitle")).toContainText(visibleSheet);
   await expect(page.locator("#resultEyebrow")).toHaveText("Markdown conversion");
   await expect(page.locator("#downloadMarkdownButton")).toBeEnabled();
-});
\ No newline at end of file
+});