Make timeline more compact to not hide other panels

- 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>

static/css/components/signal-timeline.css

@@ -159,7 +159,7 @@
     display: flex;
     flex-direction: column;
     gap: 3px;
-    max-height: 240px;
+    max-height: 160px;
     overflow-y: auto;
     margin-top: 8px;
 }
@@ -185,7 +185,7 @@
 .signal-timeline-lane {
     display: flex;
     align-items: stretch;
-    min-height: 44px;
+    min-height: 36px;
     background: var(--bg-secondary, #252525);
     border-radius: 3px;
     overflow: hidden;
@@ -209,13 +209,13 @@
 
 /* Signal label */
 .signal-timeline-label {
-    width: 140px;
-    min-width: 140px;
-    padding: 8px 10px;
+    width: 130px;
+    min-width: 130px;
+    padding: 6px 8px;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    gap: 2px;
+    gap: 1px;
     border-right: 1px solid var(--border-color, #333);
     overflow: hidden;
 }
@@ -227,16 +227,16 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    line-height: 1.3;
+    line-height: 1.2;
 }
 
 .signal-timeline-name {
     color: var(--text-dim, #666);
-    font-size: 10px;
+    font-size: 9px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    line-height: 1.3;
+    line-height: 1.2;
 }
 
 /* Status indicator */
@@ -272,8 +272,8 @@
     flex: 1;
     position: relative;
     height: 100%;
-    min-height: 44px;
-    padding: 6px 10px;
+    min-height: 36px;
+    padding: 4px 8px;
     cursor: pointer;
 }
 
@@ -380,13 +380,19 @@
    ANNOTATIONS
    ============================================ */
 .signal-timeline-annotations {
-    margin-top: 8px;
-    padding-top: 8px;
+    margin-top: 6px;
+    padding-top: 6px;
     border-top: 1px solid var(--border-color, #333);
-    max-height: 80px;
+    max-height: 60px;
     overflow-y: auto;
 }
 
+.signal-timeline-annotation {
+    padding: 3px 6px;
+    font-size: 9px;
+    margin-bottom: 2px;
+}
+
 .signal-timeline-annotation {
     display: flex;
     align-items: center;
@@ -458,9 +464,9 @@
    STATS ROW
    ============================================ */
 .signal-timeline-stats {
-    width: 80px;
-    min-width: 80px;
-    padding: 4px 8px;
+    width: 50px;
+    min-width: 50px;
+    padding: 4px 6px;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -498,27 +504,21 @@
 }
 
 /* ============================================
-   LEGEND
+   LEGEND - compact inline version
    ============================================ */
 .signal-timeline-legend {
-    display: flex;
-    gap: 12px;
-    margin-top: 10px;
-    padding-top: 10px;
-    border-top: 1px solid var(--border-color, #333);
-    font-size: 9px;
-    color: var(--text-dim, #666);
+    display: none; /* Hide by default - status colors are self-explanatory */
 }
 
 .signal-timeline-legend-item {
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 3px;
 }
 
 .signal-timeline-legend-dot {
-    width: 8px;
-    height: 8px;
+    width: 6px;
+    height: 6px;
     border-radius: 2px;
 }