fix: improve member page UI with better charts, buttons, and team names styling

[drifter089]

Summary

Improves the member page UI with better chart sizing, consistent button styling, and cleaner team name presentation.

Key Changes

• Pie chart: Use percentage-based radius for better fit with many data points, add scrollable legend
• Bar chart: Hide redundant x-axis labels when using simple legend mode
• Members sidebar button: Match canvas page styling (smaller, with separator)
• Role/KPI card icons: Always visible (opacity 60%) instead of hidden until hover
• Show Roles & KPIs button: Changed from ghost to outline variant for visible border
• Team names: Changed from badges to a cleaner list format with different styling

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
org-os	Ready	Preview, Comment	Jan 9, 2026 3:56pm

[coderabbitai]

Warning

Rate limit exceeded

@drifter089 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 27 minutes and 7 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.

📥 Commits

Reviewing files that changed from the base of the PR and between 1b381b7 and 6771e7c.

📒 Files selected for processing (6)

• src/app/member/member-card.tsx
• src/app/member/members-sidebar.tsx
• src/components/charts/goals-bar-chart.tsx
• src/components/charts/pie-chart.tsx
• src/components/metric/kpi-card.tsx
• src/components/role/role-card.tsx

---

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.}

[claude]

Pull Request Review

This PR makes several UI improvements to the member page. Overall, the changes are well-executed and improve the user experience. Here's my detailed review:

✅ Positives

1. Consistent Styling: The member sidebar button now matches the canvas page styling with smaller dimensions and a visual separator, maintaining design consistency across the app.

2. Better Chart Handling: Using percentage-based radius for pie charts (innerRadius="40%", outerRadius="70%") is a smart improvement that scales better with different data volumes compared to fixed pixel values.

3. Improved Usability: Making role/KPI card icons always visible with opacity-60 instead of hidden is a UX improvement - users can see affordances without needing to hover.

4. Cleaner Team Display: The change from badges to a list format with underlined links is cleaner and more semantic (uses proper <ul>/<li> elements).

5. Smart Conditional Rendering: The simpleLegend mode in GoalsBarChart intelligently hides redundant x-axis labels when using a simple legend, reducing visual clutter.

🔍 Code Quality Observations

member-card.tsx:174-193

The team list refactor improves semantic HTML. However, consider:

• The pl-5 padding creates a 20px left indent for the list. With default browser list styles, this might create more spacing than intended. Consider using list-inside or list-none with custom bullets for more precise control.

// Current
<ul className="space-y-1 pl-5">

// Suggestion (if tighter spacing desired)
<ul className="list-none space-y-1 pl-0">

pie-chart.tsx:94-98

The scrollable legend is a good solution for many data points, but:

• The maxHeight: "80px" might truncate content unexpectedly. Consider adding visual indication (gradient fade) that content is scrollable.
• paddingTop: 8 reduced from 16 - ensure this doesn't cause visual crowding with the chart itself in all cases.

goals-bar-chart.tsx:393-416

The conditional XAxis configuration is well-implemented with proper type safety. Good use of ternary operators for clean conditional rendering.

Minor point: The axisLine set to false in simpleLegend mode removes the bottom border entirely. This is likely intentional, but verify this looks good in the UI (no floating bars).

members-sidebar.tsx:76-87

Button sizing is more compact (h-7 px-1.5 from h-8 px-2). The separator | is a nice touch.

Accessibility note: The separator is purely visual - screen readers will announce "Members | 5" which is acceptable, but consider using aria-label for more explicit semantics if needed.

🐛 Potential Issues

Low Priority

1. Pie Chart Scroll UX: Users might not realize the legend is scrollable. Consider adding a subtle scroll indicator or shadow gradient.

2. Button Variant Change (member-card.tsx:260): Changed from ghost to outline variant. This makes the button more prominent, which is good for discoverability but might be jarring if users are accustomed to the previous subtle appearance. Monitor user feedback.

🎯 Performance Considerations

No performance concerns. Changes are purely presentational and don't introduce:

• Additional queries
• Expensive computations
• Memory leaks
• Re-render issues

🔒 Security Concerns

None. All changes are UI-only with no security implications.

🧪 Test Coverage

This PR is primarily visual/UI changes. Consider:

• Visual regression tests: If you use Playwright visual testing, add snapshots for:

  • Member card with multiple teams
  • Pie chart with many data points (to verify scrollable legend)
  • Goals bar chart in both normal and simpleLegend modes

• Accessibility tests: Verify that the new list-based team display is properly announced by screen readers

📋 Recommendations

1. Add visual indicator for scrollable legend: Either a fade gradient or a subtle "scroll for more" hint
2. Consider list-style adjustment: Verify the pl-5 spacing looks intentional with default list bullets
3. Document simpleLegend prop: Add JSDoc comment explaining when to use this mode
4. Test with edge cases:
   • Single team vs many teams
   • Very long team names
   • Pie chart with 20+ segments

Summary

This is a solid PR that improves UI consistency and user experience. The code quality is good with proper TypeScript usage and semantic HTML. No blocking issues identified - ready to merge with the minor suggestions above considered for future iterations.

Recommendation: ✅ Approve