From 299b20acc5e6e9182c65e6195d265506ae380246 Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Tue, 7 Jul 2026 13:36:48 +0800
Subject: [PATCH] Hub monitor: compact centered today stats bar in options
 split layout.

Reduce stats card height and center the horizontal bar above the OKX / Binance-Gate columns.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 manual_trading_hub/static/app.css    | 70 ++++++++++++++++++++++++++--
 manual_trading_hub/static/index.html |  2 +-
 2 files changed, 68 insertions(+), 4 deletions(-)

diff --git a/manual_trading_hub/static/app.css b/manual_trading_hub/static/app.css
index 8b52050..6325975 100644
--- a/manual_trading_hub/static/app.css
+++ b/manual_trading_hub/static/app.css
@@ -1171,11 +1171,70 @@ html[data-theme="light"] .host-metric-bar {
 }
 
 .grid-monitor.grid-monitor-options-split .monitor-stats-card {
-  width: 100%;
+  width: fit-content;
+  max-width: 100%;
+  margin: 0 auto;
+  align-self: center;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 10px 18px;
+  padding: 8px 16px;
+}
+
+.grid-monitor.grid-monitor-options-split .monitor-stats-card .card-head {
+  padding: 0;
+  border-bottom: none;
+  flex: 0 0 auto;
+}
+
+.grid-monitor.grid-monitor-options-split .monitor-stats-card .card-body {
+  padding: 0;
+  flex: 0 1 auto;
+}
+
+.grid-monitor.grid-monitor-options-split .monitor-stats-card .card-title {
+  font-size: 12px;
+  margin: 0;
+  white-space: nowrap;
+}
+
+.grid-monitor.grid-monitor-options-split .monitor-stats-card .card-sub {
+  font-size: 10px;
+  margin-top: 2px;
+  white-space: nowrap;
 }
 
 .grid-monitor.grid-monitor-options-split .monitor-stats-grid {
-  grid-template-columns: repeat(6, minmax(0, 1fr));
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 8px 10px;
+}
+
+.grid-monitor.grid-monitor-options-split .monitor-stat-cell {
+  padding: 5px 10px 4px;
+  border-radius: 8px;
+  min-width: 88px;
+}
+
+.grid-monitor.grid-monitor-options-split .monitor-stat-label {
+  font-size: 10px;
+  margin-bottom: 2px;
+}
+
+.grid-monitor.grid-monitor-options-split .monitor-stat-value {
+  font-size: 14px;
+  line-height: 1.2;
+}
+
+.grid-monitor.grid-monitor-options-split .monitor-stat-sub {
+  margin-top: 1px;
+  font-size: 10px;
+  line-height: 1.2;
 }
 
 .monitor-split-body {
@@ -1267,7 +1326,12 @@ html[data-theme="light"] .host-metric-bar {
 
 @media (max-width: 1100px) {
   .grid-monitor.grid-monitor-options-split .monitor-stats-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 6px 8px;
+  }
+
+  .grid-monitor.grid-monitor-options-split .monitor-stat-cell {
+    min-width: 76px;
+    padding: 4px 8px 3px;
   }
 }
 
diff --git a/manual_trading_hub/static/index.html b/manual_trading_hub/static/index.html
index d470d2c..0ab420d 100644
--- a/manual_trading_hub/static/index.html
+++ b/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=20260707-monitor-options-split" />
+  <link rel="stylesheet" href="/assets/app.css?v=20260707-stats-compact" />
   <link rel="stylesheet" href="/assets/trade_stats_calendar.css?v=3" />
   <link rel="stylesheet" href="/assets/account_risk_badge.css?v=4" />
   <script src="/assets/account_risk_badge.js?v=4"></script>