From 10f24615e1f47ae9216a3ec4538f0af73e5f5024 Mon Sep 17 00:00:00 2001
From: Emanuel Almeida <emanuel@descomplicar.pt>
Date: Sat, 7 Feb 2026 23:02:02 +0000
Subject: [PATCH] fix: improve expense category legend readability

- Reduce pie chart height from 240px to 180px (less empty space)
- Increase legend text from text-xs to text-sm
- Larger color dots (w-3 h-3) and more spacing between items
- Bold values with tabular-nums for alignment

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/pages/Financial.tsx | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/pages/Financial.tsx b/src/pages/Financial.tsx
index fdd846f..0bbeea6 100644
--- a/src/pages/Financial.tsx
+++ b/src/pages/Financial.tsx
@@ -259,19 +259,19 @@ export default function Financial() {
 
               {/* Pie Chart - Expense Distribution */}
               <motion.div variants={itemVariants} className="glass-card p-6">
-                <h3 className="text-sm font-semibold text-white mb-6 uppercase tracking-wide flex items-center gap-2">
+                <h3 className="text-sm font-semibold text-white mb-4 uppercase tracking-wide flex items-center gap-2">
                   <Receipt className="w-4 h-4 text-brand-400" />
                   Despesas por Categoria
                 </h3>
-                <div className="h-[240px]">
+                <div className="h-[180px]">
                   <ResponsiveContainer width="100%" height="100%">
                     <PieChart>
                       <Pie
                         data={data.categorias.slice(0, 10)}
                         cx="50%"
                         cy="50%"
-                        innerRadius={50}
-                        outerRadius={90}
+                        innerRadius={40}
+                        outerRadius={75}
                         dataKey="value"
                         stroke="none"
                       >
@@ -281,21 +281,21 @@ export default function Financial() {
                       </Pie>
                       <Tooltip
                         formatter={(value: number | undefined) => formatEUR(value || 0)}
-                        contentStyle={{ background: '#18181b', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 12, fontSize: 12 }}
+                        contentStyle={{ background: '#18181b', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 12, fontSize: 13 }}
                         itemStyle={{ color: '#e4e4e7' }}
                       />
                     </PieChart>
                   </ResponsiveContainer>
                 </div>
                 {/* Legend */}
-                <div className="space-y-1.5 mt-2 max-h-[160px] overflow-y-auto scrollbar-thin">
+                <div className="space-y-2.5 mt-3">
                   {data.categorias.slice(0, 10).map((cat, i) => (
-                    <div key={i} className="flex items-center justify-between text-xs">
-                      <div className="flex items-center gap-2 min-w-0">
-                        <div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ background: PIE_COLORS[i % PIE_COLORS.length] }} />
-                        <span className="text-zinc-400 truncate">{cat.name}</span>
+                    <div key={i} className="flex items-center justify-between">
+                      <div className="flex items-center gap-2.5 min-w-0">
+                        <div className="w-3 h-3 rounded-full flex-shrink-0" style={{ background: PIE_COLORS[i % PIE_COLORS.length] }} />
+                        <span className="text-sm text-zinc-300 truncate">{cat.name}</span>
                       </div>
-                      <span className="text-white font-medium ml-2">{formatEUR(cat.value)}</span>
+                      <span className="text-sm text-white font-semibold ml-3 tabular-nums">{formatEUR(cat.value)}</span>
                     </div>
                   ))}
                 </div>