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

.changeset/node-text-ellipsis.md

@@ -0,0 +1,5 @@
+---
+'@workflowbuilder/ui': patch
+---
+
+`NodeDescription` keeps both the title and the subtitle on one line: long text is truncated with an ellipsis and exposed in full through the element's native tooltip, and the text no longer widens nodes whose body sizes to its content (for example the Decision node). Nodes keep the fixed design width and grow in height only.

apps/docs/src/content/docs/ui-library/diagram-components/node-description.mdx

@@ -30,6 +30,12 @@ function NodeHeader({ icon, label, description }) {
 }
 ```
 
+## Truncation
+
+Both lines are single-line. Text that does not fit the node width is cut with an ellipsis and the
+full text is available through the element's native tooltip (`title`). The block never widens its
+node: a node keeps the design width and grows in height only through its body content.
+
 ## Props
 
 <PropsTable slug="node-description" />

packages/ui/src/components/node/node-description/node-description.module.css

@@ -11,15 +11,21 @@
     align-items: flex-start;
     overflow: hidden;
     width: 100%;
+    min-width: 0;
+    contain: inline-size;
 
-    .title {
-      color: var(--wb-public-node-title-color);
+    .title,
+    .subtitle {
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
       width: 100%;
     }
 
+    .title {
+      color: var(--wb-public-node-title-color);
+    }
+
     .subtitle {
       color: var(--wb-public-node-title-subtitle);
     }

packages/ui/src/components/node/node-description/node-description.spec.tsx

@@ -0,0 +1,39 @@
+import { act } from 'react';
+import { type Root, createRoot } from 'react-dom/client';
+
+import { NodeDescription } from './node-description';
+
+(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.append(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+});
+
+describe('NodeDescription', () => {
+  it('exposes the full label and description as native tooltips for truncated text', () => {
+    act(() =>
+      root.render(<NodeDescription label="Route by Type" description="Sends the ticket to the right responder." />),
+    );
+
+    const [title, subtitle] = container.querySelectorAll('span');
+    expect(title.getAttribute('title')).toBe('Route by Type');
+    expect(subtitle.getAttribute('title')).toBe('Sends the ticket to the right responder.');
+  });
+
+  it('renders no tooltip attribute when there is no description', () => {
+    act(() => root.render(<NodeDescription label="Start" />));
+
+    const [, subtitle] = container.querySelectorAll('span');
+    expect(subtitle.hasAttribute('title')).toBe(false);
+  });
+});

packages/ui/src/components/node/node-description/node-description.tsx

@@ -11,8 +11,12 @@ export type NodeDescriptionProps = {
 export function NodeDescription({ label, description, className }: NodeDescriptionProps) {
   return (
     <div className={clsx(styles['container'], className)}>
-      <span className={clsx('wb-text-title-s-emphasized', styles['title'])}>{label}</span>
-      <span className={clsx('wb-text-node-s', styles['subtitle'])}>{description}</span>
+      <span className={clsx('wb-text-title-s-emphasized', styles['title'])} title={label}>
+        {label}
+      </span>
+      <span className={clsx('wb-text-node-s', styles['subtitle'])} title={description}>
+        {description}
+      </span>
     </div>
   );
 }