Enhance cospend monthly expenses chart with improved UX

- Add monthly total labels above each bar showing cumulative expense amounts
- Improve chart styling: white labels, larger fonts, clean flat tooltip design
- Hide Y-axis ticks and grid lines for cleaner appearance
- Capitalize category names in legend and tooltips
- Show only hovered category in tooltip instead of all categories
- Trim empty months from start of data for users with limited history
- Create responsive layout: balance and chart side-by-side on wide screens
- Increase max width to 1400px for dashboard while keeping recent activity at 800px
- Filter out settlements from monthly expenses view

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

Co-Authored-By: Claude <noreply@anthropic.com>

src/routes/api/cospend/monthly-expenses/+server.ts

@@ -106,9 +106,23 @@ export const GET: RequestHandler = async ({ url, locals }) => {
     });
 
     // Convert to arrays for Chart.js
-    const months = Array.from(monthsMap.keys()).sort();
+    const allMonths = Array.from(monthsMap.keys()).sort();
     const categoryList = Array.from(categories).sort();
 
+    // Find the first month with any data and trim empty months from the start
+    let firstMonthWithData = 0;
+    for (let i = 0; i < allMonths.length; i++) {
+      const monthData = monthsMap.get(allMonths[i]);
+      const hasData = Object.values(monthData).some(value => value > 0);
+      if (hasData) {
+        firstMonthWithData = i;
+        break;
+      }
+    }
+
+    // Trim the months array to start from the first month with data
+    const months = allMonths.slice(firstMonthWithData);
+
     const datasets = categoryList.map((category: string) => ({
       label: category,
       data: months.map(month => monthsMap.get(month)[category] || 0)