Fix mobile option card and trade list wrapping.

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

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"
-                style={{ cursor: "pointer" }}
+                type="button"
+                className="trade-row"
                 onClick={() => openGroup(g.group_id)}
               >
-                <span className="mono">
-                  {g.group_id} · {statusZh(g.status)} ·{" "}
-                  {positionSidesZh(g.perp_side, g.option_side)}
-                </span>
-                <span className={`mono ${pnlClass(listPnl)}`}>
-                  净盈亏 {fmt(listPnl)} · {closeReasonZh(g.close_reason)}
-                </span>
-              </div>
+                <div className="trade-row-main mono">
+                  <span className="trade-row-id">{g.group_id}</span>
+                  <span className="trade-row-meta">
+                    {statusZh(g.status)} ·{" "}
+                    {positionSidesZh(g.perp_side, g.option_side)}
+                  </span>
+                </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>