feat: enhance responsive design and layout consistency across various components, including dashboard, statistics, and rules pages

components/categories/category-card.tsx

@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { CategoryIcon } from "@/components/ui/category-icon";
 import { Pencil, Trash2 } from "lucide-react";
+import { useIsMobile } from "@/hooks/use-mobile";
 import type { Category } from "@/lib/types";
 
 interface CategoryCardProps {
@@ -21,39 +22,48 @@ export function CategoryCard({
   onEdit,
   onDelete,
 }: CategoryCardProps) {
+  const isMobile = useIsMobile();
+
   return (
     <div className="flex items-center justify-between py-1.5 px-2 rounded hover:bg-muted/50 transition-colors group">
       <div className="flex items-center gap-2 min-w-0 flex-1">
         <div
-          className="w-5 h-5 rounded-full flex items-center justify-center shrink-0"
+          className="w-4 h-4 md:w-5 md:h-5 rounded-full flex items-center justify-center shrink-0"
           style={{ backgroundColor: `${category.color}20` }}
         >
           <CategoryIcon
             icon={category.icon}
             color={category.color}
-            size={12}
+            size={isMobile ? 10 : 12}
           />
         </div>
-        <span className="text-sm truncate">{category.name}</span>
-        <span className="text-sm text-muted-foreground shrink-0">
-          {stats.count} opération{stats.count > 1 ? "s" : ""} •{" "}
-          {formatCurrency(stats.total)}
-        </span>
+        <span className="text-xs md:text-sm truncate">{category.name}</span>
+        {!isMobile && (
+          <span className="text-xs md:text-sm text-muted-foreground shrink-0">
+            {stats.count} opération{stats.count > 1 ? "s" : ""} •{" "}
+            {formatCurrency(stats.total)}
+          </span>
+        )}
+        {isMobile && (
+          <span className="text-[10px] md:text-xs text-muted-foreground shrink-0">
+            {stats.count} 💳
+          </span>
+        )}
         {category.keywords.length > 0 && (
           <Badge
             variant="outline"
-            className="text-[10px] px-1.5 py-0 h-4 shrink-0"
+            className="text-[10px] px-1 md:px-1.5 py-0 h-3 md:h-4 shrink-0"
           >
             {category.keywords.length}
           </Badge>
         )}
       </div>
 
-      <div className="flex items-center shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+      <div className="flex items-center shrink-0 opacity-0 group-hover:opacity-100 md:opacity-100 transition-opacity">
         <Button
           variant="ghost"
           size="icon"
-          className="h-6 w-6"
+          className="h-6 w-6 md:h-6 md:w-6"
           onClick={() => onEdit(category)}
         >
           <Pencil className="w-3 h-3" />
@@ -61,7 +71,7 @@ export function CategoryCard({
         <Button
           variant="ghost"
           size="icon"
-          className="h-6 w-6 text-destructive hover:text-destructive"
+          className="h-6 w-6 md:h-6 md:w-6 text-destructive hover:text-destructive"
           onClick={() => onDelete(category.id)}
         >
           <Trash2 className="w-3 h-3" />

components/categories/parent-category-row.tsx

@@ -21,6 +21,7 @@ import {
   ChevronDown,
   ChevronRight,
 } from "lucide-react";
+import { useIsMobile } from "@/hooks/use-mobile";
 import { CategoryCard } from "./category-card";
 import type { Category } from "@/lib/types";
 
@@ -49,51 +50,60 @@ export function ParentCategoryRow({
   onDelete,
   onNewCategory,
 }: ParentCategoryRowProps) {
+  const isMobile = useIsMobile();
+
   return (
     <div className="border rounded-lg bg-card">
       <Collapsible open={isExpanded} onOpenChange={onToggleExpanded}>
-        <div className="flex items-center justify-between px-3 py-2">
+        <div className="flex items-center justify-between px-2 md:px-3 py-1.5 md:py-2">
           <CollapsibleTrigger asChild>
-            <button className="flex items-center gap-2 hover:opacity-80 transition-opacity flex-1 min-w-0">
+            <button className="flex items-center gap-1.5 md:gap-2 hover:opacity-80 transition-opacity flex-1 min-w-0">
               {isExpanded ? (
-                <ChevronDown className="w-4 h-4 text-muted-foreground shrink-0" />
+                <ChevronDown className="w-3 h-3 md:w-4 md:h-4 text-muted-foreground shrink-0" />
               ) : (
-                <ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
+                <ChevronRight className="w-3 h-3 md:w-4 md:h-4 text-muted-foreground shrink-0" />
               )}
               <div
-                className="w-7 h-7 rounded-full flex items-center justify-center shrink-0"
+                className="w-5 h-5 md:w-7 md:h-7 rounded-full flex items-center justify-center shrink-0"
                 style={{ backgroundColor: `${parent.color}20` }}
               >
                 <CategoryIcon
                   icon={parent.icon}
                   color={parent.color}
-                  size={14}
+                  size={isMobile ? 10 : 14}
                 />
               </div>
-              <span className="font-medium text-sm truncate">{parent.name}</span>
-              <span className="text-sm text-muted-foreground shrink-0">
-                {children.length} • {stats.count} opération
-                {stats.count > 1 ? "s" : ""} • {formatCurrency(stats.total)}
-              </span>
+              <span className="font-medium text-xs md:text-sm truncate">{parent.name}</span>
+              {!isMobile && (
+                <span className="text-xs md:text-sm text-muted-foreground shrink-0">
+                  {children.length} • {stats.count} opération
+                  {stats.count > 1 ? "s" : ""} • {formatCurrency(stats.total)}
+                </span>
+              )}
+              {isMobile && (
+                <span className="text-[10px] md:text-xs text-muted-foreground shrink-0">
+                  {children.length} • {stats.count} 💳
+                </span>
+              )}
             </button>
           </CollapsibleTrigger>
 
-          <div className="flex items-center gap-1 shrink-0 ml-2">
+          <div className="flex items-center gap-0.5 md:gap-1 shrink-0 ml-1 md:ml-2">
             <Button
               variant="ghost"
               size="icon"
-              className="h-7 w-7"
+              className="h-6 w-6 md:h-7 md:w-7"
               onClick={(e) => {
                 e.stopPropagation();
                 onNewCategory(parent.id);
               }}
             >
-              <Plus className="w-4 h-4" />
+              <Plus className="w-3 h-3 md:w-4 md:h-4" />
             </Button>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="icon" className="h-7 w-7">
-                  <MoreVertical className="w-4 h-4" />
+                <Button variant="ghost" size="icon" className="h-6 w-6 md:h-7 md:w-7">
+                  <MoreVertical className="w-3 h-3 md:w-4 md:h-4" />
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
@@ -115,7 +125,7 @@ export function ParentCategoryRow({
 
         <CollapsibleContent>
           {children.length > 0 ? (
-            <div className="px-3 pb-2 space-y-1 ml-6 border-l-2 border-muted ml-5">
+            <div className="px-2 md:px-3 pb-2 space-y-1 ml-4 md:ml-6 border-l-2 border-muted md:ml-5">
               {children.map((child) => (
                 <CategoryCard
                   key={child.id}