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

.changeset/connectable-item-tooltip.md

@@ -0,0 +1,5 @@
+---
+'@workflowbuilder/sdk': patch
+---
+
+Decision branch rows and AI tool rows show the full label in a tooltip when the text is truncated.

.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/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item.spec.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { ConnectableItem } from './connectable-item';
+
+vi.mock('@xyflow/react', () => ({
+  Handle: ({ id }: { id: string }) => <span data-testid="handle" data-handle-id={id} />,
+  Position: { Right: 'right', Bottom: 'bottom' },
+}));
+
+vi.mock('../../../../../store/store', () => ({
+  useStore: (selector: (state: { layoutDirection: 'RIGHT' | 'DOWN' }) => unknown) =>
+    selector({ layoutDirection: 'RIGHT' }),
+}));
+
+describe('ConnectableItem', () => {
+  it('exposes the full label as a tooltip so a clipped row stays readable', () => {
+    const label = 'Small and medium business with an unusually long branch label';
+
+    render(<ConnectableItem handleId="source:inner:b2" label={label} />);
+
+    expect(screen.getByText(label).getAttribute('title')).toBe(label);
+    expect(screen.getByTestId('handle').dataset.handleId).toBe('source:inner:b2');
+  });
+});

packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item.tsx

@@ -22,7 +22,9 @@ export function ConnectableItem({ handleId, label, canHaveBottomHandle = true }:
         [styles['connectable-item--right']]: layoutDirection === 'RIGHT',
       })}
     >
-      <div className={styles['label']}>{label}</div>
+      <div className={styles['label']} title={label}>
+        {label}
+      </div>
       <div className={clsx(styles['handle-container'], { [styles['vertical']]: isVertical })}>
         <Handle id={handleId} position={position} type="source" />
       </div>

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>
   );
 }