156caf8a3c
Two related dashboard fixes. 1. Card timer mismatch: the board card timer chip showed only workflow runtime (e.g. <1m on FN-2716) while the task detail Stats panel reported "Total execution time" of 7m+ for the same task. Cause — the slim board listing strips `task.log` to keep payloads small, so the card's client-side `[timing]` log scan returned 0. Now the slim path aggregates `[timing] … in <N>ms` durations server-side into a new `task.timedExecutionMs` field before stripping the log; the card prefers this aggregate, falling back to the client scan when the full log is loaded (TaskDetailModal). Wire payload stays slim. 2. View Changes diff modal: defaulted to `90vw × 80vh` and was not user-resizable. Switched to `min(95vw, 2200px) × min(90vh, ...)` default with `resize: both`, persisted via useModalResizePersist (`fusion:changes-diff-modal-size`). Mobile keeps fullscreen layout. Overlay dismiss switched to the shared `useOverlayDismiss` hook so resize-drags that release on the overlay don't close the modal. Updated the diff modal's regression tests to match the new constraint shape (still asserts max-height clamps to viewport via calc()). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
224 lines
4.2 KiB
CSS
224 lines
4.2 KiB
CSS
.changes-diff-modal {
|
|
/* Diff comparisons read better wide — default to a generous portion of
|
|
the viewport. The grip-resize remembers the user's chosen dimensions
|
|
across sessions via useModalResizePersist. */
|
|
min-width: 720px;
|
|
min-height: 420px;
|
|
max-width: calc(100vw - 40px);
|
|
max-height: calc(100dvh - 40px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
resize: both;
|
|
}
|
|
|
|
.changes-diff-modal:not([style*="width"]) {
|
|
width: min(95vw, 2200px);
|
|
}
|
|
.changes-diff-modal:not([style*="height"]) {
|
|
height: min(90vh, calc(100dvh - 40px));
|
|
}
|
|
|
|
.changes-diff-modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-lg);
|
|
}
|
|
|
|
.changes-diff-modal-header .modal-close {
|
|
position: static;
|
|
}
|
|
|
|
.changes-diff-header-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.changes-diff-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.changes-diff-body {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.changes-diff-sidebar {
|
|
width: 280px;
|
|
min-width: 280px;
|
|
border-right: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
background: var(--surface);
|
|
}
|
|
|
|
.changes-diff-file-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: var(--space-sm) 0;
|
|
}
|
|
|
|
.changes-diff-file-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
width: 100%;
|
|
padding: var(--space-sm) var(--space-md);
|
|
background: transparent;
|
|
border: none;
|
|
border-left: 3px solid transparent;
|
|
color: var(--text);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
transition: background var(--transition-fast), border-color var(--transition-fast);
|
|
}
|
|
|
|
.changes-diff-file-item:hover {
|
|
background: var(--card-hover);
|
|
}
|
|
|
|
.changes-diff-file-item.selected {
|
|
background: var(--card-hover);
|
|
border-left-color: var(--todo);
|
|
}
|
|
|
|
.changes-diff-file-path {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.changes-diff-file-stat {
|
|
flex-shrink: 0;
|
|
font-family: var(--font-mono);
|
|
font-size: calc(var(--space-sm) + var(--space-xs) * 0.75);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.changes-diff-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.changes-diff-file-header-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-md);
|
|
padding: var(--space-sm) var(--space-md);
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--surface);
|
|
min-height: 40px;
|
|
}
|
|
|
|
.changes-diff-file-header-name {
|
|
font-family: var(--font-mono);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.changes-diff-file-header-stats {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.changes-diff-viewer {
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding: var(--space-sm) 0;
|
|
}
|
|
|
|
.changes-diff-viewer .changes-diff-patch {
|
|
border: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.changes-diff-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-md);
|
|
flex: 1;
|
|
color: var(--text-muted);
|
|
padding: var(--space-xl);
|
|
text-align: center;
|
|
}
|
|
|
|
.changes-diff-empty p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.changes-diff-modal {
|
|
width: 100vw !important;
|
|
height: 100vh !important;
|
|
height: 100dvh !important;
|
|
max-width: 100%;
|
|
max-height: 100vh;
|
|
max-height: 100dvh;
|
|
border-radius: 0;
|
|
/* Disable user resize on mobile — fullscreen layout. */
|
|
resize: none;
|
|
}
|
|
|
|
.changes-diff-header-title {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.changes-diff-header-actions {
|
|
flex-wrap: wrap;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.changes-diff-body {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.changes-diff-sidebar {
|
|
width: 100%;
|
|
min-width: unset;
|
|
max-height: 40%;
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.changes-diff-file-list {
|
|
padding: var(--space-xs) 0;
|
|
}
|
|
|
|
.changes-diff-file-item {
|
|
min-height: 36px;
|
|
}
|
|
|
|
.changes-diff-content {
|
|
overflow-x: auto;
|
|
}
|
|
}
|