fix: Timeline react ui has vertical gaps in spine characters

starpit · starpit · commit d8560a25f6dc · 2025-02-24T15:28:36.000-05:00
Signed-off-by: Nick Mitchell &lt;nickm@us.ibm.com&gt;
diff --git a/pdl-live-react/src/view/timeline/Timeline.css b/pdl-live-react/src/view/timeline/Timeline.css
@@ -12,13 +12,14 @@
 
 .pdl-timeline-cell {
   display: table-cell;
-  vertical-align: middle;
+  vertical-align: bottom;
 
   &[data-cell="kind"] {
     height: var(--pdl-t-h);
     line-height: var(--pdl-t-h);
     .pdl-mono {
       white-space: pre;
+      font-size: 1.3em; /* oof, the masonry-index (below) needs a bit more height */
     }
   }
   &[data-cell="bar"] {

Original file line number	Diff line number	Diff line change
`@@ -12,13 +12,14 @@`
`12`	`12`
`13`	`13`	`.pdl-timeline-cell {`
`14`	`14`	`display: table-cell;`
`15`		`- vertical-align: middle;`
	`15`	`+ vertical-align: bottom;`
`16`	`16`
`17`	`17`	`&[data-cell="kind"] {`
`18`	`18`	`height: var(--pdl-t-h);`
`19`	`19`	`line-height: var(--pdl-t-h);`
`20`	`20`	`.pdl-mono {`
`21`	`21`	`white-space: pre;`
	`22`	`+ font-size: 1.3em; /* oof, the masonry-index (below) needs a bit more height */`
`22`	`23`	`}`
`23`	`24`	`}`
`24`	`25`	`&[data-cell="bar"] {`