Tighten empty monitor cards on 1080p.

Size no-position blocks to content and give remaining height to options/positions.

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

docs/更新文档.md

@@ -4,6 +4,31 @@
 
 ---
 
+## 2026-07-16 · 1080p 监控区无持仓空洞收紧
+
+### 修改原因
+
+1920×1080 上一屏适配用 `1fr/1fr` 把永续/分所空卡强行均分拉高，「无持仓」下方大片空洞；带鱼屏尚可，短屏观感差。
+
+### 修改的地方
+
+| 文件 | 改动摘要 |
+|------|----------|
+| `manual_trading_hub/static/app.css` | OKX 内卡改为 `auto + 1fr`（永续按内容、期权吃剩余）；右侧 Gate/币安改为 `auto auto` 按内容收紧；1080p 短屏左侧略加宽 |
+| `manual_trading_hub/static/index.html` | CSS 缓存 `20260716-hub-1080-tight` |
+
+### 达成的目标
+
+无持仓区块不再被拉成半屏空黑；有期权/持仓的区域拿到更多可视高度。
+
+### 交付之后的验收
+
+1. 1920×1080 监控区：永续「无持仓」仅占内容高度，期权表区域明显变高。  
+2. 右侧币安/Gate 无仓时卡片贴内容，不再卡片内大片空洞。  
+3. 带鱼屏布局仍可用；持仓变多时右侧列可内滚。
+
+---
+
 ## 2026-07-16 · 电脑端误判平板导致发糊
 
 ### 修改原因

manual_trading_hub/static/app.css

@@ -1277,15 +1277,22 @@ html[data-theme="light"] .host-metric-bar {
   min-height: 0;
 }
 
-.monitor-split-left > .card,
+.monitor-split-left > .card {
-.monitor-split-right > .card {
   height: 100%;
 }
 
 .monitor-split-right {
   display: grid;
-  grid-template-rows: 1fr 1fr;
+  /* 无持仓时勿 1fr 均分拉高,按内容收紧;有仓时自然增高 */
+  grid-template-rows: auto auto;
+  align-content: start;
   gap: 16px;
+  overflow: auto;
+}
+
+.monitor-split-right > .card {
+  height: auto;
+  min-height: 0;
 }
 
 .card-monitor-okx-split,
@@ -1307,7 +1314,8 @@ html[data-theme="light"] .host-metric-bar {
 .hub-inner-cards {
   flex: 1;
   display: grid;
-  grid-template-rows: 1fr 1fr;
+  /* 永续按内容高度,期权吃剩余 —— 避免「无持仓」半屏空洞 */
+  grid-template-rows: auto minmax(0, 1fr);
   gap: 12px;
   min-height: 0;
 }
@@ -9892,6 +9900,13 @@ html[data-theme="light"] .hub-logs-card-hint {
 
   body.hub-page-monitor:not(.hub-phone) .monitor-split-right {
     gap: 8px;
+    grid-template-rows: auto auto;
+    align-content: start;
+    overflow: auto;
+  }
+
+  body.hub-page-monitor:not(.hub-phone) .monitor-split-right > .card {
+    height: auto;
   }
 
   body.hub-page-monitor:not(.hub-phone) .card-monitor-okx-split,
@@ -9912,6 +9927,7 @@ html[data-theme="light"] .hub-logs-card-hint {
 
   body.hub-page-monitor:not(.hub-phone) .hub-inner-cards {
     gap: 6px;
+    grid-template-rows: auto minmax(0, 1fr);
   }
 
   body.hub-page-monitor:not(.hub-phone) .hub-inner-card {
@@ -9953,10 +9969,17 @@ html[data-theme="light"] .hub-logs-card-hint {
   }
 
   body.hub-page-monitor:not(.hub-phone) .empty-hint {
-    padding: 6px 0;
+    padding: 4px 0;
     font-size: 11px;
   }
 
+  /* 1080p 短屏:左侧略宽,把横向空间给 OKX 期权表 */
+  @media (max-height: 1100px) {
+    body.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .monitor-split-body {
+      grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
+    }
+  }
+
   /* —— 行情区 —— */
   body.hub-page-market:not(.hub-phone) #page-market {
     flex: 1 1 auto;
@@ -10185,19 +10208,25 @@ body.hub-tablet.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .mo
   align-items: stretch;
 }
 
-body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-left > .card,
+body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-left > .card {
-body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-right > .card {
   height: 100%;
   min-height: 0;
 }
 
-body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-right {
+body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-right > .card {
-  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
+  height: auto;
-  gap: 6px;
   min-height: 0;
 }
 
-/* 竖屏(<960)叠成 OKX 上 + Gate/币安并排,吃满剩余高度 */
+body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-right {
+  grid-template-rows: auto auto;
+  align-content: start;
+  gap: 6px;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* 竖屏(<960)叠成 OKX 上 + Gate/币安并排 */
 @media (max-width: 960px) {
   body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-body {
     grid-template-rows: minmax(0, 1.35fr) minmax(0, 1fr);
@@ -10205,7 +10234,12 @@ body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-right {
 
   body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-right {
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-    grid-template-rows: minmax(0, 1fr);
+    grid-template-rows: auto;
+    align-content: stretch;
+  }
+
+  body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-right > .card {
+    height: 100%;
   }
 }
 
@@ -10251,7 +10285,7 @@ body.hub-tablet.hub-page-monitor:not(.hub-phone) .card-monitor-split-side .card-
 }
 
 body.hub-tablet.hub-page-monitor:not(.hub-phone) .hub-inner-cards {
-  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
   gap: 5px;
   min-height: 0;
 }

manual_trading_hub/static/index.html

@@ -15,7 +15,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
   <noscript><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
-      <link rel="stylesheet" href="/assets/app.css?v=20260716-hub-tablet-onescreen" />
+      <link rel="stylesheet" href="/assets/app.css?v=20260716-hub-1080-tight" />
   <link rel="stylesheet" href="/assets/trade_stats_calendar.css?v=4" />
   <link rel="stylesheet" href="/assets/account_risk_badge.css?v=4" />
   <script src="/assets/account_risk_badge.js?v=4"></script>