feat(frontend): make status module grid auto-fit for denser responsive layout

replace the fixed large-breakpoint column split with an auto-fit grid so
memory, network, and disk modules display side by side at typical widths
and collapse to one column only on very narrow containers.

tighten module spacing and card chrome (gap, padding, radius) to increase
information density, and add container-query refinements to keep usage and
process blocks full width while improving narrow-width behavior for memory,
network, and disk sublayouts.

.helloagents/CHANGELOG.md

@@ -61,6 +61,9 @@
   - 方案: [202603250614_terminal-ansi-color-effects](archive/2026-03/202603250614_terminal-ansi-color-effects/)
 
 ### 快速修改
+- **[frontend]**: 将状态监控模块区从大断点固定分列改为更高密度的 auto-fit 自适应网格，让内存/网络/磁盘在正常宽度下默认并排，只有非常窄时才回落为单列 — by yinjianm
+  - 类型: 快速修改（无方案包）
+  - 文件: packages/frontend/src/components/StatusMonitor.vue
 - **[frontend]**: 将状态监控顶部的“服务器状态 + 系统信息”从分裂的头部和独立概览块改为单个一体化系统卡，统一容纳 IP、LIVE、系统名、网卡、CPU 核数、CPU 型号、时区和运行时间 — by yinjianm
   - 类型: 快速修改（无方案包）
   - 文件: packages/frontend/src/components/StatusMonitor.vue

packages/frontend/src/components/StatusMonitor.vue

@@ -848,15 +848,17 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
 
 .monitor-module-grid {
   display: grid;
-  gap: 12px;
+  gap: 10px;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
 }
 
 .monitor-module {
   display: grid;
-  gap: 12px;
+  gap: 10px;
   min-width: 0;
-  border-radius: 20px;
-  padding: 14px;
+  border-radius: 18px;
+  padding: 12px;
+  container-type: inline-size;
 }
 
 .monitor-module__heading {
@@ -1474,34 +1476,21 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
   }
 }
 
-@container (min-width: 760px) {
-  .monitor-module-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
+@container (min-width: 420px) {
   .monitor-module--usage,
   .monitor-module--process {
     grid-column: 1 / -1;
   }
 }
 
-@container (max-width: 440px) {
-  .monitor-chip {
-    max-width: 100%;
-  }
-
-  .monitor-chip__value,
-  .usage-lane__helper,
-  .disk-summary-table__row span {
-    white-space: normal;
-  }
-
-  .cpu-module__hero {
+@container (max-width: 250px) {
+  .module-split--memory,
+  .network-module__hero,
+  .disk-compact-top {
     grid-template-columns: 1fr;
   }
 
-  .network-module__hero,
-  .disk-compact-top {
+  .memory-stat-stack {
     grid-template-columns: 1fr;
   }
 
@@ -1524,6 +1513,22 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
   }
 }
 
+@container (max-width: 440px) {
+  .monitor-chip {
+    max-width: 100%;
+  }
+
+  .monitor-chip__value,
+  .usage-lane__helper,
+  .disk-summary-table__row span {
+    white-space: normal;
+  }
+
+  .cpu-module__hero {
+    grid-template-columns: 1fr;
+  }
+}
+
 @container (max-width: 360px) {
   .process-summary-strip {
     grid-template-columns: 1fr;