Relationships
#2963 stagecraft studio: long work-item keys overflow Board cards, and the built-in tracker ref repeats the key
Opened by skunk-ape · 10/2/2026· Shipped 10/2/2026
On the studio Board (#2943), a work item card's key, and its tracker ref, are long strings with no spaces. They overflow the card and break the column layout.
What happened
Seth saw this on 2026-10-02 at /f/blog/board, on main at d0b460c46. GET /api/work-items?factory=blog returns:
key:blog-using-stagecraft-organizing-shipping-blog-posts-6r6t(59 characters)trackerRef: the same 59 characters. On the built-in tracker, a ticket's id is the work item's key, so the card shows it twice.title: "Using stagecraft for organizing and shipping blog posts". This wraps normally.
Keys are slugs of the whole title, so 50 to 64 characters is normal (DESIGN.md, "Keys are stagecraft's": up to 64, the factory prefix cut at 55). The board has to handle that.
Fix
The title is the card's headline. It wraps normally.
The key goes on a single line, cut off with an ellipsis. Show the full key in a tooltip and an accessible label, and in Copy reference.
Show the tracker ref only when it differs from the key, that is, for a real external id such as Linear's
ABC-12. Never repeat the key.Add a backstop on every text element in a card:
min-width: 0on flex and grid children, andoverflow-wrap: anywhere. No string can widen a column.Check the other places the key or tracker ref appears:
- the work-item view (#2944, in progress; coordinate with it so it doesn't ship the same bug);
- Simulate's panels;
- the factory picker.
Apply the same rules wherever they're needed.
Done when
- A studio test renders the board with a 64-character key and a long title. It checks that the card's width stays within its column, that the key is cut off with its full text available, and that a tracker ref equal to the key isn't shown.
- Seth's
blogfactory board displays cleanly. - Keyboard and screen-reader access to the full key is kept (WCAG 2.2 AA).
Out of scope: shortening keys themselves (a design question for later).
Shipped
Click a lifecycle step above to view its details.
Sign in to post a ripple.