修复前端

manual_trading_hub/static/app.css

@@ -41,9 +41,10 @@ a:hover {
 
 /* —— 顶栏 —— */
 .app-shell {
-  max-width: 1280px;
+  width: 100%;
+  max-width: none;
   margin: 0 auto;
-  padding: 0 20px 48px;
+  padding: 0 clamp(16px, 2.5vw, 48px) 48px;
 }
 
 .app-header {
@@ -300,10 +301,50 @@ button:disabled {
 
 .grid-monitor {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
+  gap: clamp(12px, 1.2vw, 20px);
+}
+
+@media (min-width: 1400px) {
+  .grid-monitor {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 2200px) {
+  .grid-monitor {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+.page-head {
+  max-width: 100%;
+}
+
+.trade-bar,
+.toolbar,
+.hint-box {
+  max-width: 100%;
+}
+
+.settings-grid-wrap {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
   gap: 16px;
 }
 
+@media (min-width: 1600px) {
+  .settings-grid-wrap {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 2400px) {
+  .settings-grid-wrap {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
 /* 监控统计 */
 .stat-row {
   display: grid;
@@ -545,12 +586,6 @@ button:disabled {
 }
 
 /* —— 系统设置 —— */
-.settings-cards {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-
 .settings-card {
   background: var(--panel);
   border: 1px solid var(--border);