@@ -30,7 +30,7 @@ Use `ActivityRow` for a first-line glyph or avatar, title/detail and centered tr
 
 Measure the actual scroll viewport with `ScrollArea`, or attach `useScrollEdges` directly to a native or Base UI scroll owner. Use the shared 16px mask only on edges with more content, updating after scroll, resize, input, reset or filtering. Insets establish resting layout; they cannot substitute for an edge fade. Home widgets and notification panels use `--ui-widget-max-size` as a ceiling, not a forced height. Keep the dashboard free to scroll and let each overflowing list or schedule scroll independently. Plain tooltips preview at most three lines; retain the complete accessible text. A structured people popover owns its content and uses the dropdown’s popup padding and row insets.
 
-Form dialogs use `Modal` or `MultiStepModal`. Pass a title, content, action labels and handlers. The shared borderless surface positions its title at the logical start and supplies one quiet Cancel/Back. Command search and previews use the same shadow and dismissal layer. Form controls cannot construct or style a form header, footer or Cancel button. Opening a dialog or advancing its step focuses the first available field. Confirmation dialogs focus Cancel, and read-only previews focus Close. A nested dialog handles Escape one layer at a time. While a form is open, the global search shortcut leaves its draft and keyboard focus in place. Closing returns focus to the invoking control. Textareas scroll or grow within their owner and never show a manual resize handle. Recipient fields use the textarea’s height, type and inset. Each email tag occupies one text line with the recent row’s trailing remove action. Comma or Enter commits a draft, pasting a list commits its addresses, and Backspace from an empty draft removes the last tag.
+Form dialogs use `Modal` or `MultiStepModal`. Pass a title, content, action labels and handlers. The shared borderless surface positions its title at the logical start and supplies one quiet Cancel/Back. Command search and previews use the same shadow and dismissal layer. Form controls cannot construct or style a form header, footer or Cancel button. Opening a dialog or advancing its step focuses the first available field. Confirmation dialogs focus Cancel, and read-only previews focus Close. A nested dialog handles Escape one layer at a time. While a form is open, the global search shortcut leaves its draft and keyboard focus in place. Closing returns focus to the invoking control. Textareas scroll or grow within their owner and never show a manual resize handle. Recipient fields use the textarea’s height, draft typography and inset. Committed addresses use compact caption text and an always-visible neutral ×, like a panel tab. The remove button sits inside the tag beside its label; long addresses yield space to the button. Comma or Enter commits a draft, pasting a list commits its addresses, and Backspace from an empty draft removes the last tag.
 
 Use `useClipboard` / `CopyButton` for successful copy feedback and `useFeedbackExpiry` for temporary status. Copied indicators and transient notices dwell for four seconds; repeated events restart the timer. Pause an actionable notice during hover or focus and keep its action available in the stack afterward. Icon color changes use `--ui-motion-color` (120ms, zero under reduced motion). Do not put literal timers or CSS durations in product components.
 
 
@@ -133,7 +133,7 @@ test('form titles start at their content edge and Cancel is consistent across ro
   await expect(edit).toBeHidden()
 })
 
