From 2c11a3dc8102daa89344992d77059385fe828cfe Mon Sep 17 00:00:00 2001 From: OoO Date: Tue, 5 May 2026 14:31:56 +0800 Subject: [PATCH] =?UTF-8?q?fix(observability):=20=E5=BC=B7=E5=8C=96?= =?UTF-8?q?=E8=B7=A8=E9=A0=81=20responsive=20=E8=88=87=E5=8F=AF=E5=8F=8A?= =?UTF-8?q?=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/css/observability-system.css | 191 ++++++++++++++++++++++++++++ 1 file changed, 191 insertions(+) diff --git a/static/css/observability-system.css b/static/css/observability-system.css index c59ec92..39b0e39 100644 --- a/static/css/observability-system.css +++ b/static/css/observability-system.css @@ -559,6 +559,116 @@ padding: 0.36em 0.62em; } +/* Cross-page layout hardening */ +.momo-observability-mode .momo-content { + overflow-x: hidden; +} + +.momo-observability-mode .obs-warroom, +.momo-observability-mode .agent-page, +.momo-observability-mode .biz-warroom, +.momo-observability-mode .runtime-page, +.momo-observability-mode .calls-page, +.momo-observability-mode .gov-page, +.momo-observability-mode .gate-page, +.momo-observability-mode .rag-page, +.momo-observability-mode .quality-page, +.momo-observability-mode .ppt-page, +.momo-observability-mode .container-fluid { + max-width: 1480px; + margin-inline: auto; +} + +.momo-observability-mode .obs-grid, +.momo-observability-mode .agent-grid, +.momo-observability-mode .biz-layout, +.momo-observability-mode .runtime-grid, +.momo-observability-mode .calls-grid, +.momo-observability-mode .gov-grid, +.momo-observability-mode .gate-grid, +.momo-observability-mode .rag-grid, +.momo-observability-mode .quality-grid, +.momo-observability-mode .ppt-grid { + gap: 1rem !important; +} + +.momo-observability-mode .obs-command-strip, +.momo-observability-mode .agent-command, +.momo-observability-mode .biz-signal-grid, +.momo-observability-mode .runtime-command, +.momo-observability-mode .calls-command, +.momo-observability-mode .gov-command, +.momo-observability-mode .gate-command, +.momo-observability-mode .rag-command, +.momo-observability-mode .quality-command, +.momo-observability-mode .ppt-command { + align-items: stretch; +} + +.momo-observability-mode .obs-signal, +.momo-observability-mode .agent-signal, +.momo-observability-mode .biz-signal, +.momo-observability-mode .runtime-signal, +.momo-observability-mode .calls-signal, +.momo-observability-mode .gov-signal, +.momo-observability-mode .gate-signal, +.momo-observability-mode .rag-signal, +.momo-observability-mode .quality-signal, +.momo-observability-mode .ppt-signal { + min-width: 0; +} + +.momo-observability-mode .obs-panel-body, +.momo-observability-mode .agent-panel-body, +.momo-observability-mode .biz-panel-body, +.momo-observability-mode .runtime-panel-body, +.momo-observability-mode .calls-panel-body, +.momo-observability-mode .gov-panel-body, +.momo-observability-mode .gate-panel-body, +.momo-observability-mode .rag-panel-body, +.momo-observability-mode .quality-panel-body, +.momo-observability-mode .ppt-panel-body { + min-width: 0; +} + +.momo-observability-mode [class$="-panel-head"], +.momo-observability-mode [class$="-table-title"] { + min-width: 0; +} + +.momo-observability-mode [class$="-panel-head"] > div, +.momo-observability-mode [class$="-table-title"] > div { + min-width: 0; +} + +.momo-observability-mode [class$="-panel-head"] p, +.momo-observability-mode [class$="-table-title"] p, +.momo-observability-mode .text-muted { + overflow-wrap: anywhere; +} + +.momo-observability-mode .obs-route-card, +.momo-observability-mode .agent-card, +.momo-observability-mode .biz-decision-card, +.momo-observability-mode .rec-card, +.momo-observability-mode .fix-card, +.momo-observability-mode .root-card { + min-width: 0; + transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; +} + +.momo-observability-mode .obs-route-card:focus-visible, +.momo-observability-mode .btn:focus-visible, +.momo-observability-mode .form-control:focus-visible, +.momo-observability-mode .form-select:focus-visible { + outline: 3px solid rgba(201, 100, 66, 0.28); + outline-offset: 2px; +} + +.momo-observability-mode .alert { + overflow-wrap: anywhere; +} + .momo-observability-mode .modal-content { border: 1px solid var(--obs-line); border-radius: 24px; @@ -571,12 +681,45 @@ border-color: var(--obs-line); } +@media (max-width: 1180px) { + .momo-observability-mode .obs-grid, + .momo-observability-mode .agent-grid, + .momo-observability-mode .biz-layout, + .momo-observability-mode .runtime-grid, + .momo-observability-mode .calls-grid, + .momo-observability-mode .gov-grid, + .momo-observability-mode .gate-grid, + .momo-observability-mode .rag-grid, + .momo-observability-mode .quality-grid, + .momo-observability-mode .ppt-grid { + grid-template-columns: 1fr !important; + } + + .momo-observability-mode .obs-command-strip, + .momo-observability-mode .agent-command, + .momo-observability-mode .biz-signal-grid, + .momo-observability-mode .runtime-command, + .momo-observability-mode .calls-command, + .momo-observability-mode .gov-command, + .momo-observability-mode .gate-command, + .momo-observability-mode .rag-command, + .momo-observability-mode .quality-command, + .momo-observability-mode .ppt-command { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } +} + @media (max-width: 768px) { .momo-observability-mode .container-fluid { padding-left: 0.7rem; padding-right: 0.7rem; } + .momo-observability-mode .momo-content { + padding-left: 0.85rem; + padding-right: 0.85rem; + } + .momo-observability-mode .table-responsive, .momo-observability-mode .card-body.p-0 { overflow-x: auto; @@ -595,6 +738,54 @@ font-size: clamp(1.8rem, 10vw, 2.45rem) !important; } + .momo-observability-mode .obs-command-strip, + .momo-observability-mode .agent-command, + .momo-observability-mode .biz-signal-grid, + .momo-observability-mode .runtime-command, + .momo-observability-mode .calls-command, + .momo-observability-mode .gov-command, + .momo-observability-mode .gate-command, + .momo-observability-mode .rag-command, + .momo-observability-mode .quality-command, + .momo-observability-mode .ppt-command { + grid-template-columns: 1fr !important; + } + + .momo-observability-mode .obs-hero, + .momo-observability-mode .agent-hero, + .momo-observability-mode .biz-command, + .momo-observability-mode .runtime-hero, + .momo-observability-mode .calls-hero, + .momo-observability-mode .gov-hero, + .momo-observability-mode .gate-hero, + .momo-observability-mode .rag-hero, + .momo-observability-mode .quality-hero, + .momo-observability-mode .ppt-hero { + border-radius: 22px !important; + } + + .momo-observability-mode .obs-panel, + .momo-observability-mode .agent-panel, + .momo-observability-mode .biz-panel, + .momo-observability-mode .runtime-panel, + .momo-observability-mode .calls-panel, + .momo-observability-mode .gov-panel, + .momo-observability-mode .gate-panel, + .momo-observability-mode .rag-panel, + .momo-observability-mode .quality-panel, + .momo-observability-mode .ppt-panel, + .momo-observability-mode [class$="-table-shell"] { + border-radius: 20px !important; + } + + .momo-observability-mode .table { + font-size: 0.84rem; + } + + .momo-observability-mode .btn { + min-height: 2.45rem; + } + .momo-observability-mode .momo-content::before { left: 0; }