josh/Catalyst
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 13 Wiki Activity

feat: redesign history timeline — single-line, timestamp right-aligned
All checks were successful
CI / test (pull_request) Successful in 13s
Details
CI / build-dev (pull_request) Has been skipped
Details

Browse Source 
Each event is now one row: label · old → new on the left, timestamp
right-aligned. Nothing is far from anything else. State changes use the
existing badge component for immediate visual recognition. The created
event reads 'instance created' in accent. Middle-dot separator keeps
field label and change value clearly associated without forced spacing.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Josh Wright
2026-03-28 15:06:09 -04:00
parent 94c4a0af51
commit 82c314f85c
2 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
css/app.css
View File

@@ -630,21 +630,25 @@ select:focus { border-color: var(--accent); }
/* ── HISTORY TIMELINE ── */
.tl-item {
padding: 12px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 9px 0;
border-bottom: 1px solid var(--border);
}
.tl-item:last-child { border-bottom: none; }
.tl-time { display: block; color: var(--text3); font-size: 11px; margin-bottom: 5px; }
.tl-desc { display: flex; align-items: baseline; gap: 16px; font-size: 13px; }
.tl-label { color: var(--text2); min-width: 130px; }
.tl-change { display: flex; align-items: baseline; gap: 8px; }
.tl-old { color: var(--text3); text-decoration: line-through; }
.tl-arrow { color: var(--text3); }
.tl-event { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
.tl-label { color: var(--text2); }
.tl-sep { color: var(--text3); user-select: none; }
.tl-old { color: var(--text3); text-decoration: line-through; font-size: 12px; }
.tl-arrow { color: var(--text3); font-size: 11px; }
.tl-new { color: var(--text); font-weight: 500; }
.tl-time { color: var(--text3); font-size: 11px; white-space: nowrap; flex-shrink: 0; }
.tl-deployed { color: var(--accent); }
.tl-testing { color: var(--amber); }
.tl-degraded { color: var(--red); }
.tl-created .tl-label { color: var(--accent); font-weight: 500; }
.tl-created .tl-event { color: var(--accent); font-weight: 500; }
.tl-empty { color: var(--text3); font-size: 12px; padding: 8px 0; }
/* ── SETTINGS MODAL ── */