Fix mobile option card and trade list wrapping.

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

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;
   }
 }