優化AI觀測台響應式資料表

web/static/css/observability-system.css

@@ -2545,6 +2545,95 @@
   background-size: var(--obs-matrix-size) !important;
 }
 
+/* v3.12 responsive data surfaces: observability tables should read like
+ * operational records on phones, not desktop sheets squeezed into a viewport.
+ */
+.momo-observability-mode .table-responsive {
+  overflow-x: visible !important;
+}
+
+.momo-observability-mode .table-responsive .table {
+  min-width: 0 !important;
+  width: 100% !important;
+  table-layout: auto;
+}
+
+.momo-observability-mode .table :is(th, td) {
+  max-width: min(24rem, 38vw);
+  white-space: normal !important;
+}
+
+@media (max-width: 768px) {
+  .momo-observability-mode .table-responsive {
+    max-height: none !important;
+    overflow: visible !important;
+  }
+
+  .momo-observability-mode .table-responsive .obs-card-ready,
+  .momo-observability-mode .table-responsive .obs-card-ready thead,
+  .momo-observability-mode .table-responsive .obs-card-ready tbody,
+  .momo-observability-mode .table-responsive .obs-card-ready tr,
+  .momo-observability-mode .table-responsive .obs-card-ready td {
+    display: block;
+    width: 100% !important;
+  }
+
+  .momo-observability-mode .table-responsive .obs-card-ready thead {
+    position: absolute;
+    width: 1px !important;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+  }
+
+  .momo-observability-mode .table-responsive .obs-card-ready tbody {
+    display: grid;
+    gap: 0.7rem;
+  }
+
+  .momo-observability-mode .table-responsive .obs-card-ready tr {
+    display: grid;
+    gap: 0.44rem;
+    padding: 0.72rem;
+    border: 1px solid var(--obs-line);
+    border-radius: var(--momo-radius-lg, 8px);
+    background:
+      var(--obs-matrix-dot-soft),
+      var(--momo-bg-elevated, #fdfaf3);
+    background-size: var(--obs-matrix-size), auto;
+    box-shadow: var(--momo-shadow-sm, 0 1px 3px rgba(42, 37, 32, 0.05));
+  }
+
+  .momo-observability-mode .table-responsive .obs-card-ready td {
+    display: grid;
+    grid-template-columns: minmax(5.4rem, 35%) minmax(0, 1fr);
+    gap: 0.58rem;
+    align-items: start;
+    max-width: 100%;
+    padding: 0 !important;
+    border: 0 !important;
+    border-radius: 0 !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    text-align: left !important;
+  }
+
+  .momo-observability-mode .table-responsive .obs-card-ready td::before {
+    content: attr(data-label);
+    color: var(--obs-muted);
+    font-family: var(--momo-font-mono, "JetBrains Mono", ui-monospace, monospace);
+    font-size: 0.72rem;
+    font-weight: 700;
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+  }
+
+  .momo-observability-mode .table-responsive .obs-card-ready td:empty {
+    display: none;
+  }
+}
+
 .momo-observability-mode :is(
   .obs-panel,
   .agent-panel,