-test('invite recipients can be typed, pasted, corrected and removed from the keyboard', async ({
+test('invite recipients can be typed, pasted, corrected and removed by keyboard or pointer', async ({
   page,
   context,
 }) => {
@@ -154,16 +154,51 @@ test('invite recipients can be typed, pasted, corrected and removed from the key
   await expect(remove('second@example.test')).toBeAttached()
   await page.keyboard.press('Backspace')
   await expect(remove('second@example.test')).toHaveCount(0)
-  await page.evaluate(() =>
-    navigator.clipboard.writeText('first@example.test;second@example.test\nthird@example.test,typo')
+  const longAddress = 'warehouse-reconciliation-and-customer-operations@example.test'
+  await page.evaluate(
+    (address) =>
+      navigator.clipboard.writeText(`first@example.test;${address}\nthird@example.test,typo`),
+    longAddress
   )
   await page.keyboard.press('ControlOrMeta+v')
   await expect(modal.getByRole('button', { name: /^Remove / })).toHaveCount(4)
   await expect(input).toHaveAttribute('aria-invalid', 'true')
   await page.keyboard.press('Backspace')
   await expect(input).not.toHaveAttribute('aria-invalid', 'true')
-  await modal.getByText('second@example.test', { exact: true }).hover()
-  await remove('second@example.test').click()
+  const longRemove = remove(longAddress)
+  await longRemove.scrollIntoViewIfNeeded()
+  await page.mouse.move(0, 0)
+  const firstRowBottom = await remove('first@example.test').evaluate(
+    (button) => button.getBoundingClientRect().bottom
+  )
+  for (const hover of [false, true]) {
+    if (hover) await longRemove.hover()
+    const bounds = await longRemove.evaluate((button, address) => {
+      let tag = button.parentElement
+      while (tag && !tag.textContent?.includes(address)) tag = tag.parentElement
+      if (!tag) throw new Error('Missing tag around the address and its remove button')
+      const hit = button.getBoundingClientRect()
+      const box = tag.getBoundingClientRect()
+      return {
+        top: hit.top,
+        insideTag:
+          hit.left >= box.left &&
+          hit.right <= box.right &&
+          hit.top >= box.top &&
+          hit.bottom <= box.bottom,
+        visible: button
+          .querySelector('svg')
+          ?.checkVisibility({ opacityProperty: true, visibilityProperty: true }),
+      }
+    }, longAddress)
+    expect(bounds.top).toBeGreaterThanOrEqual(firstRowBottom)
+    expect(bounds, hover ? 'Hovered remove action' : 'Resting remove action').toMatchObject({
+      insideTag: true,
+      visible: true,
+    })
+  }
+  await longRemove.click()
+  await expect(longRemove).toHaveCount(0)
   await expect(input).toBeFocused()
   await page.keyboard.type('draft')
   await page.keyboard.press('Backspace')
 
@@ -29,6 +29,7 @@
   },
   "IconButton": {
     "size": {
+      "inline": [],
       "row": [],
       "small": [
         "C0120",
 
@@ -43,6 +43,10 @@
   width: var(--spacing-24);
   height: var(--spacing-24);
 }
+.iconButton[data-size="inline"] {
+  inline-size: var(--spacing-16);
+  block-size: var(--spacing-16);
+}
 
 .chip {
   min-height: var(--spacing-app-chip);
@@ -98,6 +102,10 @@
 }
 
 @media (pointer: coarse) {
+  .iconButton[data-size="inline"] {
+    inline-size: var(--spacing-20);
+    block-size: var(--spacing-20);
+  }
   .iconButton[data-size="small"] {
     inline-size: var(--spacing-app-touch-target);
     block-size: var(--spacing-app-touch-target);
@@ -148,24 +156,6 @@
   visibility: hidden;
 }
 
-.chip[data-recipient] {
-  min-block-size: 0;
-  block-size: 1lh;
-  background: var(--ui-hover);
-  cursor: text;
-}
-.chip[data-recipient="invalid"],
-.chipRow:hover > .chip[data-recipient="invalid"] {
-  background: var(--control-danger-soft);
-  color: var(--control-danger);
-}
-.chipRow:has(> .chip[data-recipient]) {
-  position: relative;
-}
-.chipRow:has(> .chip[data-recipient]) > .chipAction {
-  position: absolute;
-  inset-inline-end: 0;
-}
 @media (hover: none) {
   .chipAction {
     opacity: 1;
 
@@ -63,7 +63,7 @@ interface IconButtonProps {
   render?: ReactElement
   label: string
   icon: IconName
-  size?: 'small' | 'row' | 'compact'
+  size?: 'small' | 'row' | 'compact' | 'inline'
   variant?: 'quiet' | 'solid' | 'floating'
   disabled?: boolean
   onClick?: MouseEventHandler<HTMLButtonElement>
 
@@ -16,7 +16,6 @@ interface ControlRowProps {
   onClick?: () => void
   icon?: IconName
   wrap?: boolean
-  recipient?: 'valid' | 'invalid'
   action?: ReactNode
   actionSide?: 'start' | 'end'
 }
@@ -30,7 +29,6 @@ export function ControlRow({
   onClick,
   icon,
   wrap,
-  recipient,
   action,
   actionSide = 'end',
 }: ControlRowProps) {
@@ -39,7 +37,6 @@ export function ControlRow({
     props: {
       className: styles.chip,
       'data-type': 'T043',
-      'data-recipient': recipient,
       'aria-label': accessibleLabel,
       onClick,
       children: (
 
@@ -50,6 +50,22 @@
   border-color: var(--control-danger);
 }
 
+.tag {
+  display: inline-flex;
+  align-items: center;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  gap: var(--ui-action-gap);
+  padding-inline: var(--spacing-4) var(--spacing-2);
+  border-radius: var(--ui-control-radius);
+  background: var(--ui-hover);
+}
+
+.tag[data-invalid] {
+  background: var(--control-danger-soft);
+  color: var(--control-danger);
+}
+
 .recipientViewport {
   display: flex;
   flex-wrap: wrap;
 
@@ -2,9 +2,9 @@
 
 import { useId, useLayoutEffect, useRef, useState } from 'react'
 import { IconButton } from '@/platform/design-system/components/button/button'
-import { ControlRow } from '@/platform/design-system/components/button/control-row'
 import { FieldFrame } from '@/platform/design-system/components/field/fields'
 import { Icon } from '@/platform/design-system/components/icon/icon'
+import { OverflowText } from '@/platform/design-system/components/overflow-text/overflow-text'
 import { useScrollEdges } from '@/platform/design-system/components/scroll-area/use-scroll-edges'
 import styles from '@/platform/design-system/components/workspace-fields/workspace-fields.module.css'
 
@@ -37,21 +37,17 @@ interface RecipientTagProps extends Recipient {
 
 export function RecipientTag({ address, invalid, onRemove }: RecipientTagProps) {
   return (
-    <ControlRow
-      render={<span />}
-      label={address}
-      recipient={invalid ? 'invalid' : 'valid'}
-      action={
-        onRemove && (
-          <IconButton
-            size='compact'
-            label={`Remove ${address}`}
-            icon='I105'
-            onClick={() => onRemove(address)}
-          />
-        )
-      }
-    />
+    <span className={styles.tag} data-invalid={invalid || undefined} data-type='T052'>
+      <OverflowText text={address}>{address}</OverflowText>
+      {onRemove && (
+        <IconButton
+          size='inline'
+          label={`Remove ${address}`}
+          icon='I105'
+          onClick={() => onRemove(address)}
+        />
+      )}
+    </span>
   )
 }
 
 
@@ -8,7 +8,7 @@ Start with the interaction. A different label, icon, data source, theme or scree
 | Navigate or select a row | ControlRow renders the actual link, tab or button. Chip, IdentityButton, sidebar, recent-items, destination-tabs, tabs and workspace-list compose it. A trailing ellipsis/close or a leading remove share a sibling action target: never nest a second button inside the first. Workspace choices can wrap to fit their name. |
 | Open a two-line activity or destination | ActivityRow owns the text stack, leading art, hit area and optional trailing content. Home email and attention, the notification inbox and the chat panel launcher supply data. A notification with independent action buttons composes the same noninteractive ActivityBody alongside its actions. Section titles and scroll bounds stay with the containing feature. |
 | Choose a value or run a command | Picker owns Select/Combobox behavior, Menu owns actions, nested menus, popovers and date range choices. These share popup and row recipes; retain their distinct ARIA roles and keyboard behavior. CommandPalette owns multi-group search and navigation inside the shared dialog. |
-| Edit or toggle | Field owns labeled input/textarea chrome and errors. Platform globals disable manual textarea resizing. SearchField/MenuSearchField own clearable search and filtering. WorkspaceFields owns recipient parsing, editing, validation, removal and logo upload. RecipientTag composes the ControlRow remove action at the textarea’s line height. ComposerInput owns draft typing, paste and submission. Switch owns a boolean, SegmentedControl owns mutually exclusive choices. |
+| Edit or toggle | Field owns labeled input/textarea chrome and errors. Platform globals disable manual textarea resizing. SearchField/MenuSearchField own clearable search and filtering. WorkspaceFields owns recipient parsing, editing, validation, removal and logo upload. RecipientTag pairs a bounded address with an always-visible inline IconButton. The field wraps tags as a unit. ComposerInput owns draft typing, paste and submission. Switch owns a boolean, SegmentedControl owns mutually exclusive choices. |
 | Display layers and transient feedback | Modal owns title, body, multi-step progression and footer. OverlayDialog supplies the same surface to search and attachment previews. Tooltip owns bounded plain labels; a structured people panel uses its own measured content. Feedback owns clipboard success and timeout behavior. The notification tray owns history and Undo, with one control shadow outside the scroll viewport. |
 | Show files, people and media | Attachments composes ControlRow with file glyph or thumbnail, an accessible preview target and an independent quiet remove action. Avatar owns image and single-initial fallbacks across profiles, email and people details. Icon owns interface paint and distinguishes branded artwork. Product callers supply media or data. |
 | Read or inspect data | Chart owns shared numerical formatting, point inspection and chart tooltips. DataDisplay owns metrics and table semantics; PropertyList owns labeled values, ExecutionSteps is a noninteractive numbered plan, and EmptyState describes absent data. Calendar hours/events, Home activity chart axes and chat tool payloads remain with the features that interpret them. |