Fix analytics tooltip stacking#3123
Draft
yohaku-devwork wants to merge 1 commit into
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Fixes #3122.
Analytics chart tooltips can render behind neighboring chart elements because the area chart tooltip content used a negative z-index. This removes that negative stacking value and gives Recharts' tooltip wrapper a small positive z-index across the analytics chart components so hovered tooltips stay above adjacent chart content.
Screenshots
Not attached. I verified the affected analytics chart tooltip locally in the browser.
Additional Context
The change is intentionally limited to Recharts tooltip stacking styles in
components/charts.js.Checklist
Are your changes backward compatible? Please answer below:
Yes. This is a display-only style change for chart tooltips and does not alter data shape, GraphQL fields, or persisted data.
On a scale of 1-10 how well and how have you QA'd this change and any features it might affect? Please answer below:
npm run lint,npm test, andgit diff --check. Also checked the issue scope, affected chart usages, and Recharts tooltipwrapperStylebehavior. Ran the local Stacker News dev app withCOMPOSE_PROFILES=minimaland verified/stackers/all/dayin Chrome DevTools: theunique spenderstooltip renders above adjacent chart/legend content.For frontend changes: Tested on mobile, light and dark mode? Please answer below:
Yes. Checked desktop light mode, desktop dark mode, and a mobile-width layout. The tooltip renders above chart content in the tested states.
Did you introduce any new environment variables? If so, call them out explicitly here:
No.
Did you use AI for this? If so, how much did it assist you?
Yes. Codex helped identify the relevant issue and code path, made the small local change, and ran lint/test/diff/browser checks. The change was reviewed before opening this draft PR.