Fix mobile option card and trade list wrapping.

Co-authored-by: Cursor <cursoragent@cursor.com>

docs/更新说明.md

@@ -5,6 +5,15 @@
 
 ---
 
+## 2026-07-27 — 手机端期权卡 / 交易记录排版
+
+### 变更
+
+1. **期权持仓卡**：合约名与到期倒计时改为上下排，避免长 `inst_id` 被挤成竖排字。  
+2. **交易记录**：列表项上下堆叠（组号/状态一行，净盈亏/平仓原因一行），明细成交行窄屏同样竖排。
+
+---
+
 ## 2026-07-27 — 手机端监控布局
 
 ### 变更

frontend/src/pages/Trades.tsx

@@ -78,10 +78,10 @@ export default function TradesPage() {
   }
 
   return (
-    <div>
+    <div className="trades-page">
       <h2 style={{ marginTop: 0 }}>交易记录</h2>
       {err ? <div className="err">{err}</div> : null}
-      <div className="card" style={{ marginBottom: 12 }}>
+      <div className="card trade-list" style={{ marginBottom: 12 }}>
         {groups.length === 0 ? (
           <p style={{ color: "var(--muted)" }}>暂无成交组</p>
         ) : (
@@ -89,33 +89,41 @@ export default function TradesPage() {
             const listPnl =
               g.net_pnl ?? g.pnl_summary?.net_pnl ?? g.realized_pnl;
             return (
-              <div
+              <button
                 key={g.group_id}
-                className="kv"
+                type="button"
-                style={{ cursor: "pointer" }}
+                className="trade-row"
                 onClick={() => openGroup(g.group_id)}
               >
-                <span className="mono">
+                <div className="trade-row-main mono">
-                  {g.group_id} · {statusZh(g.status)} ·{" "}
+                  <span className="trade-row-id">{g.group_id}</span>
-                  {positionSidesZh(g.perp_side, g.option_side)}
+                  <span className="trade-row-meta">
-                </span>
+                    {statusZh(g.status)} ·{" "}
-                <span className={`mono ${pnlClass(listPnl)}`}>
+                    {positionSidesZh(g.perp_side, g.option_side)}
-                  净盈亏 {fmt(listPnl)} · {closeReasonZh(g.close_reason)}
+                  </span>
-                </span>
+                </div>
-              </div>
+                <div className={`trade-row-pnl mono ${pnlClass(listPnl)}`}>
+                  <span>净盈亏 {fmt(listPnl)}</span>
+                  {g.close_reason ? (
+                    <span className="trade-row-reason">
+                      {closeReasonZh(g.close_reason)}
+                    </span>
+                  ) : null}
+                </div>
+              </button>
             );
           })
         )}
       </div>
       {selected ? (
-        <div className="card">
+        <div className="card trade-detail">
           <h3 style={{ marginTop: 0 }}>{selected} 成交明细</h3>
           <p style={{ color: "var(--muted)", fontSize: 13, marginTop: 0 }}>
             成交价为成交均价（未预先扣费）；手续费单独列出。净盈亏 = 期权盈亏 + 永续盈亏 −
             全部手续费。
           </p>
           {fills.map((f) => (
-            <div key={f.id} className="kv">
+            <div key={f.id} className="trade-fill kv">
               <span className="mono">
                 {fillDescZh(f.leg, f.action, f.side)}
               </span>

frontend/src/styles/app.css

@@ -477,6 +477,103 @@ input {
   min-width: 0;
 }
 
+.trade-list {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.trade-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+  width: 100%;
+  margin: 0;
+  padding: 12px 0;
+  border: 0;
+  border-bottom: 1px solid var(--line);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.trade-row:last-child {
+  border-bottom: 0;
+}
+
+.trade-row-main {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.trade-row-id {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.trade-row-meta {
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.35;
+  word-break: break-word;
+}
+
+.trade-row-pnl {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  flex: 0 1 auto;
+  min-width: 6.5em;
+  max-width: 46%;
+  font-size: 13px;
+  line-height: 1.35;
+  text-align: right;
+}
+
+.trade-row-reason {
+  color: var(--muted);
+  word-break: break-word;
+}
+
+@media (max-width: 900px) {
+  .trade-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 6px;
+    min-height: 44px;
+  }
+
+  .trade-row-pnl {
+    align-items: flex-start;
+    max-width: none;
+    min-width: 0;
+    text-align: left;
+  }
+
+  .trade-fill.kv {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 4px;
+  }
+
+  .trade-fill.kv > span:first-child {
+    min-width: 0;
+    color: var(--text);
+  }
+
+  .trade-fill.kv > span:last-child {
+    text-align: left;
+    color: var(--muted);
+    font-size: 13px;
+  }
+}
+
 /* 计划页：上排策略|持仓顶底对齐；下排行情同列宽对齐 */
 .plan-shell {
   --plan-cols: minmax(280px, 1fr) minmax(320px, 1.15fr);
@@ -562,9 +659,27 @@ input {
     flex: 0 0 auto;
   }
 
+  /* 合约名与倒计时上下排，避免长 inst_id 被挤成竖排 */
+  .pos-card-head {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 6px;
+  }
+
+  .pos-card-symbol {
+    width: 100%;
+  }
+
+  .pos-card-symbol strong {
+    word-break: break-word;
+    overflow-wrap: anywhere;
+    line-height: 1.35;
+  }
+
   .pos-countdown {
     margin-left: 0;
-    width: 100%;
+    width: auto;
+    align-self: flex-start;
   }
 }