From dbcf8e7abdad0dae332c111e8a91d6aef25bde5f Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Sun, 21 Dec 2025 07:42:09 +0100
Subject: [PATCH] refactor: update grid layout for transactions and overview
 cards; adjust chart dimensions and axis properties for improved
 responsiveness

---
 app/transactions/page.tsx               |  2 +-
 components/dashboard/overview-cards.tsx | 12 ++++++------
 components/statistics/monthly-chart.tsx | 17 ++++++++++++-----
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/app/transactions/page.tsx b/app/transactions/page.tsx
index d68fa63..979189b 100644
--- a/app/transactions/page.tsx
+++ b/app/transactions/page.tsx
@@ -239,7 +239,7 @@ export default function TransactionsPage() {
               <CardContent className="pt-0">
                 {/* Summary cards */}
                 {!isLoadingTransactions && (
-                  <div className="grid gap-4 grid-cols-2 mb-6">
+                  <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 mb-6">
                     <Card>
                       <CardContent className="pt-6">
                         <div className="flex items-center justify-between">
diff --git a/components/dashboard/overview-cards.tsx b/components/dashboard/overview-cards.tsx
index b560537..fb7a1b5 100644
--- a/components/dashboard/overview-cards.tsx
+++ b/components/dashboard/overview-cards.tsx
@@ -57,10 +57,10 @@ export function OverviewCards({ data }: OverviewCardsProps) {
   };
 
   return (
-    <div className="grid gap-4 sm:gap-6 grid-cols-2 lg:grid-cols-5">
+    <div className="grid gap-4 sm:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-5">
       <Card className="stat-card-gradient-1 card-hover group relative overflow-hidden">
         <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
-          <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
+          <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest flex-1 min-w-0 pr-2">
             Solde Total
           </CardTitle>
           <div className="rounded-2xl bg-gradient-to-br from-primary/30 via-primary/20 to-primary/10 p-3 shrink-0 shadow-lg shadow-primary/20">
@@ -86,7 +86,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
 
       <Card className="stat-card-gradient-2 card-hover group relative overflow-hidden">
         <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
-          <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
+          <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest flex-1 min-w-0 pr-2">
             Revenus du mois
           </CardTitle>
           <div className="rounded-2xl bg-gradient-to-br from-success/30 via-success/20 to-success/10 p-3 shrink-0 shadow-lg shadow-success/20">
@@ -108,7 +108,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
 
       <Card className="stat-card-gradient-3 card-hover group relative overflow-hidden">
         <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
-          <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
+          <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest flex-1 min-w-0 pr-2">
             Dépenses du mois
           </CardTitle>
           <div className="rounded-2xl bg-gradient-to-br from-destructive/30 via-destructive/20 to-destructive/10 p-3 shrink-0 shadow-lg shadow-destructive/20">
@@ -130,7 +130,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
 
       <Card className="stat-card-gradient-4 card-hover group relative overflow-hidden">
         <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
-          <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
+          <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest flex-1 min-w-0 pr-2">
             Pointage
           </CardTitle>
           <div className="rounded-2xl bg-gradient-to-br from-chart-4/30 via-chart-4/20 to-chart-4/10 p-3 shrink-0 shadow-lg shadow-chart-4/20">
@@ -149,7 +149,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
 
       <Card className="stat-card-gradient-5 card-hover group relative overflow-hidden">
         <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
-          <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
+          <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest flex-1 min-w-0 pr-2">
             Catégorisation
           </CardTitle>
           <div className="rounded-2xl bg-gradient-to-br from-chart-5/30 via-chart-5/20 to-chart-5/10 p-3 shrink-0 shadow-lg shadow-chart-5/20">
diff --git a/components/statistics/monthly-chart.tsx b/components/statistics/monthly-chart.tsx
index 0bb57c4..56a86d9 100644
--- a/components/statistics/monthly-chart.tsx
+++ b/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>
       )}