Text is truncated in ~28 places. This adds a hover tooltip carrying the full value, and pairs with #72
Two kinds of truncation
Phase 1 truncateMiddle: The string is shortened before render, so the full value is never in the DOM. Detection is value.length > maxLength.
Phase 2 CSS .truncate: Text is in the DOM but clipped, and only at some widths. Needs a shared wrapper doing scrollWidth > clientWidth + ResizeObserver, so tooltips appear only when text is clipped.
Phase 1
Note: ToolsTable.tsx:111-112 is currently truncated twice... truncateMiddle(id, 18) inside a .truncate span. Fix while making these changes.
Phase 2
Build a <TruncatedText> wrapper first; the rest are one-line adoptions.
Tables: ToolsTable.tsx:85, :94 · ServersTable.tsx:209 · ResourcesTable.tsx:71¹ · PromptDefinitionTable.tsx:81¹
Detail panels: VirtualServerDetailsPanel.tsx:415, :585, :587, :601 · MCPServerDetailsPanel.tsx:341, :486, :490, :504 · PromptDetailsPanel.tsx:173
Cards and lists: VirtualServerCard.tsx:66, :186 · ServerRosterRow.tsx:113 · UsersTable.tsx:107, :110 · UserForm.tsx:176 · HeaderQuickNav.tsx:409, :411 · SourceSelection.tsx:407 · CreateServer.tsx:323, :438
Note: ¹ Already use a native title. Replacing them makes the name column behave like the ID column beside it, and satisfies WCAG 1.4.13, which a native title does not.
Out of scope: ui/sidebar.tsx:450, :639: truncation is internal to the primitive, which has its own collapsed-state tooltip.
Acceptance
- Every truncated value is readable in full without leaving the page
- Tooltips appear only when text is actually clipped
- Full values stay available to screen readers regardless of visual truncation
Text is truncated in ~28 places. This adds a hover tooltip carrying the full value, and pairs with #72
Two kinds of truncation
Phase 1
truncateMiddle: The string is shortened before render, so the full value is never in the DOM. Detection isvalue.length > maxLength.Phase 2 CSS
.truncate: Text is in the DOM but clipped, and only at some widths. Needs a shared wrapper doingscrollWidth > clientWidth+ResizeObserver, so tooltips appear only when text is clipped.Phase 1
ui/copy-value.tsx:26: covers all five detail panelstools/ToolsTable.tsx:112: tool ID, max 18resources/ResourcesTable.tsx:79: URI, max 28resources/ResourcesTable.tsx:96: resource ID, max 18prompts/PromptDefinitionTable.tsx:89: prompt ID, max 40gateways/VirtualServerDetailsPanel.tsx:304: associated ID, max 32Note:
ToolsTable.tsx:111-112is currently truncated twice...truncateMiddle(id, 18)inside a.truncatespan. Fix while making these changes.Phase 2
Build a
<TruncatedText>wrapper first; the rest are one-line adoptions.Tables:
ToolsTable.tsx:85,:94·ServersTable.tsx:209·ResourcesTable.tsx:71¹ ·PromptDefinitionTable.tsx:81¹Detail panels:
VirtualServerDetailsPanel.tsx:415,:585,:587,:601·MCPServerDetailsPanel.tsx:341,:486,:490,:504·PromptDetailsPanel.tsx:173Cards and lists:
VirtualServerCard.tsx:66,:186·ServerRosterRow.tsx:113·UsersTable.tsx:107,:110·UserForm.tsx:176·HeaderQuickNav.tsx:409,:411·SourceSelection.tsx:407·CreateServer.tsx:323,:438Note: ¹ Already use a native
title. Replacing them makes the name column behave like the ID column beside it, and satisfies WCAG 1.4.13, which a nativetitledoes not.Out of scope:
ui/sidebar.tsx:450,:639: truncation is internal to the primitive, which has its own collapsed-state tooltip.Acceptance