Version: 3.9.0 — src/lib/progress/timeline/spine.tsx, src/lib/progress/timeline/bullet.tsx
Spine positions the bullet by measuring the title: it renders a spacer of height titleRef.current.offsetTop
(with the connecting line drawn on it), then the bullet, a size-4 (16px) circle. So the bullet's top edge
lines up with the title's top edge. The title is text-sm (20px line box), so the bullet's center sits 2px
above the title's center on every item; the offset grows if the title row is taller than the title (e.g. a 24px
party element next to it, since the row is items-center).
Measured in kleros-v2 (web/src/components/Verdict/DisputeTimeline.tsx): bullet center 833 vs title center 835
on both items of a dispute timeline.
Current consumer workaround: force the title row to 16px (h2 { line-height: 16px } and shrink-wrap the party
link), which also avoids a 4px stub of connecting line appearing above the first bullet when the row is 24px.
Proposal: center the bullet on the title instead of top-aligning it, e.g. spacer height
offsetTop + (titleHeight - bulletSize) / 2 (using titleRef.current.offsetHeight), and keep the line segment
above the bullet only for non-first items so a taller title row never shows a stub above the first bullet.
Version: 3.9.0 —
src/lib/progress/timeline/spine.tsx,src/lib/progress/timeline/bullet.tsxSpinepositions the bullet by measuring the title: it renders a spacer of heighttitleRef.current.offsetTop(with the connecting line drawn on it), then the bullet, a
size-4(16px) circle. So the bullet's top edgelines up with the title's top edge. The title is
text-sm(20px line box), so the bullet's center sits 2pxabove the title's center on every item; the offset grows if the title row is taller than the title (e.g. a 24px
party element next to it, since the row is
items-center).Measured in kleros-v2 (
web/src/components/Verdict/DisputeTimeline.tsx): bullet center 833 vs title center 835on both items of a dispute timeline.
Current consumer workaround: force the title row to 16px (
h2 { line-height: 16px }and shrink-wrap the partylink), which also avoids a 4px stub of connecting line appearing above the first bullet when the row is 24px.
Proposal: center the bullet on the title instead of top-aligning it, e.g. spacer height
offsetTop + (titleHeight - bulletSize) / 2(usingtitleRef.current.offsetHeight), and keep the line segmentabove the bullet only for non-first items so a taller title row never shows a stub above the first bullet.