6 Commits

Author SHA1 Message Date
Matt
6617f06987 Preserve colorful styling in print while fixing layout
All checks were successful
Build and Push Docker Images / docker (push) Successful in 1m7s
- Remove aggressive black/white print styling
- Keep original gradients, colors, and visual design
- Maintain layout optimizations (spacing, sizing, page breaks)
- Update portfolio table with colorful gradient header
- Fix label overlap by showing styled table in print
- Optimize spacing and font sizes for better page fit

Result: Beautiful colored receipt that fits properly on pages

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-31 18:46:27 +01:00
Matt
109f350ee8 Implement comprehensive print optimization for receipt page
All checks were successful
Build and Push Docker Images / docker (push) Successful in 57s
- Replace pie chart with print-optimized table to eliminate label overlap
- Add extensive @media print CSS for high-contrast, professional output
- Convert all gradients to white backgrounds with black borders
- Optimize spacing and font sizes for print media
- Update CarbonImpactComparison with high-contrast print styling
- Ensure full page width utilization and proper page breaks
- Zero new dependencies (Pure CSS approach per consensus)

Resolves print quality issues: label collision, poor contrast, wasted whitespace

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-31 18:37:27 +01:00
Matt
f0337101cf Show project name and percentage on same line in pie chart
All checks were successful
Build and Push Docker Images / docker (push) Successful in 58s
- Combine project name and percentage into single label line
- Format: "Project Name (25.0%)"
- Reduces vertical space and improves readability
- Cleaner, more compact label design

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-31 18:10:41 +01:00
Matt
69e1465f69 Remove tonnage from pie chart labels for cleaner display
All checks were successful
Build and Push Docker Images / docker (push) Successful in 58s
- Remove middle tonnage line from chart labels
- Keep only project name and percentage
- Tonnage still visible in legend below chart
- Reduces label clutter and improves readability

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-31 18:01:27 +01:00
Matt
4dfc420535 Make pie chart responsive and reduce label text size
All checks were successful
Build and Push Docker Images / docker (push) Successful in 59s
- Reduce label font sizes: 10px name, 9px details (was 14px/12px)
- Add print-friendly smaller sizes: 7px/6px
- Make container fully responsive with max-width constraints
- Reduce label extension distance from ±50px to ±30px
- Reduce label radius from outerRadius+60 to outerRadius+35
- Use fixed pie dimensions (80/50) instead of calculated sizes
- Reduce connector line width from 2px to 1.5px
- Add print-specific max-width and height constraints

Fixes text overflow and makes chart fit properly on page while
maintaining readability and print quality.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-31 17:57:32 +01:00
Matt
f21048b0d6 Replace custom pie chart with Recharts for better label collision handling
Some checks failed
Build and Push Docker Images / docker (push) Failing after 1m10s
- Add Recharts dependency for professional chart rendering
- Create RechartsPortfolioPieChart component with built-in label collision detection
- Replace StaticPortfolioPieChart usage in CheckoutSuccess page
- Remove old StaticPortfolioPieChart component with problematic label overlap
- Fixes jumbled/overlapping labels on portfolio distribution chart

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-31 17:48:20 +01:00