Skip to content

fix(elements): keep chain-of-thought timeline connector continuous between steps - #453

Open
ephraimduncan wants to merge 1 commit into
vercel:mainfrom
ephraimduncan:fix/cot-timeline-connector
Open

fix(elements): keep chain-of-thought timeline connector continuous between steps#453
ephraimduncan wants to merge 1 commit into
vercel:mainfrom
ephraimduncan:fix/cot-timeline-connector

Conversation

@ephraimduncan

@ephraimduncan ephraimduncan commented Jul 30, 2026

Copy link
Copy Markdown

Problem

The vertical timeline connector in ChainOfThoughtStep has three visual defects, visible on the chain-of-thought docs/example page:

  1. Disappears on short steps — the connector is positioned top-7 (28px) inside an icon column that is only ~18px tall for a label-only step, so its height clamps to zero and nothing is painted.
  2. Breaks between steps — it ends at bottom-0 of its own step box, so it can't bridge the 12px space-y-3 gap that ChainOfThoughtContent adds between steps.
  3. Dangling stub after the last step — the connector renders unconditionally with no awareness of being the final item.

Fix

  • Start the connector at top-6 (8px below the icon) and extend it with -bottom-3 so it spans the inter-step gap exactly.
  • Mark the step root as a named group (group/step) and hide the connector on the last step via group-last/step:hidden.

Verification

Measured on the rendered docs page (/components/chain-of-thought): each connector's bottom edge now lands exactly on the next step's top (no gap, no zero-height segment), and the final step's connector is display: none. Zoomed screenshot inspection confirms a continuous rule between every adjacent icon pair and no line after the final icon.

Before / after connector on a label-only step: previously unpainted (used height clamped to 0); now an 8px visible segment bridging into the next step.

Screenshots

Before — annotated

Chain-of-thought timeline before the fix, with the broken connector between steps and the dangling stub after the final step annotated

After — annotated

Chain-of-thought timeline after the fix, with the continuous connector through the inter-step gap and the clean ending after the final step annotated

@vercel

vercel Bot commented Jul 30, 2026

Copy link
Copy Markdown
Contributor

@ephraimduncan is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant