From 820360df5ba95c849a21f66f495bc1c3f523fa20 Mon Sep 17 00:00:00 2001
From: le king fu <lekingfu@protonmail.com>
Date: Thu, 5 Mar 2026 14:42:44 -0500
Subject: [PATCH] Fix chart label visibility and improve budget cell edit UX

- Change chart amount labels from white to black with white stroke outline
  for better contrast on all bar colors (fixes #8)
- Improve budget table editable cells: add hover background, pointer cursor,
  tooltip hint, and larger click target for clearer affordance (fixes #9)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/budget/BudgetTable.tsx            | 6 ++++--
 src/components/reports/CategoryOverTimeChart.tsx | 2 +-
 src/i18n/locales/en.json                         | 1 +
 src/i18n/locales/fr.json                         | 1 +
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/budget/BudgetTable.tsx b/src/components/budget/BudgetTable.tsx
index c777bcd..949ed8f 100644
--- a/src/components/budget/BudgetTable.tsx
+++ b/src/components/budget/BudgetTable.tsx
@@ -283,7 +283,8 @@ export default function BudgetTable({ rows, onUpdatePlanned, onSplitEvenly }: Bu
             <div className="flex items-center justify-end gap-1">
               <button
                 onClick={() => handleStartEditAnnual(row.category_id, row.annual)}
-                className="font-medium text-xs hover:text-[var(--primary)] transition-colors cursor-text"
+                title={t("budget.clickToEdit")}
+                className="font-medium text-xs hover:text-[var(--primary)] hover:bg-[var(--muted)]/40 transition-colors cursor-pointer rounded px-1 py-0.5"
               >
                 {formatSigned(row.annual * sign)}
               </button>
@@ -315,7 +316,8 @@ export default function BudgetTable({ rows, onUpdatePlanned, onSplitEvenly }: Bu
             ) : (
               <button
                 onClick={() => handleStartEdit(row.category_id, mIdx, val)}
-                className="w-full text-right hover:text-[var(--primary)] transition-colors cursor-text text-xs"
+                title={t("budget.clickToEdit")}
+                className="w-full text-right hover:text-[var(--primary)] hover:bg-[var(--muted)]/40 transition-colors cursor-pointer text-xs rounded px-1 py-0.5"
               >
                 {formatSigned(val * sign)}
               </button>
diff --git a/src/components/reports/CategoryOverTimeChart.tsx b/src/components/reports/CategoryOverTimeChart.tsx
index a4024b2..40c85fb 100644
--- a/src/components/reports/CategoryOverTimeChart.tsx
+++ b/src/components/reports/CategoryOverTimeChart.tsx
@@ -152,7 +152,7 @@ export default function CategoryOverTimeChart({
                     dataKey={c.name}
                     position="center"
                     formatter={(v: unknown) => Number(v) ? cadFormatter(Number(v)) : ""}
-                    style={{ fill: "#fff", fontSize: 10, fontWeight: 600, textShadow: "0 1px 2px rgba(0,0,0,0.5)" }}
+                    style={{ fill: "#000", fontSize: 10, fontWeight: 600, paintOrder: "stroke", stroke: "rgba(255,255,255,0.7)", strokeWidth: 3, strokeLinejoin: "round" }}
                   />
                 )}
               </Bar>
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 5414caa..7108e35 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -314,6 +314,7 @@
     "annual": "Annual",
     "splitEvenly": "Split evenly across 12 months",
     "annualMismatch": "Annual total does not match the sum of monthly amounts",
+    "clickToEdit": "Click to edit",
     "applyToMonth": "Apply to month",
     "allMonths": "All 12 months",
     "expenses": "Expenses",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index f02ecd5..cd3d3f6 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -314,6 +314,7 @@
     "annual": "Annuel",
     "splitEvenly": "Répartir également sur 12 mois",
     "annualMismatch": "Le total annuel ne correspond pas à la somme des montants mensuels",
+    "clickToEdit": "Cliquer pour modifier",
     "applyToMonth": "Appliquer au mois",
     "allMonths": "Les 12 mois",
     "expenses": "Dépenses",