Skip to content

[DS 2.0] Keep node title and subtitle on one line with ellipsis and tooltip - #126

Draft
librowski wants to merge 2 commits into
ds2-persist-without-measuredfrom
ds2-node-text-ellipsis
Draft

[DS 2.0] Keep node title and subtitle on one line with ellipsis and tooltip#126
librowski wants to merge 2 commits into
ds2-persist-without-measuredfrom
ds2-node-text-ellipsis

Conversation

@librowski

@librowski librowski commented Sep 7, 2026

Copy link
Copy Markdown
Collaborator

Problem

Design rule for DS 2.0 canvas nodes (confirmed by design on the node geometry questions): fixed 241px width, no resize, height grows; title, subtitle and body rows are one line with an ellipsis and the full text in a tooltip; rich body wraps. In code only the title truncated. A long subtitle wrapped, and in the Decision template (min-width: max-content on the body) it widened the whole node - observed at 284px in the AI Studio "Customer Support Triage" flow.

Change

  • node-description.module.css: the subtitle gets the same one-line ellipsis treatment as the title; the block gets min-width: 0 and contain: inline-size, so its text no longer contributes intrinsic width to a max-content body. Nodes keep the design width and grow in height only.
  • NodeDescription sets the native title attribute on both lines so the full text stays reachable (the design system tooltip component can replace it later without changing the contract).
  • ConnectableItem (Decision branch rows, AI tool rows) gets the same title attribute on its label, so every clipped line in the node shell is readable on hover; spec and @workflowbuilder/sdk patch changeset.
  • Spec covers the tooltip attributes; docs page gains a "Truncation" section; changeset @workflowbuilder/ui patch.

Verification

ui tests (69), sdk ConnectableItem spec, typecheck, build, check:built-css, stylelint, eslint. End-to-end pass of the built stack (2026-09-09): 241px on every node in all demo templates and AI Studio, Decision rows 201px, clipped titles and rows carry the full text.

@librowski
librowski force-pushed the ds2-node-text-ellipsis branch from 365d0f0 to dcd25e9 Compare September 9, 2026 15:45
@librowski
librowski force-pushed the ds2-node-text-ellipsis branch from dcd25e9 to 6c07c11 Compare September 9, 2026 16:49
…ooltip

Design rule for DS 2.0 nodes: fixed width, height grows, title and subtitle
truncate to one line with the full text in a tooltip. The description block
also stops contributing intrinsic width (contain: inline-size), so a long
subtitle no longer widens bodies sized with min-width: max-content.
Decision branch rows and AI tool rows already clip long labels with an
ellipsis but exposed no way to read the full text. The label now carries
a title attribute, matching the node title and subtitle behaviour.
@librowski
librowski force-pushed the ds2-node-text-ellipsis branch from 1f1f9c3 to 8171189 Compare September 9, 2026 21:38
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