Skip to content

fix: show full value on truncated text (hover tooltips) - #78

Open
marekdano wants to merge 2 commits into
mainfrom
73-show-truncate-values-in-tooltip
Open

fix: show full value on truncated text (hover tooltips)#78
marekdano wants to merge 2 commits into
mainfrom
73-show-truncate-values-in-tooltip

Conversation

@marekdano

Copy link
Copy Markdown
Contributor

Fixes #73

Summary

  • Add TruncatedMiddleText for values shortened via truncateMiddle (copy-value, tool/resource/prompt IDs, URIs, virtual server source tabs): shows a hover tooltip with the full value when it's actually truncated, and sets aria-label to the full value since the shortened string is all that reaches the DOM.
  • Add TruncatedText for CSS-truncated (.truncate) text: a ResizeObserver compares scrollWidth/clientWidth so the tooltip only appears when the text is actually clipped at its current rendered width. The full text stays in the DOM either way, so it's available to screen readers regardless of visual truncation.
  • Wire both components into all ~28 truncated-value spots across tool/resource/prompt/server tables, detail panels, cards, and lists, per Show the full value on truncated text #73.
  • Fix a pre-existing double-truncation bug (.truncate CSS wrapping an already truncateMiddle'd string) in the Tools/Resources/Prompts ID columns.
  • Replace native title attributes with the new tooltip where present — a native title doesn't satisfy WCAG 1.4.13 (hoverable/dismissible/persistent).
  • Fix TooltipContent (src/components/ui/tooltip.tsx) to use break-all instead of no wrapping: long unbroken strings (filenames, URIs, hashes) were overflowing past the tooltip bubble's max-w-xs bound instead of wrapping onto additional lines.

Test plan

  • npx vitest run — full suite passes (187 files / 3123 tests)
  • npx tsc --noEmit — clean
  • npx eslint on all changed files — clean
  • npm run build — production build succeeds
  • Manually verified in the running app: hovering a truncated resource name/URI/ID shows the full value, wrapped correctly inside the tooltip bubble

Signed-off-by: Marek Dano <mk.dano@gmail.com>
Signed-off-by: Marek Dano <mk.dano@gmail.com>
@marekdano
marekdano force-pushed the 73-show-truncate-values-in-tooltip branch from 4ff5fe7 to 315f3be Compare August 24, 2026 16:17
@marekdano
marekdano requested review from a-effort, gcgoncalves and vishu-bh and removed request for a-effort and vishu-bh August 24, 2026 16:46
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.

Show the full value on truncated text

1 participant