Skip to content

fix(charts): the bar tooltip renders in <body> and flips below when there is no room above (#3264) - #3267

Merged
vybe merged 1 commit into
devfrom
feature/3264-chart-tooltip-flip
Oct 6, 2026
Merged

vybe merged 1 commit into
devfrom
feature/3264-chart-tooltip-flip

Conversation

@dolho

@dolho dolho commented Oct 6, 2026 •

Copy link
Copy Markdown
Contributor

Summary

  • On the Workspace agent band the activity chart is 23px tall, sits just under the page header, and is inside ScanlineReveal's clip-path. The bar tooltip was an absolute bottom-full child of the bar, so it always opened upward and its top rows (the date, the top buckets) were covered.
  • StackedBarChart now renders one tooltip through <Teleport to="body"> with position: fixed and z-50, placed from the hovered bar's rect. No parent can clip or cover it.
  • Placement: above when it fits; otherwise below when that fits; otherwise whichever side has more room. Horizontally it is centred on the bar and clamped 8px inside the viewport.
  • It stays hidden until measured, so it never flashes at 0,0. It follows the bar through scroll (capture) and resize, and the listeners are removed on leave and on unmount.
  • Markup and classes are unchanged (the same dark chip, gray only). All callers get the fix: the Workspace band, the agent Overview and canvas charts.

Changes

  • src/frontend/src/components/StackedBarChart.vue
  • src/frontend/tests/unit/stackedBarChartTooltip.mount.spec.js (new mount spec, jsdom)

Test Plan

  • npx vitest run tests/unit/stackedBarChartTooltip.mount.spec.js: 6 passed, and all 6 fail against the old component. The cases:
    • the tooltip renders in <body>, outside the chart;
    • it opens above when there is room;
    • it flips below near the top;
    • it is clamped at the left edge;
    • it is clamped at the right edge;
    • an empty day shows nothing, and the tooltip goes away on leave.
  • Full frontend unit suite: 263 files, 4,649 tests passed, including the raw-colour, source-text and loading-gate ratchets. npm run check:tokens OK.
  • Playwright on a local instance, Workspace → sales-companion, light and dark: hovering a bar shows the full tooltip (date, buckets, total) drawn over the header, not under it.
  • Human visual check (reviewer, on a local instance): Workspace band and agent Overview, light and dark, plus the edge bars.

Fixes #3264

🤖 Generated with Claude Code

…here is no room above (#3264)

On the Workspace agent band the activity chart is 23px tall, sits just
under the page header and inside ScanlineReveal's clip-path. The
tooltip was an `absolute bottom-full` child of the bar, so it always
opened upward and its top rows (the date, the top buckets) were covered.

StackedBarChart now teleports one tooltip to <body>, position: fixed,
placed from the hovered bar's rect: above when it fits, below when it
does not, clamped 8px inside the viewport on every side. It stays
hidden until measured and follows the bar through scroll and resize.
Applies to every caller (Workspace band, agent Overview, canvas charts).

Fixes #3264

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@dolho dolho added the ui PR touches the frontend UI — triggers Playwright e2e tests label Oct 6, 2026

@vybe vybe left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

merge-train: batch validated on train/20261006-1038 (#3270)

@vybe
vybe merged commit 9b9a81a into dev Oct 6, 2026
25 of 27 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ui PR touches the frontend UI — triggers Playwright e2e tests

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants