diff --git a/projects/ops-desk/frontend/assets/tickets-detail-panel.js b/projects/ops-desk/frontend/assets/tickets-detail-panel.js index 9fbaacc..7b67b43 100644 --- a/projects/ops-desk/frontend/assets/tickets-detail-panel.js +++ b/projects/ops-desk/frontend/assets/tickets-detail-panel.js @@ -206,7 +206,7 @@ const TicketsDetailPanel = { ${esc(action.title)} ${esc(action.text)} - ${cta} + ${cta ? `
` : ''} `; }, diff --git a/projects/ops-desk/frontend/assets/tickets-workspace.css b/projects/ops-desk/frontend/assets/tickets-workspace.css index ac97306..02a39f4 100644 --- a/projects/ops-desk/frontend/assets/tickets-workspace.css +++ b/projects/ops-desk/frontend/assets/tickets-workspace.css @@ -294,23 +294,54 @@ .ticket-detail-pane[hidden] { display: none !important; } .ticket-next-action { display: flex; - align-items: center; + align-items: flex-start; gap: 0.65rem; - padding: 0.65rem 0.75rem; - border-radius: 8px; - margin-bottom: 0.5rem; + padding: 0.75rem 0.85rem; + border-radius: 10px; + margin-bottom: 0.65rem; border: 1px solid var(--border); + flex-wrap: wrap; } .ticket-next-action--live { background: #ecfdf5; border-color: rgba(52, 211, 153, 0.4); } +.ticket-next-action--brand { background: #eff6ff; border-color: rgba(59, 130, 246, 0.35); } .ticket-next-action--stale { background: #fef3e8; border-color: rgba(234, 179, 8, 0.35); } .ticket-next-action--warn { background: #fef3e8; } .ticket-next-action--danger { background: #fde8e8; } .ticket-next-action--billing { background: #eff6ff; } .ticket-next-action--info { background: #f5f2ed; } -.ticket-next-action-icon { font-size: 1.25rem; line-height: 1; } -.ticket-next-action-body { flex: 1; min-width: 0; } -.ticket-next-action-body strong { display: block; font-size: 0.85rem; } -.ticket-next-action-body span { display: block; font-size: 0.76rem; color: var(--muted); } +.ticket-next-action-icon { + font-size: 1.25rem; + line-height: 1; + flex-shrink: 0; + margin-top: 0.1rem; +} +.ticket-next-action-body { + flex: 1 1 12rem; + min-width: 0; + max-width: 100%; +} +.ticket-next-action-body strong { + display: block; + font-size: 0.85rem; + line-height: 1.35; + word-break: normal; +} +.ticket-next-action-body span { + display: block; + font-size: 0.76rem; + color: var(--muted); + line-height: 1.45; + word-break: normal; + white-space: normal; +} +.ticket-next-action-cta { + flex-shrink: 0; + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + align-items: center; +} +.ticket-next-action .btn { flex-shrink: 0; white-space: nowrap; } .ticket-live-presence-card { padding: 0.75rem; border: 1px solid rgba(52, 211, 153, 0.35); @@ -330,3 +361,49 @@ @media (max-width: 1200px) { #view-tickets .grid-2 { grid-template-columns: 1fr; } } + +/* --- Painel detalhe (coluna direita) --- */ +#view-tickets .grid-2 { + grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); + align-items: start; +} +#ticket-detail { + min-width: 0; +} +.ticket-detail-shell { + overflow: hidden; +} +.ticket-detail-shell .assist-panel { + margin-top: 1rem; + padding: 0.85rem; + border: 1px solid var(--border); + border-radius: 10px; + background: #faf7f2; +} +.ticket-detail-shell .assist-panel h4 { + margin: 0 0 0.35rem; + font-size: 0.92rem; +} +.ticket-detail-shell .assist-panel .actions { + margin-top: 0.5rem; + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} +.ticket-detail-shell .assist-console-actions, +.ticket-detail-shell .assist-console-links { + margin-top: 0.75rem; + padding-top: 0.65rem; + border-top: 1px dashed var(--border); +} +.ticket-detail-shell .assist-console-actions h5, +.ticket-detail-shell .assist-console-links h5 { + margin: 0 0 0.45rem; + font-size: 0.72rem; + color: var(--muted); + font-weight: 600; + text-transform: uppercase; +} +.ticket-detail-shell .kv { + grid-template-columns: minmax(88px, 110px) minmax(0, 1fr); +} diff --git a/projects/ops-desk/frontend/index.html b/projects/ops-desk/frontend/index.html index 62d29d0..f4b7c12 100644 --- a/projects/ops-desk/frontend/index.html +++ b/projects/ops-desk/frontend/index.html @@ -4,8 +4,8 @@