fix: improve mobile responsiveness of cospend page

Reduced padding on mobile screens (max-width: 600px) to prevent horizontal overflow and ensure header spans full width. Updated BarChart, DebtBreakdown, EnhancedBalance components and recent activity section.

src/lib/components/BarChart.svelte

@@ -323,6 +323,12 @@
     }
   }
 
+  @media (max-width: 600px) {
+    .chart-container {
+      padding: 0.75rem;
+    }
+  }
+
   canvas {
     max-width: 100%;
     height: 100% !important;

src/lib/components/DebtBreakdown.svelte

@@ -242,4 +242,14 @@
     font-size: 0.85rem;
     text-align: right;
   }
+
+  @media (max-width: 600px) {
+    .debt-breakdown {
+      padding: 0.75rem;
+    }
+
+    .debt-section {
+      padding: 0.75rem;
+    }
+  }
 </style>

src/lib/components/EnhancedBalance.svelte

@@ -333,8 +333,9 @@
     .balance-card {
       min-width: unset;
       width: 100%;
+      padding: 1rem;
     }
-    
+
     .balance-card.enhanced {
       min-width: unset;
     }
@@ -343,6 +344,7 @@
       flex-direction: column;
       gap: 0.75rem;
       align-items: flex-start;
+      padding: 0.75rem;
     }
 
     .transaction-count {

src/routes/cospend/+page.svelte

@@ -676,6 +676,10 @@
       margin-bottom: 1rem;
     }
 
+    .recent-activity {
+      padding: 0.75rem;
+    }
+
     .actions {
       flex-direction: column;
       align-items: center;