From bb010664cad94fa8ab24abe721a6aa43eee50687 Mon Sep 17 00:00:00 2001
From: Smittix <jamessmith1@outlook.com>
Date: Tue, 20 Jan 2026 21:05:18 +0000
Subject: [PATCH] Fix timeline text being squashed and unreadable

- Increase lane min-height from 28px to 44px
- Widen label column from 100px to 140px
- Increase font sizes (freq: 11px, name: 10px)
- Add proper line-height and gap between lines
- Increase lanes container max-height to 240px
- Add more padding to label and track areas

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 static/css/components/signal-timeline.css | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/static/css/components/signal-timeline.css b/static/css/components/signal-timeline.css
index aee831a..df75136 100644
--- a/static/css/components/signal-timeline.css
+++ b/static/css/components/signal-timeline.css
@@ -158,8 +158,8 @@
 .signal-timeline-lanes {
     display: flex;
     flex-direction: column;
-    gap: 2px;
-    max-height: 180px;
+    gap: 3px;
+    max-height: 240px;
     overflow-y: auto;
     margin-top: 8px;
 }
@@ -185,7 +185,7 @@
 .signal-timeline-lane {
     display: flex;
     align-items: stretch;
-    min-height: 28px;
+    min-height: 44px;
     background: var(--bg-secondary, #252525);
     border-radius: 3px;
     overflow: hidden;
@@ -209,31 +209,34 @@
 
 /* Signal label */
 .signal-timeline-label {
-    width: 100px;
-    min-width: 100px;
-    padding: 6px 8px;
+    width: 140px;
+    min-width: 140px;
+    padding: 8px 10px;
     display: flex;
     flex-direction: column;
     justify-content: center;
+    gap: 2px;
     border-right: 1px solid var(--border-color, #333);
-    font-size: 10px;
     overflow: hidden;
 }
 
 .signal-timeline-freq {
     color: var(--text-primary, #fff);
+    font-size: 11px;
     font-weight: 500;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    line-height: 1.3;
 }
 
 .signal-timeline-name {
     color: var(--text-dim, #666);
-    font-size: 9px;
+    font-size: 10px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    line-height: 1.3;
 }
 
 /* Status indicator */
@@ -269,8 +272,8 @@
     flex: 1;
     position: relative;
     height: 100%;
-    min-height: 28px;
-    padding: 4px 8px;
+    min-height: 44px;
+    padding: 6px 10px;
     cursor: pointer;
 }