From f73a1710c47b92697e9dc624fc17e5bc5bf0da5b Mon Sep 17 00:00:00 2001
From: OoO <ooo@MacBook-Pro.local>
Date: Mon, 18 May 2026 12:01:27 +0800
Subject: [PATCH] Sync observability CSS mirror

---
 static/css/observability-system.css     | 23 +++++++++++++
 web/static/css/observability-system.css | 46 ++++++++++++-------------
 2 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/static/css/observability-system.css b/static/css/observability-system.css
index 0f3dc1d..5e4e4b0 100644
--- a/static/css/observability-system.css
+++ b/static/css/observability-system.css
@@ -2401,6 +2401,29 @@
   box-shadow: var(--momo-shadow-md, 0 2px 8px rgba(42, 37, 32, 0.06)) !important;
 }
 
+.ppt-auto-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--momo-space-3, 12px);
+}
+
+.ppt-auto-status.is-working {
+  color: var(--obs-accent);
+  font-weight: var(--momo-font-weight-bold, 700);
+}
+
+@media (max-width: 960px) {
+  .ppt-auto-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .ppt-auto-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 .momo-observability-mode :is(
   .obs-panel,
   .agent-panel,
diff --git a/web/static/css/observability-system.css b/web/static/css/observability-system.css
index 8428251..5e4e4b0 100644
--- a/web/static/css/observability-system.css
+++ b/web/static/css/observability-system.css
@@ -1472,29 +1472,6 @@
   background-size: 14px 14px !important;
 }
 
-.momo-observability-mode .ppt-auto-grid {
-  display: grid;
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-  gap: var(--momo-space-2, 8px);
-}
-
-.momo-observability-mode .ppt-auto-status.is-working {
-  color: var(--obs-accent) !important;
-  font-weight: var(--momo-font-weight-bold, 700);
-}
-
-@media (max-width: 1200px) {
-  .momo-observability-mode .ppt-auto-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 720px) {
-  .momo-observability-mode .ppt-auto-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
 .momo-observability-mode h1,
 .momo-observability-mode h2,
 .momo-observability-mode h3,
@@ -2424,6 +2401,29 @@
   box-shadow: var(--momo-shadow-md, 0 2px 8px rgba(42, 37, 32, 0.06)) !important;
 }
 
+.ppt-auto-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--momo-space-3, 12px);
+}
+
+.ppt-auto-status.is-working {
+  color: var(--obs-accent);
+  font-weight: var(--momo-font-weight-bold, 700);
+}
+
+@media (max-width: 960px) {
+  .ppt-auto-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .ppt-auto-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 .momo-observability-mode :is(
   .obs-panel,
   .agent-panel,