Skip to content

docs(merge-queue): changelog for graph view layout and node visual improvements #273

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
samgutentag wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs(merge-queue): changelog for graph view layout and node visual improvements #273

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions changelog/2026-06-24-merge-queue-graph-view-layout.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
title: "Merge Queue: Improved Graph View Layout and Node Visuals"
description: "The merge queue graph view now uses column-based placement to prevent lane overlaps, and node cards match updated design tokens."
date: 2026-06-24
category: Merge Queue
type: update
---

**The [merge queue graph view](https://docs.trunk.io/merge-queue/using-the-queue/monitor-queue-status#graph-view) has an updated layout algorithm and refreshed node card visuals.**

- **Column-based node placement.** Nodes are placed on a column grid. Children align under their leftmost parent column, and column collisions shift right to prevent horizontal overlap. Row widths only grow (never shrink) as more nodes arrive, so the grid stays stable while the queue is active.
- **Consistent row heights.** All nodes in the same logical row share the maximum height of that row, keeping horizontal alignment clean.
- **Refreshed node cards.** Cards now use 4px radius, 1px border, a subtle drop shadow, and a 3px status rail that widens to 6px on hover. Bisecting and testing state shares a split icon and orange footer. Color tokens are applied consistently throughout.
- **Flat header bar.** The main/bisecting header is now a flat, integrated bar with accent underlines that run edge-to-edge. The active tab sits on the left; the inactive tab occupies a fixed 12rem slot on the right so the layout does not shift when switching tabs.

Loading