修复前端

manual_trading_hub/static/app.css

@@ -15,6 +15,8 @@
   --shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
   --font: "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
   --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
+  /* 内容区最大宽度：比 1080p 下常见的 1280 略宽，带鱼屏两侧留白不拉伸 */
+  --layout-max: 1520px;
 }
 
 * {
@@ -42,9 +44,10 @@ a:hover {
 /* —— 顶栏 —— */
 .app-shell {
   width: 100%;
-  max-width: none;
-  margin: 0 auto;
-  padding: 0 clamp(16px, 2.5vw, 48px) 48px;
+  max-width: var(--layout-max);
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0 24px 48px;
 }
 
 .app-header {
@@ -299,49 +302,22 @@ button:disabled {
   padding: 14px 16px;
 }
 
+/* 固定内容宽度内三列，卡片不被拉宽 */
 .grid-monitor {
   display: grid;
-  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 {
+  display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+  gap: 16px;
 }
 
-@media (min-width: 2400px) {
-  .settings-grid-wrap {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+@media (max-width: 1200px) {
+  .grid-monitor {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
@@ -677,13 +653,16 @@ button:disabled {
   display: block;
 }
 
-@media (max-width: 640px) {
+@media (max-width: 720px) {
   .app-shell {
     padding: 0 12px 32px;
   }
   .grid-monitor {
     grid-template-columns: 1fr;
   }
+  .settings-grid-wrap {
+    grid-template-columns: 1fr;
+  }
   .form-grid {
     grid-template-columns: 1fr;
   }