[bilal-karim]

Description & motivation 💭

Designer-led polish for the Relationships tab in workflow details. It builds on the Parent view branch lines in #4064, but doesn't depend on that PR.

• Tree lines connect parent, child and grandchild rows. Each child's vertical line now runs the full height of its subtree, so a parent's line continues past its grandchildren down to the next sibling. The last child ends in a rounded elbow. Before, each line only ran beside its own rows, so it broke around nested rows and ran past the last child.
• Lines no longer overlap the status badges. The horizontal tick is now 8px, so it stops 4px short of the badge. Before, it was 24px and ran 12px into the badge.
• Lines use border-secondary, matching the table branch lines in Align child workflow bolts and add branch lines in Parent view #4064.
• Lines stay visible on the highlighted row. Before, the active (blue) row hid its line, which left a gap in the tree.
• Columns line up on every row. ID, Child Count and Start/End/Duration are sized relative to the whole list using container query units (cqw, with container-type: inline-size on the list). The first column absorbs each row's indentation. Before, nested rows were narrower, so every column started at a different x, and rows with a +/− icon shifted further.
• Column labels top-align, so Child Count sits level with Start/End. Start/End get more width on wide screens.
• Rounded container, using the same rounded-lg border border-primary as the paginated tables. overflow-clip rounds the inner corners without breaking the graph's sticky positioning.
• Graph control tooltips open above the buttons instead of below, where the graph container clipped them. ZoomSvg is only used by this tab.

Screenshots (if applicable) 📸

Dark mode, 1440px wide, Expand All on, shipping row active, hovering Zoom in.

Before (main)	After

Design Considerations 🎨

• Column widths (18cqw ID, 28cqw/42cqw times at lg/xl, 8rem duration) were tuned so Start/End fit on two lines and durations on one at 1440px. At narrow lg widths (~1100px) timestamps still wrap to several lines, as they do on main.
• Long workflow type names wrap within their column instead of pushing the other columns out of line.

Testing 🧪

How was this tested 👻

• Manual testing
• E2E tests added
• Unit tests added

Checked against a local server with nested, failing, running and fan-out child workflows, in light and dark mode at 1440px and 1100px. Measured in the browser that every row's columns start at the same x, that column labels share the same top, that ticks stop short of badges, and that the graph still sticks under the top nav when scrolling.

Steps for others to test: 🚶🏽‍♂️🚶🏽‍♀️

1. Open a workflow that has child and grandchild workflows, then go to the Relationships tab.
2. Turn on Expand All and click a child row to highlight it.
3. Check that the tree lines connect through grandchildren, the last child ends in an elbow, and the columns line up on every row.
4. Hover the graph controls and check the tooltips open above the buttons.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
holocene	Ready	Preview	Oct 29, 2026 3:17pm UTC

[rossedfort]

The fallback for browsers without container query units can probably go. Every browser we support already handles cqw and container-type, so the indent prop and the inline calc(18% + ${indent * 0.18}px) variables above, as well as the extra @screen blocks here never take effect.

The indent={generation * 16} math is also tied to the pl-4 on the children wrapper. If that padding changes, the fallback breaks without anyone noticing.

Without the fallback, the whole <style> block can become Tailwind classes:

• ID column: lg:w-[18cqw]
• Timestamps column: lg:w-[28cqw] xl:w-[42cqw] lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_8rem]

That also removes the display: grid that repeats the lg:grid class.

[bilal-karim]

Thank you. Just updated and tested again. UI changes still look as intended.