refactor: update grid layout for transactions and overview cards; adjust chart dimensions and axis properties for improved responsiveness

components/statistics/monthly-chart.tsx

@@ -47,14 +47,21 @@ export function MonthlyChart({
   const chartContent = (
     <>
       {data.length > 0 ? (
-        <div className="h-[300px]">
+        <div className="h-[400px] sm:h-[300px]">
           <ResponsiveContainer width="100%" height="100%">
-            <LineChart data={data}>
+            <LineChart data={data} margin={{ left: 0, right: 10, top: 10, bottom: 5 }}>
               <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-              <XAxis dataKey="month" className="text-xs" />
+              <XAxis 
+                dataKey="month" 
+                className="text-xs"
+                angle={-45}
+                textAnchor="end"
+                height={60}
+                interval={0}
+              />
               <YAxis
                 className="text-xs"
-                width={80}
+                width={60}
                 tickFormatter={(v) => {
                   // Format compact pour les grandes valeurs
                   if (Math.abs(v) >= 1000) {
@@ -96,7 +103,7 @@ export function MonthlyChart({
           </ResponsiveContainer>
         </div>
       ) : (
-        <div className="h-[300px] flex items-center justify-center text-muted-foreground">
+        <div className="h-[400px] sm:h-[300px] flex items-center justify-center text-muted-foreground">
           Pas de données pour cette période
         </div>
       )}