ligbox/ligbox-ops-platform
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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>
This commit is contained in:
Ligbox Spec Hub 2026-06-19 22:54:23 +00:00
parent 1c4c460b74
commit acaacce705
3 changed files with 96 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

93
projects/ops-desk/frontend/assets/tickets-workspace.css
View file

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

20
projects/ops-desk/frontend/index.html
View file

@ -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/tickets-workspace.css?v=20260619tickets1"/>
<link rel="stylesheet" href="/assets/styles.css?v=20260619tickets2"/>
<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/modules.js?v=20260619tickets1"></script>
<script src="/assets/billing-ui.js?v=20260619tickets1"></script>
<script src="/assets/desk-live-stub.js?v=20260619tickets1"></script>
<script src="/assets/tickets-workspace.js?v=20260619tickets1"></script>
<script src="/assets/tickets-detail-panel.js?v=20260619tickets1"></script>
<script src="/assets/servicos.js?v=20260619tickets1"></script>
<script src="/assets/app.js?v=20260619tickets1"></script>
<script src="/assets/auth.js?v=20260619tickets2"></script>
<script src="/assets/modules.js?v=20260619tickets2"></script>
<script src="/assets/billing-ui.js?v=20260619tickets2"></script>
<script src="/assets/desk-live-stub.js?v=20260619tickets2"></script>
<script src="/assets/tickets-workspace.js?v=20260619tickets2"></script>
<script src="/assets/tickets-detail-panel.js?v=20260619tickets2"></script>
<script src="/assets/servicos.js?v=20260619tickets2"></script>
<script src="/assets/app.js?v=20260619tickets2"></script>
</body>
</html>