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 @@
-
+