Fix tooltip accent line and colors

[raifdmueller]

Summary

• Fix broken left accent line on chart tooltip (used rx={4} on a 4px-wide rect, causing oval shape that didn't cover the stroke)
• Use clipPath to clip accent bar to main rect's rounded corners
• Use fixed dark colors instead of CSS variables (tooltip should always be dark, like OS tooltips — var(--bg-card) was white in light mode)

Test plan

• Hover over chart dots in light mode — tooltip has clean left accent line
• Hover over chart dots in dark mode — tooltip looks identical

🤖 Generated with Claude Code

Summary by CodeRabbit

• Style

  • Refined tooltip styling in the radar chart with improved color consistency across all tooltip elements and standardized visual appearance to ensure better readability and a more cohesive overall design aesthetic.

• Refactor

  • Enhanced tooltip rendering mechanism to ensure better visual presentation with improved visual containment and cleaner, more polished appearance of tooltip indicators and supporting design elements.

[coderabbitai]

Warning

Rate limit exceeded

@raifdmueller has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 13 minutes and 21 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 28bcfb75-32af-4fd9-8d33-14b778ebb34d

📥 Commits

Reviewing files that changed from the base of the PR and between 4097384 and 5ba5e30.

📒 Files selected for processing (1)

• src/components/RadarChart.jsx

📝 Walkthrough

Walkthrough

Modified the RadarChart component's tooltip styling by replacing CSS variable references with hard-coded color values for the tooltip background, text labels, and decoration polygons. Added an SVG clipPath element to constrain the tooltip indicator bar within tooltip boundaries.

Changes

Cohort / File(s)	Summary
Tooltip Styling & SVG Clipping src/components/RadarChart.jsx	Replaced CSS variable colors with hard-coded hex values (#1e293b, #94a3b8, #475569) for tooltip background, label text, and suffix text. Added SVG clipPath with id tt-clip to clip the tooltip indicator bar glyph within tooltip bounds.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A tooltip in blue, so sharp and so sleek,
With colors now fixed, the vision unique,
A clipPath drawn with careful paw strokes,
The radar shines bright—no CSS jokes!
Whiskers twitch proudly at styling so fine. ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Fix tooltip accent line and colors' directly matches the main objectives: fixing the broken accent line and replacing CSS variables with fixed dark colors for the tooltip.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/RadarChart.jsx`:
- Line 413: The component RadarChart.jsx currently hardcodes tooltip colors
(e.g., fill="#1e293b" and the inconsistent "#475569" used for the "/ 4" suffix)
instead of using CSS custom properties; add dedicated tooltip variables to
src/theme.js (for example --tooltip-bg, --tooltip-text, --tooltip-text-muted)
and update RadarChart.jsx to replace all hardcoded color literals (the fill and
any color props rendering the muted suffix and other tooltip text) with
references to those new CSS variables so the tooltip remains consistently dark
while honoring the theme system.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 6294f8ba-06fb-4eef-872e-50a054e8095b

📥 Commits

Reviewing files that changed from the base of the PR and between 50e2805 and 4097384.

📒 Files selected for processing (1)

• src/components/RadarChart.jsx

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Hardcoded colors bypass theme system and contain an inconsistency.

While the PR intentionally uses fixed dark colors for an "always-dark" tooltip, this approach:

1. Violates the CSS custom properties guideline for theme management.
2. Contains an inconsistent color: Line 424 uses #475569, which is the light mode --text-muted value. The dark mode equivalent is #cbd5e1. This will make the "/ 4" suffix appear darker than expected in the dark-styled tooltip.

If always-dark tooltips are a deliberate design pattern, consider defining dedicated CSS variables (e.g., --tooltip-bg, --tooltip-text-muted) in theme.js that remain constant across themes. This preserves the design intent while maintaining the theme system's extensibility.

Suggested fix for color consistency

-            <tspan fill="#475569" fontSize="11" fontWeight="400">
+            <tspan fill="#cbd5e1" fontSize="11" fontWeight="400">

Or better, add dedicated tooltip variables to theme.js that don't change between themes:

// In theme.js, add to both palettes:
"--tooltip-bg": "#1e293b",
"--tooltip-text": "#94a3b8", 
"--tooltip-text-muted": "#cbd5e1",

Then reference these in the component to maintain theme system compliance.

As per coding guidelines: "Implement theme management via CSS custom properties defined in src/theme.js".

Also applies to: 419-419, 424-424, 431-431, 438-438

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/RadarChart.jsx` at line 413, The component RadarChart.jsx
currently hardcodes tooltip colors (e.g., fill="#1e293b" and the inconsistent
"#475569" used for the "/ 4" suffix) instead of using CSS custom properties; add
dedicated tooltip variables to src/theme.js (for example --tooltip-bg,
--tooltip-text, --tooltip-text-muted) and update RadarChart.jsx to replace all
hardcoded color literals (the fill and any color props rendering the muted
suffix and other tooltip text) with references to those new CSS variables so the
tooltip remains consistently dark while honoring the theme system.