Uh oh!
There was an error while loading. Please reload this page.
Fix horizontal bar chart tooltip clipping off the right edge - #132
Fix horizontal bar chart tooltip clipping off the right edge#132robsfletch wants to merge 1 commit into
Conversation
The horizontal-orientation branch in BarChart's handleMouseMove/handleKeyDown pinned the tooltip past the plot's right edge with transform: none and never measured its width, unlike the vertical branch which already flips left when it would overflow. Long tooltip content (e.g. long series/value labels) got clipped by the consuming app's container overflow. Mirrors the vertical branch: measure tooltip width, and flip it to grow leftward from the plot's right edge when it would overflow the container.
Greptile SummaryThis PR keeps horizontal bar-chart tooltips from overflowing the right edge. The main changes are:
Confidence Score: 4/5Oversized horizontal tooltips can still be clipped on the left in narrow containers.
src/components/Chart/BarChart.tsx
|
| Filename | Overview |
|---|---|
| src/components/Chart/BarChart.tsx | Adds width-aware horizontal tooltip placement, but the fallback can overflow the container's left edge. |
| src/components/Chart/Chart.test-stories.tsx | Adds a narrow horizontal bar-chart fixture with a long tooltip label. |
| src/components/Chart/Chart.test.tsx | Adds right-edge containment coverage, but does not check left-edge containment. |
Prompt To Fix All With AI
Fix the following 1 code review issue. Work through them one at a time, proposing concise fixes.
---### Issue 1 of 1
src/components/Chart/BarChart.tsx:270-272
**Left Flip Can Still Clip**
When the tooltip is wider than `padLeft + plotWidth - TOOLTIP_GAP`, translating it left by its full width produces a negative left edge. In a narrow chart with a long unbroken label, an overflow-clipping container will crop the tooltip on the left instead of the right, so this fallback must constrain both edges.
Reviews (1): Last reviewed commit: "Fix horizontal bar chart tooltip clippin..." | Re-trigger Greptile
| } else { | ||
| tip.style.left = `${padLeft + plotWidth - TOOLTIP_GAP}px`; | ||
| tip.style.transform = 'translateX(-100%)'; |
There was a problem hiding this comment.
When the tooltip is wider than padLeft + plotWidth - TOOLTIP_GAP, translating it left by its full width produces a negative left edge. In a narrow chart with a long unbroken label, an overflow-clipping container will crop the tooltip on the left instead of the right, so this fallback must constrain both edges.
Context Used: Chart component color and usage conventions (source)
Prompt To Fix With AI
This is a comment left during a code review.
Path: src/components/Chart/BarChart.tsx
Line: 270-272
Comment:
**Left Flip Can Still Clip**
When the tooltip is wider than `padLeft + plotWidth - TOOLTIP_GAP`, translating it left by its full width produces a negative left edge. In a narrow chart with a long unbroken label, an overflow-clipping container will crop the tooltip on the left instead of the right, so this fallback must constrain both edges.
**Context Used:** Chart component color and usage conventions ([source](https://app.greptile.com/lightspark/github/lightsparkdev/origin/-/custom-context?memory=2070e049-47f8-4317-b8d3-707fd915a94b))
How can I resolve this? If you propose a fix, please make it concise.
Summary
BarChart's horizontal-orientation tooltip (handleMouseMoveandhandleKeyDown) pinned the tooltip past the plot's right edge withtransform: noneand never measured its width — unlike the vertical branch, which already flips the tooltip left when it would overflow.tooltip.offsetWidth, and flip the tooltip to grow leftward from the plot's right edge when it would overflow the container width.Test plan
BarHorizontalNarrowstory (narrow container + long series label) and a new Playwright CT test asserting the tooltip's right edge stays within the container bounds on hover.npx vitest run: 410/411 pass (1 pre-existing unrelated failure:Icon registry > exports exactly 215 icons, icon count drift unrelated to this change).npx playwright test -c playwright-ct.config.ts src/components/Chart/Chart.test.tsx: 69/69 pass.npx tsc --noEmit: clean.Context
Reported downstream in lightsparkdev/analytics#2511 (Agent Analytics dashboard, horizontal bar plot). Consuming repo will bump
@lightsparkdev/originonce this is released.