Fix strategy plan text overflow in metrics and position cards.

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

frontend/src/pages/Plan.tsx

@@ -703,13 +703,15 @@ export default function PlanPage() {
                       <span className="pos-label">波动比例</span>
                       <span className="pos-value mono">{fmt(movePct, 2)}%</span>
                     </div>
-                    <div className="pos-cell">
+                    <div className="pos-time-row">
-                      <span className="pos-label">开仓时间</span>
+                      <div className="pos-cell">
-                      <span className="pos-value mono">{openTimeLabel}</span>
+                        <span className="pos-label">开仓时间</span>
-                    </div>
+                        <span className="pos-value mono">{openTimeLabel}</span>
-                    <div className="pos-cell">
+                      </div>
-                      <span className="pos-label">持仓时长</span>
+                      <div className="pos-cell">
-                      <span className="pos-value mono">{holdDurationLabel}</span>
+                        <span className="pos-label">持仓时长</span>
+                        <span className="pos-value mono">{holdDurationLabel}</span>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -780,13 +782,15 @@ export default function PlanPage() {
                       <span className="pos-label">初始权利金</span>
                       <span className="pos-value mono">{fmt(pos?.initial_premium)}</span>
                     </div>
-                    <div className="pos-cell">
+                    <div className="pos-time-row">
-                      <span className="pos-label">开仓时间</span>
+                      <div className="pos-cell">
-                      <span className="pos-value mono">{openTimeLabel}</span>
+                        <span className="pos-label">开仓时间</span>
-                    </div>
+                        <span className="pos-value mono">{openTimeLabel}</span>
-                    <div className="pos-cell">
+                      </div>
-                      <span className="pos-label">持仓时长</span>
+                      <div className="pos-cell">
-                      <span className="pos-value mono">{holdDurationLabel}</span>
+                        <span className="pos-label">持仓时长</span>
+                        <span className="pos-value mono">{holdDurationLabel}</span>
+                      </div>
                     </div>
                   </div>
                 </div>

frontend/src/styles/app.css

@@ -703,7 +703,7 @@ input {
 .kv {
   display: flex;
   justify-content: space-between;
-  align-items: baseline;
+  align-items: flex-start;
   gap: 12px;
   padding: 8px 0;
   border-bottom: 1px solid var(--line);
@@ -718,11 +718,17 @@ input {
   color: var(--muted);
   flex: 0 0 auto;
   min-width: 5.5em;
+  padding-top: 1px;
 }
 
 .kv > span:last-child {
   text-align: right;
   min-width: 0;
+  flex: 1 1 auto;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  white-space: normal;
+  line-height: 1.35;
 }
 
 .plan-residual-block {
@@ -1108,7 +1114,9 @@ input {
   flex-direction: column;
   height: 100%;
   min-height: 0;
+  min-width: 0;
   box-sizing: border-box;
+  overflow: hidden;
 }
 
 .plan-metrics {
@@ -1116,6 +1124,7 @@ input {
   flex-direction: column;
   flex: 1;
   min-height: 0;
+  min-width: 0;
 }
 
 .plan-metrics .kv {
@@ -1147,6 +1156,9 @@ input {
   color: #e8ecf4;
   white-space: nowrap;
   margin-left: auto;
+  max-width: 42%;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 @media (max-width: 960px) {
@@ -1596,6 +1608,8 @@ input {
   border: 1px solid #2a3348;
   border-radius: 10px;
   padding: 12px 14px;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .pos-card-head {
@@ -1604,6 +1618,7 @@ input {
   justify-content: space-between;
   gap: 10px;
   margin-bottom: 10px;
+  min-width: 0;
 }
 
 .pos-card-symbol {
@@ -1663,21 +1678,34 @@ input {
 
 .pos-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 12px 14px;
+  min-width: 0;
 }
 
 .pos-cell-wide {
   grid-column: 1 / -1;
 }
 
+.pos-time-row {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px 14px;
+  min-width: 0;
+}
+
 .pos-countdown-urgent {
   color: #ffb020 !important;
 }
 
 @media (max-width: 520px) {
   .pos-grid {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .pos-time-row {
+    grid-template-columns: 1fr;
   }
 }
 
@@ -1692,6 +1720,7 @@ input {
   flex-direction: column;
   gap: 4px;
   min-width: 0;
+  overflow: hidden;
 }
 
 .pos-label {
@@ -1704,6 +1733,11 @@ input {
   color: #e8ecf4;
   font-weight: 500;
   line-height: 1.25;
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  white-space: normal;
 }
 
 .pos-empty {