wooo/ewoooc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(observability): 強化跨頁 responsive 與可及性
Some checks failed
CD Pipeline / deploy (push) Failing after 4m5s
Details

Browse Source
This commit is contained in:
OoO
2026-05-05 14:31:56 +08:00
parent 4a745c27b4
commit 2c11a3dc81
1 changed files with 191 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
static/css/observability-system.css
View File

@@ -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;
}