Fix ticket detail next-action box crushed text in narrow panel.

Prevent flex shrink on ASM action buttons; widen tickets grid detail column; style assist panel in tickets-workspace.css.

Co-authored-by: Cursor <cursoragent@cursor.com>

projects/ops-desk/frontend/assets/tickets-detail-panel.js

@@ -206,7 +206,7 @@ const TicketsDetailPanel = {
           <strong>${esc(action.title)}</strong>
           <span>${esc(action.text)}</span>
         </div>
-        ${cta}
+        ${cta ? `<div class="ticket-next-action-cta">${cta}</div>` : ''}
       </div>`;
   },
 

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;
+  padding: 0.75rem 0.85rem;
-  border-radius: 8px;
+  border-radius: 10px;
-  margin-bottom: 0.5rem;
+  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-icon {
-.ticket-next-action-body { flex: 1; min-width: 0; }
+  font-size: 1.25rem;
-.ticket-next-action-body strong { display: block; font-size: 0.85rem; }
+  line-height: 1;
-.ticket-next-action-body span { display: block; font-size: 0.76rem; color: var(--muted); }
+  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);
+}

projects/ops-desk/frontend/index.html

@@ -4,8 +4,8 @@
   <meta charset="UTF-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
   <title>Ligbox Ops — Support Desk</title>
-  <link rel="stylesheet" href="/assets/styles.css?v=20260619tickets1"/>
+  <link rel="stylesheet" href="/assets/styles.css?v=20260619tickets2"/>
-  <link rel="stylesheet" href="/assets/tickets-workspace.css?v=20260619tickets1"/>
+  <link rel="stylesheet" href="/assets/tickets-workspace.css?v=20260619tickets2"/>
 </head>
 <body>
   <svg width="0" height="0" style="position:absolute;visibility:hidden" aria-hidden="true" focusable="false">
@@ -428,13 +428,13 @@
     </div>
   </div>
 
-  <script src="/assets/auth.js?v=20260619tickets1"></script>
+  <script src="/assets/auth.js?v=20260619tickets2"></script>
-  <script src="/assets/modules.js?v=20260619tickets1"></script>
+  <script src="/assets/modules.js?v=20260619tickets2"></script>
-  <script src="/assets/billing-ui.js?v=20260619tickets1"></script>
+  <script src="/assets/billing-ui.js?v=20260619tickets2"></script>
-  <script src="/assets/desk-live-stub.js?v=20260619tickets1"></script>
+  <script src="/assets/desk-live-stub.js?v=20260619tickets2"></script>
-  <script src="/assets/tickets-workspace.js?v=20260619tickets1"></script>
+  <script src="/assets/tickets-workspace.js?v=20260619tickets2"></script>
-  <script src="/assets/tickets-detail-panel.js?v=20260619tickets1"></script>
+  <script src="/assets/tickets-detail-panel.js?v=20260619tickets2"></script>
-  <script src="/assets/servicos.js?v=20260619tickets1"></script>
+  <script src="/assets/servicos.js?v=20260619tickets2"></script>
-  <script src="/assets/app.js?v=20260619tickets1"></script>
+  <script src="/assets/app.js?v=20260619tickets2"></script>
 </body>
 </html>