docs: document the market card overflow fix.

docs/superpowers/specs/2026-10-11-market-list-card-right-spacing-design.md

@@ -0,0 +1,37 @@
+# 市场部列表卡片右侧遮挡修复设计
+
+## 问题与根因
+
+市场部通用列表卡片 `.market-list-card` 同时设置了 `width: 100%`、`padding: 14px` 和 `border: 1px`，但未设置 `box-sizing: border-box`。在默认 `content-box` 盒模型下，卡片实际外宽比父容器多 30px，因此右侧超出视口并被遮挡。
+
+## 影响范围
+
+市场部共有 12 个列表入口，由“市场专员 / 地区经理”两个角色与 6 个业务模块组合生成。
+
+| 模块 | 专员页 | 经理页 | 当前布局 |
+| --- | --- | --- | --- |
+| 预签约订单 | 不受影响 | 不受影响 | 独立 `PresignOrderCard` |
+| 协议单 | 受影响 | 受影响 | 共用 `MarketListCard` |
+| 催缴信息 | 受影响 | 受影响 | 共用 `MarketListCard` |
+| 缴费信息 | 受影响 | 受影响 | 共用 `MarketListCard` |
+| 样本信息 | 受影响 | 受影响 | 共用 `MarketListCard` |
+| 运费信息 | 受影响 | 受影响 | 共用 `MarketListCard` |
+
+## 修复方案
+
+仅在 `.market-list-card` 上增加 `box-sizing: border-box`。保留现有 `width: 100%`、内边距、边框和卡片内容布局，使内边距与边框计入容器宽度。
+
+不修改预签约订单的独立卡片，不引入全局盒模型规则，不调整数据和业务交互。
+
+## 验证方案
+
+1. 先在 `mobile-parity-ui.test.js` 增加卡片宽度约束回归测试，并确认测试在修复前失败。
+2. 增加最小 CSS 修复后，确认相同测试通过。
+3. 运行市场移动端相关 Node 测试与 `mobile-oa-h5` 生产构建。
+4. 在窄屏视口下检查通用列表卡片左右留白对称，并确认预签约订单卡片未回归。
+
+## 完成标准
+
+- 受影响的 10 个通用市场列表页卡片不再超出父容器。
+- 12 个入口的卡片均保持左右间距，无水平遮挡。
+- 不改变卡片内容、按钮、状态标签和列表加载行为。