Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-07-15 04:58:10 -07:00
Code Issues Packages Projects Releases Wiki Activity

Make timeline more compact to not hide other panels

Browse Source 
- Reduce lanes max-height to 160px
- Reduce lane height to 36px
- Narrow label column to 130px
- Narrow stats column to 50px
- Smaller annotations (max 60px, 9px font)
- Hide legend completely (colors are self-explanatory)
- Reduce padding throughout

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-01-20 21:09:26 +00:00
parent 23c75ddd24
commit 399bc0923d
1 changed files with 28 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/components/signal-timeline.css
+28 -28
View File
@@ -159,7 +159,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 3px; gap: 3px;
max-height: 240px; max-height: 160px;
overflow-y: auto; overflow-y: auto;
margin-top: 8px; margin-top: 8px;
} }
@@ -185,7 +185,7 @@
.signal-timeline-lane { .signal-timeline-lane {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
min-height: 44px; min-height: 36px;
background: var(--bg-secondary, #252525); background: var(--bg-secondary, #252525);
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
@@ -209,13 +209,13 @@
/* Signal label */ /* Signal label */
.signal-timeline-label { .signal-timeline-label {
width: 140px; width: 130px;
min-width: 140px; min-width: 130px;
padding: 8px 10px; padding: 6px 8px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
gap: 2px; gap: 1px;
border-right: 1px solid var(--border-color, #333); border-right: 1px solid var(--border-color, #333);
overflow: hidden; overflow: hidden;
} }
@@ -227,16 +227,16 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: 1.3; line-height: 1.2;
} }
.signal-timeline-name { .signal-timeline-name {
color: var(--text-dim, #666); color: var(--text-dim, #666);
font-size: 10px; font-size: 9px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: 1.3; line-height: 1.2;
} }
/* Status indicator */ /* Status indicator */
@@ -272,8 +272,8 @@
flex: 1; flex: 1;
position: relative; position: relative;
height: 100%; height: 100%;
min-height: 44px; min-height: 36px;
padding: 6px 10px; padding: 4px 8px;
cursor: pointer; cursor: pointer;
} }
@@ -380,13 +380,19 @@
ANNOTATIONS ANNOTATIONS
============================================ */ ============================================ */
.signal-timeline-annotations { .signal-timeline-annotations {
margin-top: 8px; margin-top: 6px;
padding-top: 8px; padding-top: 6px;
border-top: 1px solid var(--border-color, #333); border-top: 1px solid var(--border-color, #333);
max-height: 80px; max-height: 60px;
overflow-y: auto; overflow-y: auto;
} }
.signal-timeline-annotation {
padding: 3px 6px;
font-size: 9px;
margin-bottom: 2px;
}
.signal-timeline-annotation { .signal-timeline-annotation {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -458,9 +464,9 @@
STATS ROW STATS ROW
============================================ */ ============================================ */
.signal-timeline-stats { .signal-timeline-stats {
width: 80px; width: 50px;
min-width: 80px; min-width: 50px;
padding: 4px 8px; padding: 4px 6px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@@ -498,27 +504,21 @@
} }
/* ============================================ /* ============================================
LEGEND LEGEND - compact inline version
============================================ */ ============================================ */
.signal-timeline-legend { .signal-timeline-legend {
display: flex; display: none; /* Hide by default - status colors are self-explanatory */
gap: 12px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border-color, #333);
font-size: 9px;
color: var(--text-dim, #666);
} }
.signal-timeline-legend-item { .signal-timeline-legend-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 3px;
} }
.signal-timeline-legend-dot { .signal-timeline-legend-dot {
width: 8px; width: 6px;
height: 8px; height: 6px;
border-radius: 2px; border-radius: 2px;
} }