feat(ratewise): E10 單幣別整頁 fold 佈局

[s123104]

Summary

實作 E10 單幣別整頁 fold 佈局（v1 主戰場）：PWA／行動瀏覽器首屏底界＝「匯率結果卡（含加入歷史紀錄動作）」底緣，8 視口零捲動可見；四價詳情、趨勢卡、資訊區移至 fold 下方自然捲動。

Refs：.claude/prds/single-converter-fold-design.md（E10 簡報 SSOT）

Fold 合約說明

• v1 fold 序：header → 幣別選擇＋金額輸入（含快速金額列）→ 交換 → 匯率結果卡（含加入歷史紀錄）＝fold 底界 → ——以下捲動—— 臺銀四價詳情卡 → 趨勢卡 → 資料來源資訊區。
• svh 決策落點：fold 預算以 --app-height 為 SSOT（index.html inline script／AppLayout JS 寫入 visualViewport.height；CSS fallback 由 100dvh 改為 100svh——webview 動態工具列下最保守可視高度，dvh 可能含宿主 UI 造成溢出）。查證：svh 為 Baseline 2022（Chrome 108+／Safari 15.4+／Firefox 101+），repo browserslist baseline widely available 涵蓋；Tailwind v3.4 原生支援 svh 單位（context7 官方文件確認）。
• 實作機制：fold 容器 min-h-[calc(var(--app-height,100svh)-80px-env(safe-area-inset-top))] 撐滿首屏（80px＝header 48＋內容 pt 16＋卡片 pt 16），內部 pb 64px（slim ≤360px 92px，對齊 mainScroll token）抵銷固定底導覽；結果卡 mt-auto 錨定 fold 底緣；md: 全部歸零（fix(ratewise): 平板 ≥1024 兩欄佈局適配（#594 二階） #643 兩欄無 fold 壓力）。
• v2：fold 底界＝keypad 底緣，feat(ratewise): E8 wave-A — v2 等值雙列功能補全第一波（快速金額／歷史寫入／方向翻轉／長按複製） #667 既有零捲動合約已達標，本 PR 僅驗證不回歸。

視口矩陣結果（e2e single-fold.spec.ts，全數通過）

視口	高度梯次	v1 歷史動作零捲動	v1 fold 下方在視口外	v1 可捲至底	v2 零捲動不回歸
360×640（最嚴）	tiny	✅	✅	✅	✅
360×740	compact	✅	✅	✅	✅
360×800（#675 snug 帶）	snug	✅	✅	✅	✅
375×667	short	✅	✅	✅	✅
390×700（GPT/IG/Threads webview 模擬）	short	✅	✅	✅	✅
390×844	tall	✅	✅	✅	✅
412×915	tall	✅	✅	✅	✅
430×932	tall	✅	✅	✅	✅

截圖矩陣：8 視口 × v1/v2 共 16 張存 screenshots/e10-fold-*.png（QA 暫存，未提交）。

壓縮手段摘要（沿用既有 height-tier，零新斷點）

• 趨勢圖移出結果卡：釋放首屏 48–80px（各梯次），為快速金額列騰出空間——fold 內容天然變薄，未動用額外壓縮。
• 快速金額列（fold 存在理由）：隱藏門檻自 tiny/micro 下移至 micro/nano（fold 矩陣下限 640px 內全程可見）；矩陣外極端高度（≤600px）仍保留既有梯次退場。
• 歷史動作：全梯次 min-h-11（44px 觸控合約；原僅 micro/nano 有下限，360×740 實測 42px 已修正）。
• 結果卡 infoPadding：short/tiny 頂距補齊至 40px（pt-10），避免絕對定位 RateSelector pills 與匯率文字重疊。
• 既有 tiers（section/label/amountInput/swap 間距字級）沿用零變動。

640px 極限實測（無需降級）

360×640（tiny）實測 fold 內容約 500px < 預算 560px，無需「結果卡單行摘要＋展開」降級——快速金額列、交換鈕、完整結果卡與歷史動作全數零捲動可見（見 screenshots/e10-fold-v1-360x640-*.png）。降級提案保留為未來更小視口（<600px）選項，暫不實作。

前置合約不回歸

• feat(ratewise): E8 wave-A — v2 等值雙列功能補全第一波（快速金額／歷史寫入／方向翻轉／長按複製） #667 v2 零捲動矩陣：converter-v2.spec.ts 全綠＋本 PR v2 8 視口零捲動斷言。
• fix(ratewise): 修復 360px 底部留白死類與 v2 小高度視口鍵盤遮擋（#662、QA-J J-1） #675 snug/compact 梯次：v2 程式碼零變動；360×740/360×800 於兩套 spec 均通過。
• fix(ratewise): 修復 persisted v2 冷載觸發 React #418 hydration mismatch #664 hydration gate：SingleConverter 分流器（two-pass render）零變動，改動僅在 legacy 元件內部。
• 44px 觸控：歷史動作升級為全梯次 min-h-11；e2e 斷言。

Test plan

• pnpm --filter @app/ratewise exec vitest run 全綠（192 files／9214 tests，含 feat(ratewise): E8 wave-A — v2 等值雙列功能補全第一波（快速金額／歷史寫入／方向翻轉／長按複製） #667/fix(ratewise): 修復 360px 底部留白死類與 v2 小高度視口鍵盤遮擋（#662、QA-J J-1） #675 守門與新增 fold 佈局單測）
• playwright test（chromium-desktop＋chromium-mobile）126 passed
• pnpm build:ratewise＋pre-commit／pre-push hooks 全過
• changeset（minor）＋docs/dev/002 一筆（+1 → 累計 +190）

Made with Cursor

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

[github-actions]

⚠️ Deprecation Warning: The deny-licenses option is deprecated for possible removal in the next major release. For more information, see issue 997.

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

Scanned Files

None

[github-actions]

✅ SEO 審計通過！所有 2026 標準驗證項目都符合要求。

• ✅ Sitemap 2026 標準
• ✅ Breadcrumb Schema
• ✅ JSON-LD 結構化數據
• ✅ 內部連結結構

[github-actions]

✅ SEO 審計通過！所有 2026 標準驗證項目都符合要求。

• ✅ Sitemap 2026 標準
• ✅ Breadcrumb Schema
• ✅ JSON-LD 結構化數據
• ✅ 內部連結結構