fix: use short month names

components/dashboard/income-expense-graph-tooltip.tsx

@@ -17,10 +17,8 @@ export function IncomeExpenceGraphTooltip({ data, defaultCurrency, position, vis
   const incomeCategories = data.categories.filter((cat) => cat.income > 0)
   const expenseCategories = data.categories.filter((cat) => cat.expenses > 0)
 
-  // Calculate positioning - show to right if space available, otherwise to left
   const tooltipWidth = 320 // estimated max width
   const spaceToRight = window.innerWidth - position.x
-  const spaceToLeft = position.x
   const showToRight = spaceToRight >= tooltipWidth + 20 // 20px margin
 
   const horizontalOffset = showToRight ? 15 : -15 // distance from cursor

components/dashboard/income-expense-graph.tsx

@@ -121,7 +121,7 @@ export function IncomeExpenseGraph({ data, defaultCurrency }: IncomeExpenseGraph
                   onClick={() => item.income > 0 && handleBarClick(item, "income")}
                 >
                   {/* Period label above income bars */}
-                  <div className="text-sm font-bold text-gray-700 break-all mb-2 text-center">
+                  <div className="text-sm font-bold text-gray-700 break-words mb-2 text-center">
                     {formatPeriodLabel(item.period, item.date)}
                   </div>
 

lib/utils.ts

@@ -127,9 +127,9 @@ export function formatPeriodLabel(period: string, date: Date): string {
       year: "numeric",
     })
   } else {
-    // Monthly format: show month/year
+    // Monthly format: show month/year with short month name
     return date.toLocaleDateString("en-US", {
-      month: "long",
+      month: "short",
       year: "numeric",
     })
   }